Repaint vs Reflow: Understanding Browser Rendering Performance

By Rahul — Google Frontend Engineer

What is Reflow (Layout)?

Reflow calculates the position and size of every element. It is expensive because changing one element can affect its siblings, children, and parents. Also called "layout" in Chrome DevTools.

What Triggers Reflow

What is Repaint?

Repaint updates visual properties without changing layout. Cheaper than reflow.

The Composite-Only Properties

Layout Thrashing (The Performance Killer)

Use requestAnimationFrame

Best Practices

• Animate transform and opacity only — they skip layout and paint
• Batch DOM reads and writes — never interleave them
• Use will-change: transform to promote elements to their own layer
• Use CSS contain: layout to isolate reflow scope
• Use Chrome DevTools Performance tab to identify forced reflows

Summary

Reflow recalculates layout (expensive). Repaint updates visual properties (moderate). Transform/opacity skip both (cheap). Avoid layout thrashing by batching reads and writes. Use transform for animations.