आप 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 द्वारा composite होते हैं (smooth 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 में लेआउट thrashing से बचें

```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 को बाध्य करते हैं (महंगे) — साथ ही layout thrashing से बचना और `contain`/`content-visibility` का उपयोग करना — यही है जो एनिमेशन को 60fps पर रखता है और पेज तेज़ महसूस होते हैं।