Cum menții performanța redării CSS (reflow vs repaint)?

Question

IT Interview Practice · Accepted Answer

Browserul convertește modificările CSS în pixeli printr-un pipeline, iar modificări diferite declanșează diferite stadii (mai sau mai puțin scumpe):

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

- **Layout / reflow** — recalcularea geometriei (poziții/dimensiuni). **Cel mai scump** — schimbarea unui element poate forța recalcularea multor altora.
- **Paint / repaint** — umplerea pixelilor (culori, text, umbre). Mai ieftin decât layout.
- **Composite** — combinarea straturilor deja pictate (GPU). **Cel mai ieftin**.

## Care sunt proprietățile care declanșează ce

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

Acesta este singurul cea mai importantă regulă de performanță: **animează `transform` și `opacity`, nu `width`/`top`/`margin`.** Animarea proprietăților layout reîncarcă layout la fiecare cadru (jank); transformările sunt compuse de GPU (lin 60fps).

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

## Sugerează browserului cu will-change (rar)

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

Folosește `will-change` doar pe elementele care sunt pe cale să se animeze — utilizarea excesivă risipește memoria creând prea multe straturi.

## Evită layout thrashing în 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");
```

## Alte câștiguri

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

## De ce contează

Performanța redării este în esență despre *a nu declanșa layout în mod repetat*.

Știind că `transform`/`opacity` sunt doar pentru compozitare (ieftin) în timp ce `width`/`top`/`margin` forțează reflow (scump) — plus evitarea layout thrashing și utilizarea `contain`/`content-visibility` — acesta este ceea ce ține animațiile la 60fps și face ca paginile să funcționeze rapid.

Care sunt proprietățile care declanșează ce

Sugerează browserului cu will-change (rar)

Evită layout thrashing în JS

Alte câștiguri

De ce contează

Întrebări conexe