آپ CSS رینڈرنگ کو کارکردگی سے کیسے رکھتے ہیں (reflow بمقابلہ repaint)؟

Question

Accepted Answer

براؤزر CSS تبدیلیوں کو پکسلز میں ایک پائپ لائن کے ذریعے تبدیل کرتا ہے، اور مختلف تبدیلیاں مختلف (کم یا زیادہ مہنگے) مراحل کو متحرک کرتی ہیں:

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

- **Layout / reflow** — جیومیٹری کا دوبارہ حساب کتاب (مقامات/سائز)۔ **سب سے زیادہ مہنگا** — ایک عنصر میں تبدیلی دوسری بہت سی چیزوں کا دوبارہ حساب کتاب کرنے پر مجبور کر سکتی ہے۔
- **Paint / repaint** — پکسلز میں بھرنا (رنگ، متن، سائے)۔ Layout سے سستا۔
- **Composite** — پہلے سے پینٹ شدہ layers کو ملانا (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
```

yہ واحد سب سے اہم کارکردگی کا اصول ہے: **`transform` اور `opacity` کو متحرک کریں، `width`/`top`/`margin` کو نہیں۔** Layout properties کو متحرک کرنا ہر frame پر layout کو دوبارہ چلاتا ہے (jank)؛ transforms کو GPU کے ذریعے composited کیا جاتا ہے (ہموار 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` کو صرف ایسے عناصر پر استعمال کریں جو متحرک ہونے والے ہوں — اسے زیادہ استعمال کرنا بہت سی layers بنا کر میموری ضائع کرتا ہے۔

## 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
```

## یہ کیوں اہم ہے

رینڈرنگ کی کارکردگی زیادہ تر *بار بار layout کو متحرک نہ کرنے* کے بارے میں ہے۔

yہ جاننا کہ `transform`/`opacity` composite-only (سستا) ہیں جبکہ `width`/`top`/`margin` reflow کو مجبور کرتے ہیں (مہنگا) — علاوہ layout thrashing سے بچنے کے اور `contain`/`content-visibility` استعمال کرنے کے — یہی ہے جو animations کو 60fps پر رکھتا ہے اور صفحات کو تیز محسوس کراتا ہے۔