Minimizing Browser Reflow — Archive

Locally archived May 15, 2026 so the content survives if the original host goes offline. View original

Author: Lindsey Simon, UX Developer Originally published on: Google Search Central / PageSpeed Insights documentation Recommended knowledge: Basic HTML, basic JavaScript, working knowledge of CSS

Overview

Reflow is the browser's process of recalculating element positions and geometries in order to re-render part or all of a document. Because reflow blocks the user, developers benefit from understanding how to improve reflow time and how factors like DOM depth, CSS rule efficiency, and different types of style changes affect it. Reflowing one element can sometimes require reflowing its parent elements and any elements that follow it.

What triggers reflow

Many user actions and DHTML changes can trigger reflow, including:

Resizing the browser window
JavaScript methods involving computed styles
Adding or removing DOM elements
Changing an element's classes

Some operations cause more reflow than expected — a diagram from Steve Souders' Even Faster Web Sites talk illustrates this well. Not every style change in JavaScript triggers reflow in every browser, and reflow durations vary across engines, though modern browsers continue to improve.

Key points

Reflow is a user-blocking operation that can significantly impact perceived performance.
Various actions — resizing, DOM manipulation via JS — can trigger reflow, with varying costs.
Developers can minimize reflow by reducing DOM depth, optimizing CSS, using absolute or fixed positioning for complex changes, and avoiding expensive selectors.
Browsers continue to improve, but mitigating reflow remains important.

At Google, page and application speed is tested in multiple ways, and reflow is a key consideration when adding UI features, with the goal of delivering lively, interactive, and delightful user experiences.

Guidelines

Simple ways to minimize reflow:

Reduce unnecessary DOM depth. Changes at one level of the DOM tree can cascade upward to the root and downward into children of the modified node, increasing reflow time.
Minimize CSS rules, and remove unused CSS rules.
Perform complex rendering changes (like animations) out of the flow — use position: absolute or position: fixed.
Avoid unnecessarily complex CSS selectors — especially descendant selectors — since they require more CPU for selector matching.

Additional resources

Opera, Repaints and Reflows
Satoshi Ueyama's debug-Firefox reflow demos (google.co.jp, mozilla.org, ja.wikipedia.org)
Nicole Sullivan on reflows and repaints

Originally licensed under Creative Commons Attribution 4.0; code samples under Apache 2.0.