JavaScript performance optimizations-repaint and 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), unlike repaint, is that he will affect the structure of the DOM rendering, and he will trigger repaint, he will change himself and all of the parent elements (ancestors), this overhead is very expensive, resulting in performance degradation is inevitable, the more page elements more obvious effect.

When to occur:

1. addition, modification (content), deletion of DOM elements (Reflow + Repaint)
2. Modify only the font color of DOM elements (only repaint, because you do not need to adjust the layout)
3. Apply a new style or modify any attributes that affect the appearance of an element
4. Resize browser window, scrolling page
5. Read some attributes of an element (Offsetleft, OffsetTop, offsetheight, offsetwidth, Scrolltop/left/width/height, clienttop/left/width/ Height, getComputedStyle (), Currentstyle (in IE))

How to avoid:

1. Remove the element from document first, and then return the element to its original position after the modification is complete.
2. Set the display of the element to "none" and modify the display to the original value after the modification is complete.
3. 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);

4. Centrally modifying styles
4.1 Modify the attributes on the element style as little as possible
4.2 Modify the style as much as possible by modifying the ClassName
4.3 Setting style values with the Csstext property
Element.style.width= "80px"; Reflow
Element.style.height= "90px"; Reflow
element.style.border= "Solid 1px red"; Reflow
The above results in multiple reflow, the more calls produced more
element.style.csstext= "Width:80px;height:80px;border:solid 1px red;"; Reflow
4.4 Cache Layout Property values
var left=elem.offsetleft; Use left multiple times to create 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. In the case where table is appropriate, you can set Table-layout to auto or fixed so that the table can be rendered on a line, which is also to limit the scope of reflow
4.7 Avoid using expression, he will recalculate each call (including loading the page)

Reference:

Yahoo! Performance Engineer Nicole Sullivan in the latest article "Reflows & Repaints:css Performance making your JavaScript slow?"

JavaScript performance optimizations-repaint and Reflow

JavaScript performance optimizations-repaint and Reflow