يمكن للمتصفحات الحديثة تحريك خاصيتَي CSS بتكلفة منخفضة، وهما transform وopacity.
إذا حرّكت أي شيء آخر، من المحتمل ألا تتمكّن من تحقيق 60 لقطة سلسة في الثانية.
توضّح هذه المشاركة السبب وراء ذلك.
أداء الصور المتحركة وعدد اللقطات في الثانية
من المقبول على نطاق واسع أنّ عدد اللقطات المستهدَف في الثانية هو 60 لقطة عند تحريك أي عنصر على الويب. سيضمن معدّل عرض اللقطات هذا أن تبدو الصور المتحركة سلسة. على الويب، اللقطة هي الوقت الذي يستغرقه تنفيذ جميع المهام المطلوبة لتعديل الشاشة وإعادة رسمها. إذا لم يتم إكمال كل إطار خلال 16.7 ملي ثانية (1000 ملي ثانية / 60 ≈ 16.7)، سيشعر المستخدمون بالتأخير.
مسار العرض
لعرض محتوى على صفحة ويب، على المتصفّح اتّباع الخطوات المتسلسلة التالية:
- النمط: لحساب الأنماط التي تنطبق على العناصر
- التصميم: لإنشاء الشكل والموضع لكل عنصر
- الرسم: املأ وحدات البكسل لكل عنصر.
- التركيب: يتم فصل العناصر إلى طبقات ورسم الطبقات على الشاشة.
تُعرف هذه الخطوات الأربع باسم مسار العرض في المتصفّح.
عند تحريك عنصر على صفحة تم تحميلها من قبل، يجب تكرار هذه الخطوات. تبدأ هذه العملية من الخطوة التي يجب تغييرها للسماح بحدوث الحركة.
كما ذكرنا سابقًا، هذه الخطوات متسلسلة. على سبيل المثال، إذا حرّكت عنصرًا يغيّر التخطيط، يجب تنفيذ خطوتَي الطلاء والتركيب مرة أخرى. لذلك، فإنّ تحريك عنصر يغيّر التنسيق يكون أكثر تكلفة من تحريك عنصر يغيّر التكوين فقط.
إضافة حركة إلى خصائص التصميم
تتضمّن تغييرات التنسيق احتساب الأشكال الهندسية (الموضع والحجم) لجميع العناصر المتأثّرة بالتغيير.
في حال تغيير أحد العناصر، قد تحتاج إلى إعادة احتساب هندسة العناصر الأخرى.
على سبيل المثال، إذا غيّرت عرض العنصر <html>، قد يتأثّر أي من العناصر الفرعية.
بسبب طريقة تجاوز العناصر وتأثيرها في بعضها البعض، يمكن أن تؤدي التغييرات في أسفل الشجرة أحيانًا إلى احتساب التنسيق وصولاً إلى الأعلى.
وكلما كان حجم شجرة العناصر المرئية أكبر، استغرقت عمليات احتساب التنسيق وقتًا أطول.
تحريك خصائص الطلاء
الرسم هو عملية تحديد ترتيب رسم العناصر على الشاشة. وغالبًا ما تكون هذه المهمة هي الأطول مدةً بين جميع المهام في مسار التنفيذ.
يتم تنفيذ معظم عمليات الرسم في المتصفحات الحديثة باستخدام برامج تحويل الصور النقطية. استنادًا إلى طريقة تجميع العناصر في تطبيقك ضمن طبقات، قد تحتاج أيضًا إلى رسم عناصر أخرى غير العنصر الذي تم تغييره.
تحريك الخصائص المركّبة
التركيب هو عملية تقسيم الصفحة إلى طبقات، وتحويل المعلومات المتعلقة بشكل الصفحة إلى وحدات بكسل (تحويل إلى صورة نقطية)، ودمج الطبقات معًا لإنشاء صفحة (تركيب).
لهذا السبب، تم تضمين السمة opacity في قائمة العناصر التي يسهل تحريكها.
طالما أنّ هذا العنصر يقع في طبقته الخاصة، يمكن لوحدة معالجة الرسومات التعامل مع التغييرات التي تطرأ عليه أثناء خطوة التركيب.
تنشئ المتصفّحات المستندة إلى Chromium وWebKit طبقة جديدة لأي عنصر يتضمّن انتقال CSS أو صورة متحركة على opacity.
ما هي الطبقة؟
من خلال وضع العناصر التي سيتم تحريكها أو نقلها إلى طبقة جديدة، لن يحتاج المتصفّح إلا إلى إعادة طلاء هذه العناصر وليس كل العناصر الأخرى. قد تكون على دراية بمفهوم الطبقة في Photoshop التي تحتوي على مجموعة من العناصر التي يمكن نقلها معًا. تتشابه طبقات العرض في المتصفّح مع هذه الفكرة.
على الرغم من أنّ المتصفّح يؤدي مهمة جيدة في اتخاذ قرارات بشأن العناصر التي يجب أن تكون في طبقة جديدة، إذا فاته أحدها، هناك طرق لفرض إنشاء طبقة. يمكنك الاطّلاع على معلومات حول ذلك في مقالة كيفية إنشاء صور متحركة عالية الأداء. ومع ذلك، يجب إنشاء طبقات جديدة بعناية لأنّ كل طبقة تستخدم الذاكرة. على الأجهزة التي تتضمّن ذاكرة محدودة، قد يؤدي إنشاء طبقات جديدة إلى حدوث مشكلة في الأداء أكبر من المشكلة التي تحاول حلّها. بالإضافة إلى ذلك، يجب تحميل مواد العرض لكل طبقة إلى وحدة معالجة الرسومات. لذلك، من المحتمل أن تواجه قيودًا على معدل نقل البيانات بين وحدة المعالجة المركزية ووحدة معالجة الرسومات.
أداء CSS مقارنةً بأداء JavaScript
قد تتساءل: هل من الأفضل استخدام CSS أو JavaScript للرسوم المتحركة من منظور الأداء؟
يتم عادةً التعامل مع الحركات المستندة إلى CSS وWeb Animations (في المتصفحات التي تتوافق مع واجهة برمجة التطبيقات) على سلسلة محادثات تُعرف باسم سلسلة محادثات برنامج التجميع. يختلف ذلك عن السلسلة الرئيسية للمتصفّح، حيث يتم تنفيذ التنسيق والتصميم والرسم وJavaScript. وهذا يعني أنّه إذا كان المتصفّح ينفّذ بعض المهام المكلفة على سلسلة التعليمات الرئيسية، يمكن أن تستمر هذه الرسوم المتحركة بدون انقطاع.
كما هو موضّح في هذه المقالة، يمكن أيضًا في كثير من الحالات أن يتعامل مؤلف الصور مع التغييرات الأخرى في عمليات التحويل والشفافية.
إذا كان أي رسم متحرّك يؤدي إلى تشغيل عملية الرسم أو التخطيط أو كليهما، ستكون سلسلة التعليمات الرئيسية مطلوبة لتنفيذ العمل. وينطبق ذلك على كلّ من الرسوم المتحركة CSS وJavaScript، ومن المرجّح أن تتجاوز تكلفة التنسيق أو الطلاء أي عمل مرتبط بتنفيذ CSS أو JavaScript، ما يجعل السؤال بلا جدوى.