98. أداء CSS: الـ Reflow والـ Repaint والـ Compositing
فهم كيفية معالجة المتصفح لـ CSS هو المفتاح لكتابة كود عالي الأداء وسلس، خاصة في الرسوم المتحركة.
1. الـ Reflow (التخطيط)
الـ Reflow هي عملية المتصفح لحساب حجم وموضع العناصر في الصفحة. هذه هي العملية الأكثر تكلفة من حيث الأداء.
- يحدث بسبب: التغييرات في خصائص نموذج الصندوق (width, height, margin, padding)، تغيير خاصية
display، أو تعديل أحجام الخطوط. - التأثير: تغيير عنصر واحد (مثل إعادة تحجيم عرض الجسم) غالباً ما يفرض إعادة تخطيط لكل عنصر لاحق، مما يبطئ الصفحة.
2. الـ Repaint (الطلاء)
الـ Repaint هي عملية ملء البكسلات بالألوان والحدود والظلال.
- يحدث بسبب: التغييرات في الأنماط المرئية التي لا تؤثر على التخطيط (
color,background-color,visibility). - التأثير: أرخص من الـ reflow ، لكنه لا يزال مكلفاً للعناصر المعقدة.
3. الـ Compositing (التركيب - الأمثل)
الـ Compositing هي العملية الأرخص. فهي تغير فقط موضع العناصر التي تم نقلها إلى طبقتها الخاصة في وحدة معالجة الرسومات (GPU)، متجنبة حسابات وحدة المعالجة المركزية (CPU) للـ reflow والـ repaint.
- يحدث بسبب: التغييرات في الشفافية
opacityوالتحويلاتtransform.
أفضل ممارسة: فضل دائماً تحريك خصائص مثل transform: translate() و opacity على تحريك top/left/margin لضمان بقاء رسومك المتحركة سلسة (60 إطاراً في الثانية).