Wie halten Sie das CSS-Rendering performant (Reflow vs. Repaint)?

Question

Accepted Answer

Der Browser konvertiert CSS-Änderungen durch eine Pipeline in Pixel, und verschiedene Änderungen lösen verschiedene (mehr oder weniger teure) Phasen aus:

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

- **Layout / Reflow** — Neuberechnung der Geometrie (Positionen/Größen). **Am teuersten** — Eine Änderung eines Elements kann die Neuberechnung vieler anderer erzwingen.
- **Paint / Repaint** — Füllen von Pixeln (Farben, Text, Schatten). Günstiger als Layout.
- **Composite** — Kombinieren bereits gemalter Schichten (GPU). **Am günstigsten**.

## Welche Eigenschaften lösen was aus

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

Dies ist die einzige wichtigste Leistungsregel: **Animieren Sie `transform` und `opacity`, nicht `width`/`top`/`margin`.** Das Animieren von Layout-Eigenschaften führt Layout auf jedem Frame erneut aus (Jank); Transforms werden von der GPU zusammengesetzt (sanft 60fps).

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

## Hinweis an den Browser mit will-change (sparsam)

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

Verwenden Sie `will-change` nur auf Elementen, die animiert werden sollen — übermäßige Verwendung verschwendet Speicher durch Erstellen von zu vielen Schichten.

## Layout-Thrashing in JS vermeiden

```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");
```

## Weitere Gewinne

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

## Warum es wichtig ist

Render-Leistung dreht sich hauptsächlich um *keine wiederholten Layout-Auslösungen*.

Zu wissen, dass `transform`/`opacity` Composite-only (günstig) sind, während `width`/`top`/`margin` Reflow erzwingen (teuer) — plus Layout-Thrashing vermeiden und `contain`/`content-visibility` verwenden — ist das, was Animationen bei 60fps hält und Seiten schnell anfühlen lässt.