كيف تحافظ على أداء عرض 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 في كل إطار (تقطع)؛ 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` فقط على العناصر على وشك الحركة — الإفراط في استخدامها يهدر الذاكرة من خلال إنشاء طبقات كثيرة جداً.

## تجنب layout thrashing في JS

```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 وتجعل الصفحات تشعر بسرعة.