আপনি কীভাবে CSS রেন্ডারিং পারফরম্যান্স বজায় রাখেন (reflow বনাম repaint)?

Question

Accepted Answer

ব্রাউজার CSS পরিবর্তনগুলিকে একটি পাইপলাইনের মাধ্যমে পিক্সেলে রূপান্তরিত করে এবং বিভিন্ন পরিবর্তন বিভিন্ন (কম বা বেশি ব্যয়বহুল) পর্যায়গুলি ট্রিগার করে:

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

- **Layout / reflow** — জ্যামিতি পুনরায় গণনা করা (অবস্থান/আকার)। **সবচেয়ে ব্যয়বহুল** — একটি উপাদান পরিবর্তন করা অনেকগুলি অন্যদের পুনরায় গণনা করতে বাধ্য করতে পারে।
- **Paint / repaint** — পিক্সেল পূরণ করা (রং, পাঠ্য, ছায়া)। layout এর চেয়ে সাশ্রয়ী।
- **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
```

এটি একটি একক সবচেয়ে গুরুত্বপূর্ণ পারফরম্যান্স নিয়ম: **`transform` এবং `opacity` অ্যানিমেট করুন, `width`/`top`/`margin` নয়।** layout বৈশিষ্ট্যগুলি অ্যানিমেট করা প্রতিটি ফ্রেমে layout পুনরায় চালায় (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
```

## এটি কেন গুরুত্বপূর্ণ

রেন্ডারিং পারফরম্যান্স মূলত *layout বারবার ট্রিগার না করার* বিষয়ে।

জানা যে `transform`/`opacity` composite-only (সাশ্রয়ী) যখন `width`/`top`/`margin` reflow জোর করে (ব্যয়বহুল) — layout thrashing এড়ানো এবং `contain`/`content-visibility` ব্যবহার করা ছাড়াও — এটি যা অ্যানিমেশনগুলিকে 60fps এ রাখে এবং পৃষ্ঠাগুলিকে দ্রুত অনুভব করায়।