1. Reduce the number of HTTP requests.

When the browser communicates with the server, it mainly communicates through HTTP. Browsers and servers pass through three-way handshake. Every handshake takes a lot of time, and the number of concurrent requests for resource files by different browsers is limited. When the number of HTTP requests reaches a certain number, resource requests are waiting.

2. Control the loading priority of resource files

When the browser loads the HTML content, it parses the HTML content from top to bottom in turn. When HTML content is parsed into a link or script tag, it will load the linked content corresponding to the href or src. In order to show the page to users in the first time, C55 needs to be loaded in advance without being affected by is. So generally speaking, C55 is at the top and js is at the bottom.

3. Use browser cache

The browser stores the network resources locally. When waiting for the next resource request, if the resources already exist, you don't need to go to the server to request the resources, and you can directly read the resources locally.

4, reduce the rearrangement (refLlow)

Basic principle: rearrangement means that the change of DOM affects the geometric properties (width and height) of elements, and the browser will recalculate the geometric properties of elements, making the affected parts in the rendering tree invalid. The browser verifies the visibility properties of all other nodes in the DOM tree, which is why refLow is inefficient. If the rearrangement is too frequent, the CPU utilization will rise sharply to reduce the rearrangement. If you need to add styles during DOM operation, try to add the class attribute instead of manipulating styles through style.

5. This icon will be replaced by a font icon.

6. When switching modules, a single module loads slowly.

A single module calls a large number of interfaces during initialization. For example, when it is loaded for the first time, it needs to tab to display the tree and list of calling interfaces, and there are too many concurrent http connection trees, which leads to slow loading.

7. A single vue file is too large, and there are a lot of redundant codes without component extraction, page splitting and public * * * method extraction.

Through code deviation, it is found that the common components are not planned and extracted in the project. For example, tab switches search criteria, changing only one type of search criteria, but repeatedly initializing the drop-down tree in the project. A single vue file can reach 4000 lines, and there are a lot of redundant codes, which is extremely difficult to maintain.

Lighting layout is divided into left and right, up and down and their combined modules, which are put into modules in the form of sub-components, which is convenient for package optimization, reuse, function expansion and maintenance of reusable components. Layout function modules can be reused, such as filter conditions in tabs, details pop-up, forms, etc.

8. vue- router optimization-

Routing lazy loading When packaging and building applications, JavaScript packages will become very large, which will affect page loading.

9, component optimization

Divide the route by module. Divide routes and sub-routes according to business modules to ensure the isolation between modules.

When a module is divided into components according to layout or function, a single module has more functions or complex logic.