Javascript Performance Optimization-repaint and reflow

Repaint: When repaint is changed, the appearance of the element is changed and the layout is not changed, such as changing outline, visibility, backgroundcolor, does not affect dom structure rendering. Reflow (rendering), the difference from repaint is that it will affect dom... Synta

Repaint: When repaint is changed, the appearance of the element is changed and the layout is not changed, such as changing outline, visibility, background color, does not affect dom structure rendering.
Reflow (rendering). The difference from repaint is that it will affect the dom structure rendering, and it will trigger repaint, which will change itself and all parent elements (ancestor ), this overhead is very expensive, leading to performance degradation is inevitable. The more page elements, the more obvious the effect.
When:
1. Add, modify (content), and delete (Reflow + Repaint) DOM elements)
2. Only modify the font color of the DOM element (only Repaint is required because the layout does not need to be adjusted)
3. Apply new styles or modify any attributes that affect the appearance of elements.
4. Resize browser window and scroll page
5. read certain attributes of an element (offsetLeft, offsetTop, offsetHeight, offsetWidth, scrollTop/Left/Width/Height, clientTop/Left/Width/Height, getComputedStyle (), currentStyle (in IE ))
How to avoid:
1. Delete the element from the document first. After modification, put the element back to its original position.
2. Set the display of the element to "none". After modification, change the display to the original value.
3. If you need to create multiple DOM nodes, you can use DocumentFragment to add them to the 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 );
4. Modify styles in a centralized manner
4.1 modify as few attributes as possible on the element style.
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 generates multiple reflows, and the more calls, the more
Element.style.css Text = "width: 80px; height: 80px; border: solid 1px red;"; // reflow
4.4 cache Layout attribute values
Var left = elem. offsetLeft; when left is used multiple times, a reflow is generated.
4.5 set the position of an element to absolute or fixed.
Elements are separated from the standard stream and also from the DOM tree structure. When you need reflow, you only need reflow itself and its lower-level elements.
4.6 try not to use table layout
Once the table element triggers reflow, it will cause all other elements in the table to reflow. When using a table, you can set table-layout to auto or fixed to render a table row by row. This is also to limit the impact scope of reflow.
4.7 avoid using expression, which will be re-computed every call (including page loading)

 

 

From keenboy