CSS రెండারింగ్‌ను పనితీరుతో ఎలా ఉంచుతారు (reflow vs repaint)?

Question

Accepted Answer

విప్రేషకం CSS మార్పులను పైపলైన్ ద్వారా పిక్సెల్‌లుగా మారుస్తుంది మరియు వేర్వేరు మార్పులు వేర్వేరు (ఎక్కువ లేదా తక్కువ ఖరీదైన) దశలను ప్రేరేపిస్తాయి:

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

- **లేఅవుట్ / reflow** — జ్యామితి (స్థానాలు/పరిమాణాలు) తిరిగి లెక్కించడం. **చాలా ఖరీదైన** — ఒక మూలకం మార్పు అనేక ఇతరుల పున: లెక్కింపును బలవంతం చేయవచ్చు.
- **పెయింట్ / repaint** — పిక్సెల్‌లను నింపడం (రంగులు, పాఠ్యం, నీడలు). లేఅవుట్ కంటే చాలా సస్తా.
- **కంపోజిట్** — ఇప్పటికే చిత్రించిన పొరలను (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); రూపాంతరాలు 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 లో లేఅవుట్ 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 ఉంచడం మరియు పేజీలను వేగంగా అనుభూతి కలిగించేది.