तपाईले 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
```

यो एकमात्र सबैभन्दा महत्त्वपूर्ण प्रदर्शन नियम हो: **`width`/`top`/`margin` होइन `transform` र `opacity` लाई एनिमेट गर्नुहोस्।** लेआउट गुणहरूलाई एनिमेट गर्दा हरेक फ्रेममा लेआउट पुनः चलाइन्छ (jank); ट्रान्सफर्महरू GPU द्वारा कम्पोजिट गरिन्छन् (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` कम्पोजिट-मात्र (सस्तो) छन् जबकि `width`/`top`/`margin` reflow गर्न बाध्य गर्छन् (महँगो) — साथै लेआउट thrashing बेवास्ता गर्दा र `contain`/`content-visibility` प्रयोग गर्दा — यही हो जसले एनिमेशनहरूलाई 60fps मा राख्छ र पृष्ठहरूलाई द्रुत महसुस गराउछ।