Performance tuning for JavaScript (repaint and reflow) _ Basics

Copy Code code as follows:

Repaint (redraw), the appearance of the element changes when the repaint changes, and occurs without changing the layout, such as changing the outline,visibility,background color without affecting the DOM structure rendering.

Reflow (rendering), and repaint difference is that he will affect the DOM of the structure rendering, and he will trigger the repaint, he will change himself with all the parents of the elements (ancestors), this cost is very expensive, resulting in performance degradation is inevitable, the more the more the page element effect is more obvious.

When to occur:
. Add, modify (content), delete (reflow + Repaint) of DOM elements
. Modify only the font color of the DOM element (only repaint, because you do not need to adjust the layout)
. Apply a new style or modify any properties that affect the appearance of an element
. Resize browser window, scrolling page
. Read some of the attributes of the element (Offsetleft, offsettop, offsetheight, offsetwidth, Scrolltop/left/width/height, clienttop/left/width/ Height, getComputedStyle (), Currentstyle (in IE))

How to avoid:
. First remove the element from the document, complete the modification, and put the element back in place
. Set the display of the element to "none", complete the modification, and then change the display to the original value
. If you need to create multiple DOM nodes, you can use DocumentFragment to create a one-time join document

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);
. To modify a style centrally
4.1 Modify the attributes on the element style as little as possible
4.2 Modify the style as much as possible by modifying classname
4.3 To set the style value by Csstext property
Element.style.width= "80px"; Reflow
Element.style.height= "90px"; Reflow
element.style.border= "Solid 1px red"; Reflow
This produces multiple reflow, and the more calls are generated, the more
element.style.csstext= "Width:80px;height:80px;border:solid 1px red;"; Reflow
4.4 Cached Layout Property value
var left=elem.offsetleft; Use left too many times to produce a reflow
4.5 Set the element's position to absolute or fixed
The element is detached from the standard stream and is detached from the DOM tree structure, requiring only reflow itself and subordinate elements when reflow is needed
4.6 Try not to use table layout
Once the table element triggers the reflow, it causes all the other elements in the table to reflow. When suitable for table, you can set Table-layout to auto or fixed, so that the table can be rendered on one line, which is also to limit the impact of reflow
4.7 Avoid using expression, he will recalculate every call (including loading pages)

Reference:

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