What Is the Difference Between Reflow and Repaint?
Learn the difference between reflow and repaint, why reflow is costlier, and how to avoid layout thrashing for smoother pages.
Expected Interview Answer
Reflow (also called layout) is the browser recalculating the position and size of elements on the page, while repaint is the browser redrawing pixels for elements whose visual appearance changed without affecting layout — reflow is always more expensive because it can cascade to the whole document, while repaint is cheaper and localized.
The rendering pipeline runs roughly: style calculation, layout (reflow), paint, and composite. Changing a property that affects an element’s geometry — width, height, margin, or adding/removing DOM nodes — forces the browser to recompute the box model for that element and often its ancestors and siblings too, since one element’s size can shift everything around it; this is reflow, and it is comparatively expensive because it can ripple across the whole document tree. Changing a property that only affects how an element looks without changing its box — background-color, visibility, or box-shadow — only requires the browser to repaint those pixels, skipping layout entirely, which is cheaper. Properties like `transform` and `opacity` can often be handled purely by the compositor thread, skipping both layout and paint, which is why animating those two properties is the standard advice for smooth, performant animations. Reading layout properties like `offsetHeight` immediately after writing a style change forces synchronous “layout thrashing,” where the browser must flush pending layout work early, and doing this in a loop is a classic performance bug.
- Understanding the pipeline explains why some CSS properties animate more smoothly than others
- Batching DOM reads and writes avoids forced synchronous layout thrashing
- Animating transform/opacity can skip layout and paint via compositor-only updates
- Knowing the cost hierarchy (reflow > repaint > composite) guides performance debugging
AI Mentor Explanation
Reflow is like the ground staff having to re-measure and reposition the entire pitch markings because the boundary rope moved, which affects where every fielder and marking must now sit. Repaint is like just repainting the crease lines a brighter white without moving anything — the layout of the ground stays identical, only the look changes. Re-measuring the whole ground takes far longer than a quick coat of paint on lines already in place. That full-remeasure-versus-repaint-only-the-surface distinction is exactly reflow versus repaint in a browser.
Step-by-Step Explanation
Step 1
Style calculation
The browser resolves which CSS rules apply to each element after a DOM/style change.
Step 2
Layout (reflow)
Geometry-affecting changes trigger recalculation of size and position, potentially cascading to ancestors/siblings.
Step 3
Paint
The browser rasterizes pixels for elements whose visual appearance changed, using the computed layout.
Step 4
Composite
Layers (e.g., transform/opacity changes) are combined on the GPU without necessarily re-running layout or paint.
What Interviewer Expects
- Clear distinction between geometry-affecting changes (reflow) and visual-only changes (repaint)
- Understanding that reflow can cascade beyond the changed element
- Knowledge that transform/opacity can be compositor-only, skipping layout and paint
- Awareness of layout thrashing from interleaved reads/writes of layout properties
Common Mistakes
- Using the terms reflow and repaint interchangeably
- Not knowing that reading offsetHeight/getBoundingClientRect after a style write can force synchronous layout
- Assuming all CSS property changes cost the same amount
- Forgetting that transform/opacity animations are cheaper because they can skip layout and paint
Best Answer (HR Friendly)
“Reflow is when the browser has to recalculate the size and position of elements on a page, which can affect a lot of other elements around it and is expensive. Repaint is just the browser redrawing how something looks — like a color change — without moving anything, which is much cheaper. Knowing the difference helps explain why some animations feel smoother than others.”
Code Example
// Bad: forces a synchronous reflow on every iteration
boxes.forEach((box) => {
const height = box.offsetHeight // read (forces pending layout to flush)
box.style.height = height + 10 + 'px' // write
})
// Good: batch all reads first, then all writes
const heights = boxes.map((box) => box.offsetHeight) // all reads
boxes.forEach((box, i) => {
box.style.height = heights[i] + 10 + 'px' // all writes
})
// Best for animation: use transform, which can skip layout and paint
box.style.transform = 'translateY(10px)'Follow-up Questions
- What CSS properties are considered compositor-only and why are they cheaper to animate?
- What is layout thrashing and how do you avoid it?
- How does `will-change` interact with the rendering pipeline?
- How would you profile reflow/repaint cost in browser devtools?
MCQ Practice
1. Which change is most likely to trigger a reflow rather than just a repaint?
Width affects the box model and can cascade layout changes to siblings/ancestors, triggering reflow.
2. Why are transform and opacity often recommended for animations?
Transform/opacity changes can be composited on the GPU without triggering layout or paint.
3. What causes “layout thrashing”?
Reading a layout property right after a write forces the browser to flush pending layout early, repeatedly.
Flash Cards
What is reflow? — Recalculating element size/position (layout), which can cascade to other elements.
What is repaint? — Redrawing pixels for a visual-only change, without recalculating layout.
Cheapest rendering path? — Compositor-only updates via transform/opacity, skipping layout and paint.
What causes layout thrashing? — Interleaving layout reads and writes in a loop, forcing repeated synchronous layout.