Hogyan tartod meg a CSS-renderelés teljesítményét (reflow vs repaint)?

Question

Accepted Answer

A böngésző CSS-módosításokat pixelekké alakít egy csatornán keresztül, és a különböző módosítások különböző (többé-kevésbé drága) szakaszokat indítanak be:

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

- **Layout / reflow** — geometria újraszámítása (pozíciók/méretek). **Legdrágább** — egy elem megváltoztatása kényszerítheti sok más újraszámítását.
- **Paint / repaint** — pixelek kitöltése (színek, szöveg, árnyékok). Olcsóbb, mint az elrendezés.
- **Composite** — már festett rétegek kombinálása (GPU). **Legolcsóbb**.

## Mely tulajdonságok mit indítanak be

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

Ez az egyetlen legfontosabb teljesítményszabály: **animáld a `transform`-et és az `opacity`-t, ne a `width`/`top`/`margin`-t.** Az elrendezés tulajdonságainak animálása minden képkockán újra futtatja az elrendezést (jank); az átalakítások a GPU által vannak komponálva (sima 60fps).

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

## Javasolj a böngészőnek will-change segítségével (takarékosan)

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

A `will-change`-t csak az animálni készülő elemekhez használd — a túlzott használat túl sok réteg létrehozásával pazarló a memóriát.

## Kerüld az elrendezés thrashing-et a JS-ben

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

## Egyéb győzelmek

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

## Miért fontos ez

A renderelés teljesítménye többnyire az *elrendezésnek a többszöri indítása mellőzéséről* szól.

Annak ismerete, hogy a `transform`/`opacity` csak composite (olcsó), míg a `width`/`top`/`margin` reflow-t kényszerít (drága) — valamint az elrendezés thrashing-ének mellőzése és a `contain`/`content-visibility` használata — ez az, ami 60fps-en tartja az animációkat és gyorsnak érzi az oldalakat.