તમે CSS રેન્ડરિંગ પ્રવર્તમાન રાખો છો કેવી રીતે (reflow vs repaint)?

Question

Accepted Answer

બ્રાઉজર CSS પરિવર્તનોને પિક્સલમાં પાઇપલાઇન દ્વારા રૂપાંતરિત કરે છે, અને વિવિધ પરિવર્તનો વિવિધ (વધુ કે ઓછો ખર્ચાળ) તબક્કાઓ ટ્રિગર કરે છે:

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

- **Layout / reflow** — ભૂમિતિ પુનઃ ગણતરી (સ્થાનો/કદ). **સૌથી વધુ ખર્ચાળ** — એક તત્વ બદલવો ઘણા અન્યને પુનઃ ગણતરી કરવા માટે ફોર્સ કરી શકે છે.
- **Paint / repaint** — પિક્સલ ભરવું (રંગો, ટેક્સ્ટ, છાયાઓ). લેઆઉટ કરતાં સસ્તું.
- **Composite** — પહેલાથી દોરેલા સ્તરો એકત્રિત કરવું (GPU). **સૌથી સસ્તું**.

## કયા ગુણધર્મો શું ટ્રિગર કરે છે

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

મહત્તમ પ્રવર્તમાન નિયમ : **`transform` અને `opacity` ને એનિમેટ કરો, `width`/`top`/`margin` નહીં.** લેઆઉટ પ્રોપર્ટીઝને એનિમેટ કરવું પ્રત્યેક ફ્રેમ પર લેઆઉટ ફરી ચલાવે છે (jank); transforms GPU દ્વારા કમ્પોઝ થાય છે (부드러운 60fps).

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

## will-change સાથે બ્રાઉજરને સંકેત આપો (બિરદાવણીથી)

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

`will-change` ફક્ત તત્વો પર જે એનિમેટ થવા વિશે છે તેના પર ઉપયોગ કરો — તેનો ઓવર યુજ કરવો ખૂબ સ્તરો બનાવીને મેમોરી બગાડે છે.

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

## અન્ય જીતો

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

## તેનું મહત્વ

રેન્ડરિંગ પ્રવર્તમાન મોટે ભાગે *લેઆઉટને વારંવાર ટ્રિગર ન કરવા* વિશે છે.

જાણવું કે `transform`/`opacity` composite-only (સસ્તા) છે જ્યારે `width`/`top`/`margin` reflow ફોર્સ કરે છે (મહાંગા) — વત્તા લેઆઉટ થ્રેશીંગ અટકાવવા અને `contain`/`content-visibility` ઉપયોગ કરવા — આ જ કંઈ છે જે એનિમેશનોને 60fps પર રાખે છે અને પાનાઓને ઝડપી લાગે છે.