Kako vzdržuješ CSS renderiranje učinkovito (reflow proti repaint)?

Question

IT Interview Practice · Accepted Answer

Brskalnik CSS spremembe pretvori v piksle prek pipeline-a in različne spremembe sprožijo različne (več ali manj drage) stopnje:

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

- **Layout / reflow** — ponovno izračunavanje geometrije (pozicije/velikosti). **Najbolj drago** — sprememba enega elementa lahko prisili ponovno izračunavanje mnogih drugih.
- **Paint / repaint** — polnjenje pikslov (barve, besedilo, sence). Ceneje kot layout.
- **Composite** — kombiniranje že narisanih slojev (GPU). **Najceneje**.

## Katere lastnosti sprožijo kaj

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

To je pravilo za učinkovitost, ki je najbolj pomembno: **aniriraj `transform` in `opacity`, ne `width`/`top`/`margin`.** Animiranje lastnosti layout-a znova zažene layout na vsakem okvirju (jank); transforms so kopostni z GPU-jem (gladko 60fps).

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

## Namigni brskalniku z will-change (redko)

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

Uporabi `will-change` le na elementih, ki so tik pred animacijo — preuporaba le-tega zapravi pomnilnik z ustvarjanjem premalo slojev.

## Izogni se layout thrashing-u 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");
```

## Drugi dobički

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

## Zakaj je to pomembno

Učinkovitost renderiranja je večinoma o *ne sproženju layout-a večkrat*.

Znanje, da sta `transform`/`opacity` composite-only (poceni), medtem ko `width`/`top`/`margin` silijo reflow (drago) — plus izogibanje layout thrashing-u in uporaba `contain`/`content-visibility` — je ono, kar vzdržuje animacije pri 60fps in robove hitro odzivne.

Katere lastnosti sprožijo kaj

Namigni brskalniku z will-change (redko)

Izogni se layout thrashing-u v JS

Drugi dobički

Zakaj je to pomembno

Povezana vprašanja