يمكن للمتصفّحات الحديثة إضافة تأثيرات متحركة إلى خاصيتين من خصائص 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، ما يجعل السؤال غير ذي صلة.