Jak udržujete CSS rendering výkonný (reflow vs repaint)?

Question

Accepted Answer

Prohlížeč převádí CSS změny na pixely prostřednictvím pipeline a různé změny spouštějí různé (více či méně nákladné) fáze:

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

- **Layout / reflow** — přepočítávání geometrie (pozice/velikosti). **Nejdražší** — změna jednoho prvku může vynucovat přepočítávání mnoha dalších.
- **Paint / repaint** — vyplňování pixelů (barvy, text, stíny). Levnější než layout.
- **Composite** — kombinování již namalovaných vrstev (GPU). **Nejlevnější**.

## Které vlastnosti spouští co

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

Toto je jediné nejdůležitější pravidlo výkonu: **animujte `transform` a `opacity`, ne `width`/`top`/`margin`.** Animace layout vlastností znovu spouští layout na každém snímku (jank); transforms jsou skládány GPU (hladké 60fps).

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

## Napovídejte prohlížeči pomocí will-change (zřídka)

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

Verejné `will-change` používejte pouze na prvcích, které se chystají animovat — nadměrné používání plýtvá pamětí vytvářením příliš mnoha vrstev.

## Vyhněte se layout thrashing v 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");
```

## Další výhry

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

## Proč to má smysl

Výkon renderování se jedná především o *nespouštění layout opakovaně*.

Vědět, že `transform`/`opacity` jsou compose-only (levné), zatímco `width`/`top`/`margin` vynucují reflow (drahé) — plus vyhnutí se layout thrashing a používání `contain`/`content-visibility` — je to, co udržuje animace na 60fps a dělá stránky rychlými.