The browser renders the HTML page basically divided into four steps:
1. Calculate CSS style
2, build Render Tree
3, Layout positioning coordinates and size
4 , Officially start rendering
So, first, two important concepts are first proposed, one is relfow, one is repaint.
Heavy painting: When our changes in DOM have led to a change in style, that is, the DOM’s CSS style changes, but geometric attributes have not changed, such as only modifying When the color of the DOM, the browser does not need to recalculate the geometric properties of the element, draw a new style directly for the element.
Reflow: When we change the geometric size of the DOM, such as modifying the wide, high or hidden elements of the element, then the browser needs to recalize the elements. Geometric properties; because the geometric properties and locations of the element adjacent elements will be affected. Then reoccup the calculation results, this process is called reflow.
We know that at least it will be rendered when the web is generated. Refreshing and rolling will constantly reload, each rendering must cause reflow + heavy painting, sometimes only redraw.
Reflow inevitably causes redraw, but redraw is not necessarily reflow.
If the retraction and return flow occurred frequently in the setting node, it is largely affected the performance of the page. The cost of reflow is much higher than that, and change the child node in the parent node, which will cause a series of reflows in the parent node.
Commonly causing the attributes and methods
1, add or delete visible DOM elements;
2, Element Size Change, Margin, Padding, Border, Width
3, content change, such as the user enters text in the INPUT box
4, browser window Dimensions – RESize events occur
5, calculate offsetwidth or offsetleft attribute
6, set STYLE Attribute value
Commonly generated attributes and methods
Color, Border-Style, Visibility, Background , Background-Image, Background-position, Background-Repeat, Border-Radius, Box-shadow, outline, outline-color, Outline-style, Outline-Width
How to reduce reflow, redraw
Use transform to replace TOP, use Visibility instead of DISPLAY: NONE, because the former will cause redraw while causing backflow.
Do not use the DOM node as a cyclic variable.
Do not use the table layout, Table is basically reflow.
The faster the animation is realized, the more the number of reflows.
The CSS selector matches the left right left to avoid too much node level.