Layout recalculations, or “reflows”, happen when we change a layout-related property, such as an element’s width, height, or margin. Reflows can happen accidentally or on purpose.
For instance, you might want to have a feature that switches from a grid view to a list view. In that case, triggering a reflow is essential for functionality.
A less ideal situation might be ads that are added to the page from potentially slow-loading JavaScript. That JavaScript is likely to resize elements with the injected ads, causing a reflow on every page load during a user’s visit. This type of reflow can negatively impact the user experience in several ways, like interrupting a reading flow and delaying other interactions.
When we change a layout-related property, we trigger the pixel pipeline. This is a series of steps that the browser’s rendering engine performs to show the actual changes on the screen.
The pixel pipeline involves several steps:
- Layout (Reflow): The browser recalculates the geometry of elements affected by layout-related property changes. This calculation determines the positioning of elements in the browser window.
- Paint: Following layout recalculations, the browser renders the visual features of each element, like colors, borders, and shadows.
- Composite: The browser then combines the painted layers to produce the final image displayed on the screen.
Reflows can be heavy on the CPU as they involve complex algorithms for processing CSS rules and determining element alignment and constraints within the page’s layout.
The CPU can be seen as the “brain” of the computer, and it’s able to process instructions in a sequence, or a single thread. The issue with reflows arises from a few factors:
- The CPU has to interpret and execute CSS rules to determine the geometry of elements on the page. This can be a heavy operation requiring complex computations and logic assessments.
- The CPU can handle multiple tasks but can only focus on one task at a time. During a reflow, other important operations like user input handling and script execution may be deferred, which can result in delays.
- Since pages are often deeply nested, a single layout change can cause a cascade of recalculations and updates, putting additional burden on the CPU.
- Though more low-level, the CPU must often access and alter memory for computations and updating the render tree and paint. Inefficient memory access might result in cache misses and slower memory retrievals, further slowing down the rendering process.
So, why do reflows negatively affect performance?
Reflows demand substantial CPU resources to run computations and update the render tree. This process reduces overall speed and user experience.
As the CPU can become overwhelmed with these tasks, its ability to handle other tasks like user interaction and script execution decreases, which results in slower rendering and reduced responsiveness.
The inability to handle other tasks can result in noticeable delays, layout shifts, and unresponsive pages, which directly affect how users interact with the site. Such issues are detrimental to user experience and impact key metrics like Cumulative Layout Shift (CLS), one of Google’s Core Web Vitals which are part of your site’s Lighthouse scores as well. CLS can even influence your site’s SEO performance.
Did you know all that? What else do you know about Advanced Web Development? Wanna test yourself? Take Lydia’s Advanced Web Development Quiz. The 10th question is all about the cost of rendering and might be trickier than you think.
Thnx. Great post about reflow & repaint.