Reduce the number of HTTP requests
When the browser communicates with the server, the communication is mainly through HTTP. The browser and the server need to go through three handshake, and each handshake takes a lot of time. Moreover, different browsers have a limited number of concurrent requests for resource files (the number of concurrent requests allowed by different browsers). Once the number of HTTP requests reaches a certain number, the resource request will have a waiting state, which is very fatal, so reducing the number of HTTP requests can be very large Optimize website performance to a certain extent.
CSS Sprites: Commonly known as CSS sprites in China, this is a solution to combine multiple pictures into one picture to reduce HTTP requests. The content of the picture can be accessed through the CSS background property. This solution can also reduce the total number of bytes in the picture.
Merging CSS and JS files: There are many engineering packaging tools on the front end, such as grunt, gulp, webpack, etc. In order to reduce the number of HTTP requests, these tools can be used to merge multiple CSS or multiple JS into one file before publishing.
Using lazyLoad: commonly known as lazy loading, it can control the content on the web page without loading at the beginning, without requesting, and loading the content immediately when the user operation really needs it. This controls the number of one-time requests for web resources.
·Control resource file loading priority
When the browser loads the HTML content, it parses the HTML content from top to bottom. When the link or script tag is parsed, the href or src corresponding link content will be loaded. In order to display the page to the user the first time, the CSS needs to be loaded in advance. , Don’t be affected by JS loading.
In general, CSS is at the head and JS is at the bottom.
·Use browser cache
Browser cache is to store network resources locally, and wait for the next time the resource is requested. If the resource already exists, there is no need to go to the server to request the resource again, and the resource is directly read locally.
·Reduce rearrangement (Reflow)
Basic principle: Rearrangement is that DOM changes affect the geometric attributes (width and height) of the element. The browser will recalculate the geometric attributes of the element, which will invalidate the affected part of the rendering tree. The browser will verify the The visibility property of all other nodes is also the reason for the inefficiency of Reflow. If Reflow is too frequent, CPU usage will rise sharply.
Reduce Reflow. If you need to add styles during DOM manipulation, try to increase the class attribute instead of manipulating styles through style.
·Reduce DOM operations
·Icons are replaced by IconFont