الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم
تعلّم أي الخصائص تُسرَّع بواسطة GPU وأيها يفعّل عمليات إعادة رسم مكلفة للتخطيط
الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم درس مجاني في CSS Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في CSS Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة CSS Academy 4 دروس في المجموع.
مسار التصيير
يُصيّر المتصفح المحتوى في ثلاث مراحل: التخطيط (الحجم والموضع) ← الرسم (البكسلات) ← التركيب (دمج طبقات GPU). ويكون تحريك الخصائص التي تستدعي مراحل مبكرة مكلفًا.
الخصائص التي تستدعي التخطيط
يؤدي تغيير هذه الخصائص إلى إجبار المتصفح على إعادة حساب التخطيط لصفحة كاملة محتملة. تجنب تحريكها:
width،heightmargin،paddingtop،leftfont-sizedisplay
الخصائص التي تستدعي الرسم
تتجاوز هذه الخصائص مرحلة التخطيط، لكنها تعيد رسم البكسلات. وتكون مكلفة بدرجة متوسطة:
background-colorcolorbox-shadowborder
الخصائص التي تقتصر على التركيب
تتجاوز هذه الخصائص مرحلتي التخطيط والرسم معًا، إذ لا يحتاج المتصفح إلا إلى تركيب الطبقات التي سبق تحويلها إلى نقطيات. وهي رخيصة جدًا وتستفيد من تسريع GPU:
transformopacity
القاعدة الذهبية للرسوم المتحركة في CSS
للحصول على رسوم متحركة سلسة بمعدل 60 إطارًا في الثانية، حرّك فقط transform وopacity. استخدم transform: translate() بدلًا من top/left، واستخدم opacity بدلًا من تلاشي display.
<div class="box demo-active">Box</div>خاصية will-change
تخبر will-change المتصفح بترقية عنصر إلى طبقة GPU خاصة به قبل بدء الحركة، مما يمنع حدوث «وميض الترقية» في منتصف الحركة.
<div class="animated">Animated</div>will-change: auto
عيّن will-change: auto أو أزل الخاصية تمامًا بعد انتهاء الرسوم المتحركة. فالإبقاء على عدد كبير جدًا من العناصر في طبقات مستقلة يهدر ذاكرة GPU.
القياس باستخدام DevTools
استخدم علامة التبويب Performance في Chrome DevTools لتسجيل توقيت الإطارات وفحصه. ويمكن لعلامة التبويب Rendering تفعيل وميض الرسم، وهو تراكب أخضر يوضح العناصر التي يعاد رسمها في كل إطار.
transform بدلًا من top/left
أكثر التحسينات تأثيرًا هو استبدال تحريكات الموضع باستخدام transform:
<div class="fly demo-active">Fly</div>تكلفة انتقال الألوان
تؤدي انتقالات لون الخلفية إلى إعادة الرسم، لكنها لا تستدعي التخطيط. وهي مقبولة للعناصر الصغيرة. أما للخلفيات الكبيرة، ففكر في استخدام عنصر زائف مع انتقال opacity بدلًا منها:
<button class="btn demo-active">Hover me</button>خاصية contain
توضح خاصية contain للمتصفح أن العنصر والشجرة الفرعية التابعة له مستقلان. وهذا يحد من نطاق إبطال التخطيط، مما يحسن أداء إعادة الرسم.
<div class="widget">Widget</div>تحقق سريع
ما خاصيتا CSS اللتان يمكن تحريكهما في مرحلة التركيب دون استدعاء التخطيط أو الرسم؟
مراجعة
يؤدي تحريك خصائص التخطيط مثل width وtop وmargin إلى عمليات إعادة حساب مكلفة. أما خصائص الرسم مثل color وbackground فهي أقل تكلفة. وتتحرك خاصيتا transform وopacity فقط في مرحلة تركيب GPU دون استدعاء التخطيط أو الرسم. احرص دائمًا على تفضيلهما للحصول على رسوم متحركة سلسة وعالية الأداء.
الأسئلة الشائعة
هل درس «الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم» مجاني؟
نعم — نص درس «الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة CSS Academy، انتقل إلى CoddyKit PRO. تتضمن دورة CSS Academy 4 دروس في المجموع.
ماذا ستتعلم في «الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم»؟
تعلّم أي الخصائص تُسرَّع بواسطة GPU وأيها يفعّل عمليات إعادة رسم مكلفة للتخطيط تتمرن على CSS Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ CSS Academy؟
لا تُشترط خبرة سابقة. CSS Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس CSS Academy هذا؟
نعم. كل درس في CSS Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- مدة خاصية الانتقال وتوقيته
- دوال التمهيد: ease وlinear وcubic-bezier
- إجراء انتقالات لخصائص متعددة
- الأداء: الخصائص القابلة للتحويل مقابل خصائص إعادة الرسم