Suggest an edit

Improve this article

Refine the answer for “What are "reflow" and "repaint"?”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

## 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:

1. Recalculate the sizes and positions of elements (the layout tree).
2. Determine which parts of the screen need to be repainted.
3. 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 |

Markdown · drag & drop images · ⌘B / ⌘I shortcuts765 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.