What are reflows in browser rendering and why should they be avoided?
“Reflows” also known as Layout recalculations happen when a Layout attribute of an element in the DOM changes hence the browser must recalculate how this change affects the geometry of other elements in the document. This process triggers the Layout step of a web page rendering process on the browser.
To understand the importance of reflows, let us take a look at the browser rendering process (also referred to as the Rendering pipeline).
Rendering Process
1. Parse HTML (DOM)
This is the step at which the Document Object Model (DOM) is created. The DOM is a tree-like structure created by the browser when it receives an HTML document and parses it. The DOM is essentially a representation of the web page’s structure and it includes all the elements and attributes defined in the HTML code.
2. Parse CSS (CSSOM)
At this step, the browser parses all the style rules and generates another tree-like structure, the Cascading Style Sheets Object Model (CSSOM), which is a representation of all the style rules defined in the CSS code.
3. Construct the Render Tree
After the DOM and the CSSOM have been created, the browser combines both of them to create the Render Tree which would be used to construct the layout of all visible elements on the page. The term “visible elements” is important here because elements that are hidden (elements with a style of display: none) would not be present in the render tree. However, elements styled with visibility: hidden are still added to the render tree, although they remain invisible.
4. Layout
At this step, the browser calculates the position and size of each element in the Render Tree. This determines how each element is placed on the screen.
5. Painting
After the layout of each element has been determined, the browser fills in the pixels of the element with color and creates the image of the element to be displayed using the style and layout information from the Render tree.
6. Compositing
At this final step, the browser combines all the elements that have been painted into a single image that would be displayed on the screen. Compositing as a process, can be very performant on most modern browsers because the process is handled by the GPU while all the other processes are done on the CPU.
How can reflows affect performance?
Style attributes can be grouped by the step of the Rendering process they affect
Compositing Attributes: These attributes affect how elements are merged into a final visual output i.e. the compositing step e.g opacity, transform, mix-blend-mode, etc.
Painting Attributes: Changing these attributes only requires the browser to re-fill the pixels of the element without calculating its size or position, thereby triggering the Painting step of the rendering process e.g background-color, color, box-shadow, outline, visibility, etc.
Layout attributes: These attributes determine the position and size of an element thereby when changed, the browser needs to rerun the Layout process e.g width, height, margin, etc.
Reflows retrigger the Layout process which in turn triggers Painting and then compositing. Layout and Painting both happen on the CPU and while most modern computers are Multi-Cored and can handle multiple tasks simultaneously with much greater efficiency and speed, multiple reflows can demand substantial CPU resources to run computations, which could lead to a slower rendering process. This process can degrade the user experience by slowing down page responsiveness.
Reflows can also cause Cumulative Layout Shifts (CLS) which can impact your website's SEO ranking.
How can reflows be avoided?
At times, reflows can’t be avoided or could be necessary, but certain techniques can be used to reduce the amount of reflows that need to be performed.
Using Skeletons instead of Spinners in place of loading content
Skeletons are essentially placeholders that approximate the layout of a webpage while the content is still loading. These placeholders are implemented to match the dimensions and basic structural layout of the content that will eventually be loaded. This stability means that once the actual content loads, it fits into the space already defined by the skeletons, thus minimizing or eliminating the need for reflows. Unlike skeletons, spinners do not match the dimensions of the content to be loaded, needing a full page layout recalculation when the content loads.
Change the size and position of elements using the CSS transform property instead of CSS layout properties
Layout properties directly affect the document's flow, which often necessitates recalculating the layout of a portion of, or sometimes, the entire page which can be computationally expensive. Changes made using the transform property do not affect the layout of other elements; they only affect the transformed element. This means that the browser can skip the Layout process (Reflow) when transform is used, and only a repaint or even just a composite is performed if the element is on its own layer.
Using absolute positioning
Absolutely positioned elements are elements whose layout is defined by the position property set to absolute. Because absolutely positioned elements are removed from the normal document flow, adjusting their size or position does not trigger a reflow of other elements, thus conserving CPU resources.
Reducing DOM depth
When a reflow occurs, the DOM tree nodes above and below the node that was changed will also change (reflow). This means that the deeper the level of the node and the deeper the level of its children nodes, the more work the CPU has to do to handle the reflow process.
What tools can be used to manage reflows?
How do you know reflows are affecting your web page performance or even detect if you have reflows in the first place? There are a few tools that can be used for this;
Chrome DevTools Performance Tab
Within the Chrome DevTool’s tabs, you can find the Performance tab. Within this tab is a utility that can be used to make recordings of your web page activities and highlight which runtime processes it is undergoing and how long they take.
Using the Chrome DevTools Performance tab is a large topic on its own and I would suggest starting with the docs on the Chrome for developers website.
Lighthouse
Lighthouse is an open-source, automated tool developed by Google to help developers improve the quality of their web pages. It provides audits for performance, accessibility, progressive web apps, SEO, and more.
While Lighthouse does not directly measure reflows, you can use it in conjunction with other tools and manual inspection to identify potential reflow issues. For example, having a bad CLS score might indicate problematic reflows that affect user experience.