Kako održavate performantno CSS renderiranje (reflow vs repaint)?

Question

IT Interview Practice · Accepted Answer

Preglednik pretvara CSS promjene u piksele kroz pipeline, a različite promjene okidavaju različite (više ili manje skupe) faze:

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

- **Layout / reflow** — ponovno izračunavanje geometrije (pozicije/veličine). **Najskupnije** — promjena jednog elementa može prisilititi ponovno izračunavanje mnogih drugih.
- **Paint / repaint** — popunjavanje piksela (boje, tekst, sjene). Jeftinije od layout-a.
- **Composite** — kombiniranje već nacrtanih slojeva (GPU). **Najjeftinije**.

## Koja svojstva okidavaju što

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

Ovo je jedno od najvažnijih pravila performansi: **anirirajte `transform` i `opacity`, ne `width`/`top`/`margin`.** Animiranje svojstava layout-a ponovno pokreće layout na svakom okviru (jank); transformacije se kombiniraju prema GPU-u (glatko 60fps).

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

## Savjetujem preglednik sa will-change (rijetko)

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

Koristite `will-change` samo na elementima koji će biti animirani — prekompliciranje je troši memoriju kreiranjem previše slojeva.

## Izbjegite layout thrashing u JS-u

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

## Ostali dobitci

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

## Zašto je to važno

Performansa renderiranja je uglavnom o *ne okidavanju layout-a više puta*.

Znanje da su `transform`/`opacity` composite-only (jeftini), dok `width`/`top`/`margin` prisiljava reflow (skupo) — plus izbjegavanje layout thrashing-a i korištenje `contain`/`content-visibility` — to je što čuva animacije na 60fps i čini stranice brzima.

Koja svojstva okidavaju što

Savjetujem preglednik sa will-change (rijetko)

Izbjegite layout thrashing u JS-u

Ostali dobitci

Zašto je to važno

Povezana pitanja