Kuinka pitää CSS-renderointi tehokkaana (reflow vs repaint)?

Question

Accepted Answer

Selain muuntaa CSS-muutokset pikseleiksi pipeline-putkiston kautta, ja erilaiset muutokset käynnistävät eri (enemmän tai vähemmän kalliita) vaiheita:

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

- **Layout / reflow** — geometrian uudelleenlaskeminen (sijainnit/koot). **Kallein** — yhden elementin muuttaminen voi pakottaa useiden muiden uudelleenlaskemisen.
- **Paint / repaint** — pikselien täyttäminen (värit, teksti, varjot). Halvempi kuin layout.
- **Composite** — jo maalattujen kerrosten yhdistäminen (GPU). **Halvin**.

## Mitkä ominaisuudet laukaisevat mitä

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

Tämä on ainoa tärkein suorituskykyyn liittyvä sääntö: **animoi `transform` ja `opacity`, ei `width`/`top`/`margin`.** Layout-ominaisuuksien animointi suorittaa layoutin uudelleen jokaisessa kehyksessä (jank); transforms koostuu GPU:lla (sileä 60fps).

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

## Neuvo selaimelle will-change:lla (harvoin)

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

Käytä `will-change` vain elementeillä, joita aiotaan animoida — liiallinen käyttö tuhlaa muistia luomalla liian monta kerrosta.

## Vältä layout thrashing JS:ssä

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

## Muut voitot

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

## Miksi sillä on merkitystä

Renderointisuorituskyky käsittelee enimmäkseen *layout:n toistuvaa käynnistymisen välttämistä*.

Tieto siitä, että `transform`/`opacity` ovat vain composite (halvat), kun taas `width`/`top`/`margin` pakottavat reflow:n (kallis) — plus layout thrashing:n välttäminen ja `contain`/`content-visibility`:n käyttö — on se, mikä pitää animaatiot 60fps:ssä ja tekee sivuista nopeita.