CSS Reflow and repaint

In order to re-render parts or entire pages, the process of recalculating page element position and geometry (geometries) is called reflow. Because Reflow is a user intercept (user-blocking) operation in a browser, learn how to reduce the number of reflow, and different document properties (DOM level (DOM depth), CSS efficiency, no type of style change), the number of reflow is necessary for developers. Sometimes an element in a Reflow page reflow its parent element (this is the plural) and all the child elements.

Yahoo! Performance engineer Nicole Sullivan wrote a very well-read Analysis reflow and repaint article, the original address: http://www.stubbornella.org/content/2009/03/27/ Reflows-repaints-css-performance-making-your-javascript-slow/The following is a translation of HV:

Repaint (redraw) occurs when an element's appearance is changed, but without changing the layout, such as changing visibility, outline, and foreground color. "According to Opera, repaint was expensive because the browser must verify the visibility of all other nodes in the DOM tre E. "

When repaint occurs, the browser verifies the visibility property of all other nodes on the DOM tree.

reflow (reflow) is one of the key factors leading to inefficient DOM scripting. Any node on the page that triggers reflow will cause its child nodes and ancestor nodes to be re-rendered. Nicole cited an example:  Reflow,div.error and body will also be re-rendered when p nodes occur, even H5 and OL will be affected.
Nicole summarizes the circumstances under which the reflow will occur:

• Change the size of the window
• Change Text Size
• Add/Remove style sheets
• Changes to the content, such as the user typing in the input box (this will also-_-| |)
• Activates pseudo-class, such as: hover (ie is a sibling node pseudo-class is activated)
• Operation Class Property
• Script Manipulation Dom
• Calculate offsetwidth and Offsetheight
• Set the Style property

Reflow is unavoidable and can only minimize the impact of reflow on performance. Nicole put forward 6 points of advice:

1. Change classes on the element, wish to style (as low in the DOM tree as possible)
Limit the scope of reflow as much as possible. Take the above code example, to change the style of P, class does not add to the div, through the parent element affects the child element is not good. It's best to add it directly to P.

2 Avoid setting multiple inline styles
By setting the Style property to change the node style, each setting will cause a reflow. So it's best to set the class way.

3 Apply animations to elements that is position fixed or absolute
To animate an element, its position property should be set to fixed or absolute, which does not affect the layout of other elements.

4 Trade smoothness
Weigh the smoothness of the speed. For example, the implementation of an animation, in 1 pixels to move the smoothest, but the reflow will be too frequent, the CPU will be fully occupied soon. It would be a lot better if you moved in 3-pixel units.

5 Avoid tables for layout
Another reason for not using the tables layout is that when an element in the tables fires reflow it causes all other elements in the table to reflow. In the case where table is appropriate, you can set Table-layout to auto or fixed so that you can render the table row by line, which is also to limit the scope of reflow.

6 Avoid JavaScript Expressions in the CSS (IE only)
In many cases, reflow is triggered, and if there is expression in the CSS, it is recalculated every time.

There are a variety of user actions and DHTML changes that may trigger reflow. Resize the browser window, use JavaScript to calculate the style (computed styles), create a DELETE element in the DOM, and change the class of the element to trigger reflow. It's worth noting that some operations trigger reflow more than you can imagine. From Steve Souders's speech "even Faster Web Sites":

As can be seen from the table above, not all JavaScript-controlled styles in all browsers trigger reflow, even if the number of triggers triggered is different. At the same time, it can be seen that modern browsers are getting better at controlling reflow times.

At Google, we have a number of ways to speed up our pages and WEB applications, while reflow is a key factor in our increased UI. We are committed to conveying a brisk (lively), interactive (interactive) and enjoyable (delightful) user experience.

Principle

Here are some guidelines for reducing reflow:

1. Reduce the unnecessary DOM hierarchy (DOM depth). Changing the level of the DOM tree causes all levels to change, up to the root, down to the child nodes of the node being changed. This leads to a lot of time spent on executing reflow.
2. Minimize CSS rules and remove unused CSS.
3. If you do complex performance changes, such as animations, let it out of the flow of the document. Complete with absolute positioning or fixed positioning.
4. Avoid unnecessarily complex CSS selectors, especially descendant selectors (descendant selectors), because more CPUs will be consumed in order to match selectors.

CSS Reflow and repaint