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