ਤੁਸੀਂ 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 ਦੁਆਰਾ ਰਚਨਾਬੱਧ ਹਨ (ਨਿਰਵਿਘ੍ਨ 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 'ਤੇ ਰੱਖਦਾ ਹੈ ਅਤੇ ਪ੃ਸ਼ਠਾਂ ਨੂੰ ਤੇਜ਼ ਮਹਿਸੂਸ ਕਰਾਉਂਦਾ ਹੈ।