Optimize DOM operations based on how the browser rendering engine works (Reflow/repaint)

1. How the browser's rendering engine works:

(1) Parse HTML, generate DOM tree. Parsing an HTML document, converting HTML tags in a tree or JS-generated tags to a DOM node, which is called the content tree.

(2) Build a rendering tree, parse style, generate style Rules, parse CSS (including external CSS files and style elements, and JS-generated styles), calculate the style of the node according to the CSS selector, create another tree-the rendering tree.

(3) according to (1) and (2) Start the layout of the rendering tree, recursive call from the root node, calculate the size of each element, position, etc., to each node should appear on the screen of the exact coordinates.

(4) Once the layout render tree is finished, the browser will then draw it out, traversing the render tree, and each node will be drawn using the UI backend layer.

is how it works:

2. Redraw and Reflow (Repaint/reflow)

Repaint (Redraw): When repaint changes, the appearance of the element is changed and occurs without changing the layout, such as changing the outline,visibility,background color without affecting the DOM structure rendering.
Reflow (Rendering): The difference with repaint is that he will affect the structure of the DOM rendering, and he will trigger the repaint, he will change himself and all the parent elements (ancestors), this overhead is very expensive, resulting in performance degradation is inevitable, the more page elements more obvious effect.

3. Cause the operation of Reflow/repaint

The cost of Reflow is much higher than the cost of Repaint. Each node in the DOM Tree has a reflow method, and a node's reflow is likely to lead to sub-nodes and even reflow of the parent and sibling nodes. There may be nothing on some high-performance computers, but if reflow occurs on a mobile phone, the process is very painful and draining.
Therefore, the following actions are very likely to be cost-efficient.

(1) When you add, delete, and modify DOM nodes, it causes Reflow or Repaint.
(2) When you move the DOM's position, or make an animation.
(3) When you change the CSS style.
(4) When you Resize the window (the mobile side does not have this problem), or when scrolling.
(5) When you modify the default font for a webpage.
(6) Read some attributes of an element (Offsetleft, OffsetTop, offsetheight, offsetwidth, Scrolltop/left/width/height, clienttop/left/width/ Height, getComputedStyle (), Currentstyle (in IE)

Note: Display:none will trigger Reflow, and Visibility:hidden will only trigger repaint, as no location changes are found.

4. How to Avoid

(1) Avoid a series of continuous operation

Demo1

If you need to create multiple DOM nodes, you can use DocumentFragment to join the document once created
var fragment = Document.createdocumentfragment ();
Fragment.appendchild (document.createTextNode (' Keenboy Test 111 '));
Fragment.appendchild (document.createelement (' BR '));
Fragment.appendchild (document.createTextNode (' Keenboy Test 222 '));
Document.body.appendChild (fragment);

Demo2

Create Document Fragmentation First
var Ofragmeng = document.createdocumentfragment ();
for (Var i=0;i<10000;i++)
{
var op = document.createelement ("span");
var otext = document.createTextNode (i);
Op.appendchild (Otext);
Append to the document fragment first
Ofragmeng.appendchild (OP);
}
Last added to document at once
Document.body.appendChild (Ofragmeng);

(2) First delete the element from the document, complete the modification and then put the element back to its original position

(3) Set the display of the element to "none" and modify the display to the original value after the modification is completed.

(4) Centrally modifying styles

4.1 Modify the attributes on the element style as few as possible
4.2 modify the style as much as possible by modifying the classname
4.3 to set the style value by the Csstext property
element.style.width= "80px";//re Flow
element.style.height= "90px";//reflow
element.style.border= "solid 1px red";//reflow
above produces multiple REFL OW, the more calls are produced, the more
element.style.csstext= "width:80px;height:80px;border:solid 1px red;"; Reflow
4.4 Cache frequently accessed properties
//This is not good
for (big, loop; here) {
El.style.left = el.offsetleft + + "px";
El.style.top = el.offsettop + + "px";
}

That would be better.
var left = El.offsetleft,
top = El.offsettop
Esty = El.style;
for (big; loops; here) {
Left + = 10;
Top + = 10;
Esty.left = left + "px";
Esty.top = top + "px";
}
Multiple use of Left,top also generates a reflow
4.5 Set the position of the element to absolute or fixed
Elements are separated from the standard stream and are also detached from the DOM tree structure, requiring only reflow themselves and subordinate elements when reflow is required
4.6 Try not to use table layout
Once the table element is triggered, reflow causes all other elements in the table to be reflow. Where table is suitable,
You can set Table-layout to auto or fixed so that you can render a row of table rows,
This practice is also to limit the scope of reflow
4.7 Avoid using expression, he will recalculate each call (including loading the page)

Optimize DOM operations based on how the browser rendering engine works (Reflow/repaint)