Hoe houd je CSS-rendering performant (reflow vs repaint)?

Question

IT Interview Practice · Accepted Answer

De browser zet CSS-wijzigingen om in pixels via een pijplijn, en verschillende wijzigingen activeren verschillende (meer of minder dure) fasen:

```text
Style → Layout (reflow) → Paint → Composite
```

- **Layout / reflow** — herberekening van meetkunde (posities/afmetingen). **Meest duur** — het wijzigen van één element kan dwingen vele anderen opnieuw te berekenen.
- **Paint / repaint** — pixels invullen (kleuren, tekst, schaduwen). Goedkoper dan layout.
- **Composite** — reeds geschilderde lagen combineren (GPU). **Goedkoopst**.

## Waarom het belangrijk is

```css
/* ❌ trigger LAYOUT (reflow) — costly, recalculates geometry every frame */
width, height, top, left, margin, padding, font-size

/* ⚠️ trigger PAINT — repaint pixels */
color, background, box-shadow, border-radius

/* ✅ trigger only COMPOSITE — GPU, no layout/paint */
transform, opacity
```

Dit is de enkele meest belangrijke prestatiegeregel: **animeer `transform` en `opacity`, niet `width`/`top`/`margin`.** Het animeren van lay-outeigenschappen voert lay-out op elk frame opnieuw uit (jank); transformaties worden door de GPU samengesteld (soepele 60fps).

```css
/* ❌ janky */ @keyframes a { to { left: 300px; width: 200px; } }
/* ✅ smooth */ @keyframes b { to { transform: translateX(300px) scaleX(2); } }
```

## Hint the browser with will-change (sparingly)

```css
.animated { will-change: transform; } /* promotes to its own GPU layer ahead of time */
```

Gebruik `will-change` alleen op elementen die gaan animeren — overmatig gebruik verspilt geheugen door te veel lagen aan te maken.

## Vermijd layout thrashing in JS

```js
// ❌ read-write-read-write forces multiple synchronous reflows
for (const el of els) { el.style.width = el.offsetWidth + 10 + "px"; }
// ✅ batch reads, then writes
const widths = els.map(el => el.offsetWidth);
els.forEach((el, i) => el.style.width = widths[i] + 10 + "px");
```

## Andere wins

```text
- contain: layout/paint — isolate a subtree so changes don't reflow the whole page
- content-visibility: auto — skip rendering offscreen content
- minimize deep selectors and huge unused stylesheets
```

## Waarom het belangrijk is

Renderingprestaties gaan meestal over *niet herhaaldelijk layout activeren*.

Weten dat `transform`/`opacity` composiet-alleen zijn (goedkoop) terwijl `width`/`top`/`margin` reflow dwingen (duur) — plus het vermijden van layout thrashing en het gebruik van `contain`/`content-visibility` — is wat animaties op 60fps houdt en pagina's snel laat voelen.

Waarom het belangrijk is

Hint the browser with will-change (sparingly)

Vermijd layout thrashing in JS

Andere wins

Waarom het belangrijk is

Gerelateerde vragen