Concept analysis of redrawing and reflow in browsers

The content of this article is about the conceptual analysis of redrawing and reflow in browsers. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. Render tree
1. The browser parses the obtained HTML code into a DOM tree. Each tag in HTML is A node in the DOM tree, the root node is our commonly used document object. The DOM tree contains all HTML tags, including display:none hidden, and elements dynamically added using JS;

2. The browser parses all styles (user-defined css and user agents) into style structures body, styles that the browser cannot recognize will be removed during the parsing process. For example, IE will remove styles starting with -moz, and Firefox will remove styles starting with _;

3. After combining the DOM tree and style structure Build a render tree. The render tree is similar to the DOM tree, but the difference is very big. The render tree can identify styles. Each node of the render tree has its own style, and the render tree does not contain hidden nodes (such as display). :none nodes, as well as head nodes), because these nodes will not be used for rendering and will not affect rendering.

2. Definition of redrawing and reflow
Redraw: When the style of the current element (background color, font color, etc.) changes, we You only need to re-render the changed elements. Re-rendering has a small impact on browser performance, so it is generally not considered.

Redrawing occurs: Change the appearance style of the container, such as background: black, etc. Changing the appearance does not change the layout and does not affect other DOM.

Reflow: refers to the process in which the browser recalculates the position and geometric structure of elements in the document in order to re-render part or all of the document.
Because reflow may cause the entire DOM tree to be reconstructed, it is a major killer of performance
The reflow of an element causes all its child elements and the immediately following ancestor elements in the DOM Subsequent reflow.

3. Operations that trigger reflow
1.Resizing the window

2.Changing the font )

3. Adding or removing a stylesheet

4. Content changes, such as a user typing text in an input box)

5. Activation of CSS pseudo classes such as :hover (in IE the activation of sibling node pseudo classes) the pseudo class of a sibling)

6.Manipulating the class attribute

7.A script manipulating the DOM

8. Calculating offsetWidth and offsetHeight properties (Calculating offsetWidth and offsetHeight)

9. Setting the value of the style attribute (Setting a property of the style attribute)

10. Fixed positioned elements, while dragging and scrolling The bar will keep reflowing

How to avoid reflow
1. Change together: If you want to change the style of an element, you can concentrate all the styles on one class and change it at once, and Not changing several times
2. Use absolute
3. Avoid using table layout
4. Do not use CSS expressions
5. Change elements at the end
6. Animation When moving, you need to control it
For example, when we drag an element, I do it when its x or y coordinate changes 5px. Although this reduces the smoothness, it improves the performance
7. If you want to make it complicated If the performance changes, such as animation effects, please implement it outside this flow line. Use position-absolute or position-fixed to implement it.
8. Since calculating offsetWidth will also cause reflow, then use a variable to save it
9. When we need to add nodes to the document, we can use document fragmentation to solve this problem. When we need When adding new elements to the DOM, first put them in a container and then add them uniformly, so that only one reflow is generated

Related recommendations:

Two methods for calling self-executing functions in js

Analysis summary of local objects & built-in objects & host objects in js

The above is the detailed content of Concept analysis of redrawing and reflow in browsers. For more information, please follow other related articles on the PHP Chinese website!