When it comes to front-end performance optimization, everyone has a lot of ideas. Now, take a moment to think about the various tools that we’re using and boil them down to three steps
Number of key resource bytes
The number of bytes is what I usually mean by reducing resource files (JS, CSS,image,video…). The size of the
1, the compression
- The front end uses Uglify to obfuscate compression
- Gzip is enabled on the backend
- Compress images using a more compressed format (webP)
2, the cache
- Strong cache (HTTP status code: 200), without requesting the server to directly use the local cache
- Negotiation cache (HTTP status code: 304). If the server is told that the cache has not expired, the local cache is used instead of downloading resources
- Use localStorage to store data
3. Optimized for the first screen
Non-critical resources are loaded lazily or asynchronously to reduce the size of resources on the first screen
Number of key resource connections
1. Merge request
- Multiplexing merge requests using HTTP2.0
- Configure Combo as a means of combining resource requests when HTTP2.0 is not available
2, reduce the number of image requests
- The use of spite figure
- Using SVG – symbol
3. Use CSS and JS inline for some scenes
4. Use strong caching to reduce one server request
5. Non-critical resources are loaded asynchronously and delayed, reducing the number of resource connections on the first screen
Third, the key render path
There is a map on the web about the page rendering path, I will not put here, you are interested in their own Baidu
1. Block output of Bigpipe
The main reason here is that to complete the output of a whole page, the back-end needs to deal with many tasks. We can divide these multiple tasks into blocks, and the one who completes them first will output them first. Finally, DOM nodes will be output through JS backfill. This approach mainly solves the problem of straight out page blocking
2, BigRender block rendering
The conventional approach is to use front-end templates to render the page, which mainly reduces the number of nodes when building the DOM tree for the first time
3. Reflow, Repaint, Composit path processing
4, the concepts of render layer, graphics layer when it comes to animation
5. Put CSS at the top and JS at the bottom to avoid blocking DOM tree construction.
You can pay attention to the relevant article about the position of CSS and JS on page rendering. Core: CSS resources do not block building of the DOM tree but block rendering of the DOM, JS blocks building of the DOM tree, CSS blocks JS execution
conclusion
The solutions to the three steps of performance optimization are provided above, but they are not the whole picture, so you can think about these three benchmarks from which the front-end performance optimizer can start