Hvordan holder du CSS-rendering performant (reflow vs repaint)?

Question

Accepted Answer

Browseren konverterer CSS-ændringer til pixels gennem en pipeline, og forskellige ændringer udløser forskellige (mere eller mindre dyre) stadier:

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

- **Layout / reflow** — genberegning af geometri (positioner/størrelser). **Mest dyrt** — ændring af et element kan tvinge genberegning af mange andre.
- **Paint / repaint** — udfyldning af pixels (farver, tekst, skygger). Billigere end layout.
- **Composite** — kombination af allerede malede lag (GPU). **Billigst**.

## Hvilke egenskaber udløser hvad

```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
```

Dette er den eneste vigtigste ydelses regel: **animator `transform` og `opacity`, ikke `width`/`top`/`margin`.** Animation af layout-egenskaber genafvikler layout på hver frame (jank); transforms er sammensat af GPU (glat 60fps).

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

## Hint browseren med will-change (sparsamt)

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

Brug `will-change` kun på elementer, der skal til at animere — overdreven brug spilder hukommelse ved at oprette for mange lag.

## Undgå layout thrashing i 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");
```

## Andre gevinster

```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
```

## Hvorfor det betyder noget

Render-ydelse handler hovedsageligt om *ikke at udløse layout gentagne gange*.

At vide, at `transform`/`opacity` er composite-only (billigt), mens `width`/`top`/`margin` tvinger reflow (dyrt) — plus at undgå layout thrashing og bruge `contain`/`content-visibility` — er hvad der holder animationer på 60fps og får sider til at føles hurtige.