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); 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 मध्ये layout 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 (स्वस्त) आहेत आणि `width`/`top`/`margin` reflow (महाग) लागू करतात हे जाणून — अधिक layout thrashing टाळून आणि `contain`/`content-visibility` वापरून — हेच आहे जे अ‍ॅनिमेशनांना 60fps वर ठेवते आणि पृष्ठ वेगवान वाटतात.