Redraw and reflow (rearrange)

One, the rendering process of HTML page
1. The browser parses the obtained HTML code into 1 Dom trees, each of which is 1 nodes in the DOM tree, and the root node is our common Document object. The DOM tree contains all the HTML tags, including the Display:none hidden, as well as the elements that JS dynamically adds.
2. Browser to all styles (user-defined CSS and user agents) to resolve the style structure, in the process of parsing will be removed from the browser can not recognize the style, such as IE will remove-moz the beginning of the style, and FF will remove the beginning of the style.
3, Dom tree and the combination of style structure after the construction of the render, render is similar to the DOM, but the difference is very large, render tree can recognize the style, render tree each node has its own style, and render The tree does not contain hidden nodes (such as display:none nodes and head nodes) because they are not used for rendering and do not affect rendering, so they are not included in the render tree. Note that the hidden elements of Visibility:hidden are still included in the render tree because Visibility:hidden affects the layout (layout) and occupies space. According to CSS2 's 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 constructed, the browser can draw the page based on the render tree.
Second, reflow and redraw
1. Some (or all) of the render tree needs to be rebuilt because of changes in size, layout, and concealment of the elements. This is called reflux (reflow). Each page needs to return at least once, when the page is first loaded. In return, the browser will disable the affected part of the render tree and reconstruct this part of the render tree, after which the browser will redraw the affected section to the screen, which becomes redrawn.
2. When some elements in the render tree need to update properties, these attributes only affect the appearance of the element, style, and will not affect the layout, such as Background-color. is called redrawing.
Note: Reflow is bound to cause redrawing, and redrawing does not necessarily cause reflux.
When the backflow occurs:
Reflow is required when page layouts and Geometry properties change. Browser reflow occurs in the following situations:
1, add or delete the visible DOM elements;
2, element position change;
3. Change of element size--margin, padding, border, width and height
4, content changes-such as text changes or picture size changes caused by the calculation of the width and height changes;
5. Initialization of page rendering;
6, browser window size changes--resize event occurs;
Third, optimize (reduce reflow, redraw)
The browser's own optimization strategy: The browser will maintain a queue, all will cause reflow, redrawing the operation into the queue, such as the operation of the queue to a certain number or to a certain time interval, the browser will be flush queue, a batch processing. This will allow multiple reflow, redraw into a reflow redraw. But sometimes some of the code we write may force browsers to flush queues in advance, so the browser's optimizations may not work. When you request a request to the browser for some style information, the browser flush the queue.
Reduce the operation of render tree (merging multiple DOM and style modifications) and reduce requests for style information to make the best of your browser's optimization strategy
Method:
1. Combine actions that change style properties multiple times to one operation.
2. Elements that will require multiple rearrangement, the Position property set to absolute or fixed, so that the element is detached from the document stream, and its changes do not affect other elements. For example, an animated element is best set to absolute positioning.
3. In-memory operation of the node, completed and then added to the document. For example, to get tabular data asynchronously, render to a page. You can build the HTML fragment of the entire table in memory after you get the data, and then add it to the document once, instead of looping through each row.
4. Because an element with the display property of none is not in the render tree, manipulating the hidden element does not raise the rearrangement of other elements. If you want to do a complex operation on an element, you can hide it first, and then display it when the operation is complete. This triggers a 2-second rearrangement only when hidden and displayed.
5. When you need to frequently take the property values that cause the browser to rearrange, cache to the variable.