Forced Reflow

Why It Matters

• Forced reflows block the main thread — nothing else can happen until the layout calculation finishes.
• On mobile devices with limited CPU, even a single forced reflow can cause noticeable frame drops and sluggish scrolling.
• Layout thrashing inside loops is one of the most common causes of "jank" — visible stuttering during scrolling or animation.
• Lighthouse measures total forced reflow time during page load and reports it as a performance diagnostic.

How to Fix It

1. Batch DOM reads and writes. Read all the properties you need first, then make all your changes. Never interleave reads and writes.
2. Use requestAnimationFrame() to defer style writes to the next frame, giving the browser time to batch layout calculations.
3. Avoid reading layout properties inside loops. Cache values like offsetHeight or getBoundingClientRect() before the loop starts.
4. Prefer CSS transforms and opacity for animations — these can be handled by the compositor without triggering layout.
5. Use a DOM batching library like FastDOM to automatically separate read and write phases.

Common Mistakes

• Reading offsetWidth inside a loop that also sets style.width — each iteration forces a full layout recalculation.
• Using getBoundingClientRect() right after adding or removing classes — triggers synchronous layout.
• Animating layout properties like top, left, height, width via JavaScript instead of CSS transforms.
• Third-party scripts and analytics libraries that read layout properties during page load.