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

Question

IT Interview Practice · 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 پر رکھتا ہے اور صفحات کو تیز محسوس کراتا ہے۔

کون سی خصوصیات کیا متحرک کرتی ہیں

will-change کے ساتھ براؤزر کو اشارہ کریں (احتیاط سے)

JS میں layout thrashing سے بچیں

دوسری کامیابیاں

یہ کیوں اہم ہے

متعلقہ سوالات