Front-end performance optimization

0. Browser rendering principle:

1. Enter URL -> dns query -> dns cache -> three-way handshake to establish connection -> browser sends request to server -> server returns html -> browser renders the page; 
2. Browser rendering process (webkit as an example):
   ① First perform dom parsing, css parsing, and build a dom tree; (the element of display:none is in the dom tree)
   ② After css parsing is completed, css rules are added to the dom tree to generate a render tree (reflow ). The reflow stage should be avoided as much as possible); (the element of display:none is not in the dom tree)
   ③ After the stacking context processing, the render layer is generated (repainting the repaint stage), you can directly go to the paint page, or go to ④;
   ④ After the layers are merged, the graphics are generated layer, and then the GPU draws.

1. Browser hosting environment level:

1. Due to the single-threaded parsing blocking limitation, the script defer attribute can be used to load asynchronously, the style is placed at the head, and the script is placed at the bottom;
2. Use the event bubbling mechanism and use the event delegation method to bind events;
3. When the browser is rendering, enabling hardware acceleration can generate a composite layer, and the composite layer is handed over to the GPU for rendering, but cannot be abused;

2. Network layer:

1. Reduce the number of http requests: css, js merge, css sprites, font-icon, base64 encoded images, image lazy loading;
2. Reduce http data request size
3. For cookie performance bugs, static resources are deployed separately, cdn caching,

3. Code level: