In order to re-render part or entire page, the process of recalculating page element locations and geometries is called reflow. Since reflow is a user-blocking operation in a browser, it is very necessary for developers to understand how to reduce the number of reflows and the impact of different document attributes (dom depth, css efficiency, and no type of style changes) on the number of reflows. Sometimes a single element in the reflow page will reflow its parent element and all child elements.
There are multiple user actions and dhtml changes that may trigger reflow. Resize the browser window, use javascript to calculate styles, create delete elements in the dom, and change the element's class will trigger reflow. It is worth noting that some operations will trigger reflow multiple times, beyond your imagination. The following picture comes from Steve Souders' speech even faster web sites:
It is obvious from the above table that not all JavaScript-controlled styles trigger reflow in all browsers, even if the number of triggers is triggered is different. At the same time, it can be seen that modern browsers are doing better and better in controlling the number of reflows.
At Google, we measure our pages and web applications in many ways, and reflow is a key factor we consider when adding ui. We are committed to conveying lively, interactive and delightful user experiences.
in principleHere are some principles for reducing reflow:
In the video below (Translation's note: quoted from youtube, cannot be viewed, please go to the original text to browse the wall), lindsey introduces some ways to reduce reflow.
Further reading