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