What are "reflow" and "repaint"?

JavaScriptMiddle~3 min read

1. What reflow and repaint are

When you change the DOM or CSS in a browser, the rendering engine (in Chrome, that's Blink) has to recalculate what the page looks like. This work splits into two stages:

Term	What it does	When it happens
Reflow (layout)	Recalculating element geometry: sizes, positions, spacing, height, width, and so on	When the DOM structure or CSS affecting layout changes
Repaint (paint)	Redrawing visible pixels (colors, background, shadows, borders, and so on) without recalculating geometry	When only the appearance changes, not the size or position

2. How it works under the hood

Reflow -> the browser has to:

Recalculate the sizes and positions of elements (the layout tree).
Determine which parts of the screen need to be repainted.
Trigger Repaint (redrawing).

Repaint -> the browser fills in the changed pixels (paint + composite).

Every reflow almost always triggers a repaint, but not every repaint requires a reflow.

3. Examples of what triggers Reflow

Reflow is triggered by:

changing dimensions (width, height, padding, margin, border, font-size);
adding / removing DOM elements;
changing text;
reading properties that depend on layout (offsetWidth, clientHeight, getComputedStyle);
changing a class that affects positioning or size;
resizing the browser window;
scrolling.

Example:

javascript

element.style.width = '400px'; // Reflow + Repaint

4. Examples of what triggers Repaint

Repaint is triggered by:

changing color (color, background-color);
changing opacity (opacity);
shadows (box-shadow);
outline;
visibility (if the element stays in place).

Example:

javascript

element.style.backgroundColor = 'red'; // Repaint only

5. Why reflow is dangerous for performance

Reflow is one of the most expensive operations in a browser, especially when it affects many elements.

The problem:

The layout tree is connected - changing one element can force the entire document to be recalculated.
Each reflow can take tens of milliseconds, especially with complex layouts.

If they happen in a loop, or frequently, the interface starts to "lag".

6. Common mistakes that cause unnecessary reflow

Mistake	What happens
Changing style properties one at a time	Each one triggers a new reflow
Reading `offsetHeight` right after a style change	The browser is forced to synchronously recalculate the layout
Changing classes inside a loop	Reflow on every iteration
Animating layout-affecting properties (for example, `width`, `top`, `margin`)	The layout is recalculated on every frame
Frequently adding DOM elements	Every insert triggers a recalculation of the tree

7. How to reduce the number of reflows / repaints

Approach	What it does
Batch updates	Change several properties at once (via `classList` or `cssText`)
DocumentFragment	Add DOM elements outside the document, then insert everything at once
Cache computed values	`const height = el.offsetHeight;` before a loop
Avoid clearly layout-affecting styles	Do not animate `width`, `height`, `top`, `left`
Use CSS transform and opacity	GPU-driven animations do not trigger reflow
requestAnimationFrame()	For animations, instead of setInterval
will-change	Tells the browser in advance which properties will change (for optimization)

8. Example of bad code (lots of reflow)

javascript

for (let i = 0; i < 100; i++) {
  const el = document.createElement('div');
  document.body.appendChild(el);        // Reflow every time
  el.style.width = i + 'px';            // Reflow
  console.log(el.offsetHeight);         // Forced reflow
}

Optimized version:

javascript

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const el = document.createElement('div');
  el.style.width = i + 'px';
  fragment.appendChild(el);
}
document.body.appendChild(fragment); // 1 Reflow

9. Relationship with the event loop and FPS

Reflow/Repaint happen during the frame rendering phase, between the event loop's macrotasks and microtasks.

For a smooth animation, you need to fit within 16.6 ms (60 FPS). If layout takes longer, frames get dropped -> "freezes".

10. Quick summary

Term	What it does	Example	Impact
Reflow (layout)	Recalculating geometry and positions	changing `width`, `margin`, adding to the DOM	an expensive operation
Repaint (paint)	Redrawing the appearance	changing `color`, `background`, `opacity`	moderately costly
Composite	Combining layers after paint	`transform`, `opacity`	cheap (GPU)
Goal	Minimize Reflow, animate only `transform` and `opacity`	-	maximum FPS

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.