Yaya za ke na CSS rendering mai aiki (reflow vs repaint)?

Question

Accepted Answer

Barawon yana canza canjin CSS zuwa pixels ta hanyar tube, da canja canja daban-daban zasu yi halin daban-daban (kastu ko rasanta) matakai:

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

- **Layout / reflow** — sake lissafin jiometri (matsayi/girma). **Mafi tsada** — canja ɗaya na kwan zai iya tilastawa sake lissafin wasu da yawa.
- **Paint / repaint** — cika pixels (launi, rubutu, inuwa). Rasanta fiye da layout.
- **Composite** — haɗa wasu gidaje da aka zana (GPU). **Mafi rasanta**.

## Wane kadarorin ke haɗa abin da

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

Gari ne matsayi mafi mahimman sadarwa: **yi animate `transform` da `opacity`, ba `width`/`top`/`margin`.** Animating layout kadarorin ke sake gudu layout a kowane frame (jank); transforms suna composite ta GPU (mai jiya 60fps).

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

## Tuna barawon tare da will-change (kaɗan)

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

Yi amfani da `will-change` ne akan abubuwa waɗanda za a yi animate - overusing shi bata ajiya ta cikakken ajiya ta hanyar ƙirƙire yawa layers.

## Guje layout thrashing a 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");
```

## Wasu bukatawa

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

## Yaya ya mahimma

Sautin sadarwa ya kasance kusan game da *ba sa yi layout sau da sau*.

Sanin cewa `transform`/`opacity` sune composite-only (rasanta) yayin da `width`/`top`/`margin` suka tilasta reflow (tsada) — tare da guje layout thrashing da amfani da `contain`/`content-visibility` — abin da ke hanyar gizo animations a 60fps da shafuka da ke kamawar da sauri.