Reduce reflow

• Original text: Minimizing browser reflow
• Author: Lindsey Simon
• Translation: ytzong

The process by which the browser recalculates the positions and geometries of page elements in order to re-render part or the entire page is called reflow. Since reflow is a user-blocking operation in the browser, it is important to understand how to reduce the number of reflows and how different document attributes (DOM depth, CSS efficiency, style changes without type) affect the number of reflows. The impact is very necessary for developers. Sometimes an element in a reflow page will reflow its parent element (Annotation: plural here) and all child elements.

There are various user operations and DHTML changes that may trigger reflow. Adjusting the size of the browser window, using javascript to calculate styles ( computed styles ), creating and deleting elements in the DOM, and changing the class of elements will trigger reflow. It is worth noting that some operations will trigger reflow multiple times, beyond your imagination. The following picture is from Steve Souders' speech " Even Faster Web Sites ":

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

At Google, we measure the speed of our pages and web applications in a variety of ways, and reflow is a key factor we consider when adding UI. We strive to deliver a lively, interactive and delightful user experience.

in principle

Here are some principles for reducing reflow:

1. Reduce unnecessary DOM levels (DOM depth). Changing one level in the DOM tree causes changes at all levels, up to the root and down to the children of the changed node. This results in a lot of time being spent executing reflow.
2. Minimize CSS rules and remove unused CSS.
3. If you make complex presentation changes, such as animations, take them out of the document flow. Use absolute positioning or fixed positioning to complete.
4. Avoid unnecessarily complex CSS selectors, especially descendant selectors, as matching selectors will consume more CPU.

In the video below (Annotation: Quoted from YouTube, cannot be viewed, please go to the original text to bypass the wall), Lindsey introduces some methods to reduce reflow.

Further reading

• Mozilla's Notes on HTML reflow
• Opera's Repaints and reflows
• Satoshi Ueyama's debug-Firefox reflow demos:
  • google.co.jp reflow
  • mozilla.org reflow
  • ja.wikipedia.org reflow
• Nicole Sullivan on Reflows and Repaints

Original translation: http://www.99css.com/2009/06/minimizing-browser-reflow.html