Browser rendering principle
- Parse HTML, generate DOM tree, parse CSS, generate CSSOM tree
- Combine the DOM tree and the CSSOM tree to generate a Render Tree
Reflow:
- Reflow means that the layout or geometric properties need to be changed, which is called reflow. Reflow is a key factor affecting browser performance, because its changes involve the layout update of part of the page (or the entire page). The reflow of an element may result in the subsequent reflow of all its child elements, as well as the nodes and ancestor node elements following it in the DOM.
Redraw:
- Redrawing is due to changes in the geometric properties of nodes or due to changes in styles, but does not affect the layout. For example, outline, visibility, color, background-color, etc., the cost of redrawing is high, because the browser must verify the visibility of other node elements on the DOM tree.
When will backflow occur
1. Add or delete visible DOM elements
2. The position of the element changes
3. The size of the element changes (including outer margin, inner border, border size, height and width, etc.)
4. The content changes, such as a text change or a picture being replaced by another picture of a different size.
5. When the page is first rendered (this is definitely unavoidable)
6. The window size of the browser changes (because the reflow calculates the position and size of the element according to the size of the viewport)
And redrawing refers to the situation where the layout and geometric size are not changed, such as changing the background-color, or changing the color of the font color.
Note: Reflow will definitely trigger redraw, and redraw will not necessarily reflow
How to reduce reflow and redraw
1. CSS optimization method
(1) Use transform instead of top
(2) Replace display: none with visibility, because the former will only cause redrawing, and the latter will cause reflow (changing the layout
(3) Avoid using the table layout, a small change may cause the re-layout of the entire table.
(4) Change the class at the end of the DOM tree as much as possible. Reflow is inevitable, but its impact can be reduced. Changing the class at the end of the DOM tree as much as possible can limit the scope of reflow and make it affect as few nodes as possible.
(5) Avoid setting multi-layer inline styles. CSS selectors match and search from right to left to avoid too many node levels.
(6) Apply animation effects to elements whose position attribute is absolute or fixed to avoid affecting the layout of other elements. This is just a redraw instead of reflow. At the same time, you can choose requestAnimationFrame to control the animation speed. For details, see requestAnimationFrame.
(7) Avoid using CSS expressions, which may cause reflux.
(8) Set the node that is frequently redrawn or reflowed as a layer. The layer can prevent the rendering behavior of the node from affecting other nodes, such as will-change, video, iframe, and other tags. The browser will automatically change the node to Layers.
(9) CSS3 hardware acceleration (GPU acceleration), using CSS3 hardware acceleration, can make transform, opacity, filters these animations will not cause reflow and redraw. But for other attributes of animation, such as background-color, it will still cause reflow and redraw, but it can still improve the performance of these animations.
2. JavaScript optimization method
(1) Avoid frequently operating styles. It is best to rewrite the style attribute once, or define the style list as class and change the class attribute once.
(2) Avoid frequently operating the DOM, create a documentFragment, apply all DOM operations on it, and finally add it to the document.
(3) Avoid frequently reading attributes that will cause reflow/redraw. If you really need to use them multiple times, use a variable to cache them.
The original blog link address: https://www.cnblogs.com/wwwxxjsyy/p/12559272.html