CSS page redraw and reflow (rearrangement) and optimization

first, the rendering process of HTML page

1. The browser parses the acquired HTML code into 1 dom trees, each tag in the HTML is 1 nodes in the DOM tree, and the root node is our common Document object. Dom tree contains all the HTML tags, including display:none hidden, but also useful JS dynamically added elements and so on.

2. The browser parses all the styles (user-defined CSS and user-agent) into a style structure, and in the process of parsing, it removes the styles that the browser does not recognize, such as IE removes the style from the beginning of the-moz, and FF strips out the style of the _.

3. The DOM tree and the style structure are combined to construct the render tree, which is similar to Dom tree, but the difference is that the render tree recognizes the style, and each node in the render tree has its own style, and the render The tree does not contain hidden nodes (such as display:none nodes and head nodes) because these nodes are not used for rendering and are not affected by rendering, so they are not included in the render tree. Note that Visibility:hidden hidden elements are still included in the render tree, because Visibility:hidden affects the layout and occupies space. According to the CSS2 standard, each node in the render tree is called box dimensions, which understands that the page element is a box with padding, margins, borders, and positions.

4. Once the render tree is built, the browser can draw the page based on the render tree. second, reflow and redraw

1. When part (or all) of the render tree needs to be rebuilt because of the size, layout, and concealment of the elements. This is called reflux (reflow). Each page needs at least one reflow, which is the first time the page loads. During reflow, the browser invalidates the affected part of the render tree and reconstructs the part of the render tree, and after the reflow is completed, the browser redraws the affected part into the screen, which becomes redrawn.

2. When some elements in the render tree need to update properties, these properties only affect the appearance, style of the element, without affecting the layout, such as Background-color. It is called redrawing.

Note: Reflow is bound to cause repainting, and repainting does not necessarily cause reflux.

When reflux occurs:

Reflow is required when page layout and Geometry properties change. Browser reflow occurs in the following situations:

1. Add or remove visible DOM elements;

2, the element position changes;

3. Element size change-margin, fill, border, width and height

4, changes in content-such as text changes or changes in the size of the image caused by the width and height of the calculated value change;

5. Initialization of page rendering;

6. browser window Size Change--resize event occurs; optimization (reduce reflow, redraw)

optimization strategy of the browser itself : The browser will maintain a queue, all the operations that cause reflow, redraw into this queue, and so on the queue to a certain number of operations or to a certain time interval, the browser will flush the queue, a batch processing. This allows multiple reflow and repainting to become a reflow redraw. But sometimes some of the code we write might force the browser to flush the queue ahead of time, so the browser's optimizations might not work. When you request some style information from the browser, the browser will flush the queue.

Reduce the action on the render tree (merging multiple DOM and style modifications) and reduce requests for some style information to make the best use of the browser's optimization strategy

Method:

1. Merge the actions of the style property multiple times into one operation.

2. The element that needs to be re-position is set to absolute or fixed so that the element is out of the document flow and its changes do not affect other elements. For example, an animated element is best set to absolute positioning.

3. Operate the node multiple times in memory and add it to the document when you are done. For example, to get tabular data asynchronously, render to a page. Instead of looping through each row, you can make an HTML fragment of the entire table in memory and then add it to the document once.

4. Because the display property is none element is not in the render tree, the operation of the hidden element does not cause the rearrangement of other elements. If you want to perform complex operations on an element, you can hide it and then display it when the operation is complete. This only triggers 2 reflow when hidden and displayed.

5. Cache to variables when you need to frequently take those attribute values that cause the browser to reflow.