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

Question

Accepted Answer

Nettleseren konverterer CSS-endringer til piksler gjennom en pipeline, og ulike endringer utløser ulike (mer eller mindre dyre) stadier:

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

- **Layout / reflow** — omberegning av geometri (posisjoner/størrelser). **Dyreste** — å endre ett element kan tvinge omberegning av mange andre.
- **Paint / repaint** — å fylle inn piksler (farger, tekst, skygger). Billigere enn layout.
- **Composite** — kombinering av allerede malte lag (GPU). **Billigste**.

## Hvilke egenskaper utløser hva

```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 viktigste ytelsesregelen: **animer `transform` og `opacity`, ikke `width`/`top`/`margin`.** Animering av layout-egenskaper kjører layout på hver ramme (jank); transformasjoner er sammensatt av GPU (glatt 60fps).

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

## Hint nettleseren med will-change (sparsomt)

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

Bruk `will-change` kun på elementer som skal animeres — overbruk sløser minne ved å lage for mange lag.

## Unngå 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 betyr noe

Renderingsytelse handler stort sett om *ikke å utløse layout gjentatte ganger*.

Å vite at `transform`/`opacity` er sammensatt-kun (billig) mens `width`/`top`/`margin` tvinger reflow (dyr) — pluss å unngå layout thrashing og bruke `contain`/`content-visibility` — er det som holder animasjoner ved 60fps og gjør sider føles raske.