Performance optimization of JavaScript (repaint and reflow)_Basic knowledge

Copy code The code is as follows:

repaint (repaint), when repaint changes, the element The appearance is changed, and it occurs without changing the layout. For example, changing the outline, visibility, and background color will not affect the rendering of the DOM structure.

reflow (rendering), the difference from repaint is that it will affect the rendering of the dom structure, and at the same time it will trigger repaint, it will change itself and all parent elements (ancestors), this overhead is very expensive, resulting in performance The decline is inevitable, and the more page elements there are, the more obvious the effect will be.

When it happens:
. Addition, modification (content), deletion (Reflow Repaint) of DOM elements
. Only modify the font color of DOM elements (only Repaint, because there is no need to adjust the layout)
. Apply new styles or modify any properties that affect the appearance of the element
. Resize browser windows, scroll pages
. Read certain properties of the element (offsetLeft, offsetTop, offsetHeight, offsetWidth, scrollTop/Left/Width/ Height, clientTop/Left/Width/Height, getComputedStyle(), currentStyle(in IE))

How to avoid:
. Delete the element from the document first, and then put the element back to its original position after completing the modification.
. Set the display of the element to "none", and then modify the display after completing the modification. is the original value
. If you need to create multiple DOM nodes, you can use DocumentFragment to create them and add them to the document at once

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);
. Focus on modifying the style
　4.1 Modify the attributes on the element style as little as possible
　4.2 Try to modify the style by modifying the className
　4.3 Set the style value through the cssText attribute
　element.style.width=”80px”; //reflow
　element.style.height=”90px” ; //reflow
　element.style.border=”solid 1px red”; //reflow
　The above will generate multiple reflows. The more calls are made, the more
element.style.cssText=” width:80px;height:80px;border:solid 1px red;”; //reflow　
　4.4 Caching Layout attribute value
　var left=elem.offsetLeft; Using left multiple times will generate a reflow
　4.5 Set the position of the element to absolute or fixed
The element is separated from the standard flow and also separated from the DOM tree structure. When reflow is needed, only reflow itself and subordinate elements
4.6 Try not to use table layout
table element Once reflow is triggered, it will cause all other elements in the table to reflow. When tables are suitable for use, you can set table-layout to auto or fixed, so that the table can be rendered line by line. This approach is also to limit the scope of influence of reflow
4.7 Avoid using expression, which will be displayed every time it is called. Recalculate again (including loading page)

Reference:

Yahoo! Performance Engineer Nicole Sullivan's latest article "Reflows & Repaints: CSS Performance making your JavaScript slow?"