الرسوم المتحركة والأداء

يجب أن تحقّق الصور المتحركة أداءً جيدًا، وإلا ستؤثّر سلبًا في تجربة المستخدم.

Paul Lewis

Sam Thorogood

يجب الحفاظ على معدل 60 لقطة في الثانية عند إنشاء الصور المتحركة، لأنّ أي معدل أقل سيؤدي إلى حدوث تقطُّع أو توقّف في عرض الصور وسيلاحظه المستخدمون وسيؤثّر سلبًا في تجاربهم.

• احرِص على أن لا تتسبّب الصور المتحركة في مشاكل في الأداء، وتأكّد من معرفة تأثير إضافة صورة متحركة إلى سمة معيّنة في CSS.
• إنّ إضافة تأثيرات متحركة إلى الخصائص التي تغيّر الشكل الهندسي للصفحة (التصميم) أو تؤدي إلى الرسم تتطلّب تكلفة عالية بشكل خاص.
• حاول تغيير عمليات التحويل والشفافية كلما أمكن.
• استخدِم will-change لضمان معرفة المتصفّح لما تريد تحريكه.

إنّ إضافة الحركة إلى المواقع الإلكترونية ليست مجانية، وتكون تكلفة إضافة الحركة إلى بعض المواقع الإلكترونية أقل من غيرها. على سبيل المثال، يؤدي إضافة مؤثرات متحركة إلى width وheight في عنصر إلى تغيير شكله وقد يؤدي إلى تحريك العناصر الأخرى على الصفحة أو تغيير حجمها. تُعرف هذه العملية باسم التنسيق (أو إعادة التدفق في المتصفّحات المستندة إلى Gecko مثل Firefox)، ويمكن أن تكون باهظة التكلفة إذا كانت صفحتك تحتوي على الكثير من العناصر. عند بدء عملية التنسيق، يجب عادةً رسم الصفحة أو جزء منها، ما يتطلّب عادةً تكلفة أعلى من عملية التنسيق نفسها.

يجب تجنُّب إضافة تأثيرات متحركة إلى السمات التي تؤدي إلى بدء التنسيق أو الرسم، كلما أمكن ذلك. في معظم المتصفحات الحديثة، يعني ذلك حصر الرسومات المتحركة بتنسيق opacity أو transform، وكلاهما يمكن للمتصفح تحسينه بشكل كبير، ولا يهمّ ما إذا كان يتم التعامل مع الرسوم المتحركة من خلال JavaScript أو CSS.

اطّلِع على دليل كامل حول إنشاء صور متحركة عالية الأداء.

استخدام السمة will-change

توافق المتصفّح

• 36
• 79
• 36
• 9.1

المصدر

استخدِم الرمز will-change لضمان معرفة المتصفّح أنّك تريد تغيير سمة عنصر معيّن. ويسمح ذلك للمتصفّح بتطبيق التحسينات الأكثر ملاءمةً قبل إجراء التغيير. ومع ذلك، لا تكثر من استخدام will-change لأنّ ذلك قد يتسبب في إهدار المتصفّح للموارد، ما يؤدي بدوره إلى حدوث المزيد من مشاكل الأداء.

كقاعدة عامة، إذا كان من المحتمل أن يتم تشغيل المؤثر المتحرك في الـ 200 ملي ثانية التالية، إما من خلال تفاعل المستخدم أو بسبب حالة تطبيقك، من الأفضل استخدام will-change على العناصر المتحرّكة. في معظم الحالات، يجب تفعيل will-change لأي عنصر في طريقة العرض الحالية لتطبيقك تريد أن تحرِّكه، وذلك لأيّ سمات تخطّط لتغييرها. في ما يتعلّق بنموذج المربّع الذي استخدمناه في الأدلة السابقة، تبدو إضافة will-change للتحويلات والشفافية على النحو التالي:

.box {
  will-change: transform, opacity;
}

والآن، ستُجري المتصفحات المتوافقة مع هذه الميزة، وهي معظم المتصفحات الحديثة حاليًا، التحسينات المناسبة من أجل السماح بتغيير هذه السمات أو إضافة تأثيرات متحركة إليها.

أداء CSS مقارنةً بأداء JavaScript

هناك العديد من الصفحات وسلاسل التعليقات على الويب التي تناقش المزايا النسبية للرسوم المتحرّكة في CSS وJavaScript من منظور الأداء. في ما يلي بعض النقاط التي يجب أخذها في الاعتبار:

• يتم عادةً التعامل مع الرسومات المتحركة المستندة إلى CSS وWeb Animations حيثما تكون متاحة بشكل أصلي في سلسلة مهام تُعرف باسم "سلسلة مهام أداة الدمج". يختلف ذلك عن "الخيط الرئيسي" للمتصفح، حيث يتم تنفيذ التصميم والتنسيق والرسم وJavaScript. وهذا يعني أنّه إذا كان المتصفّح ينفّذ بعض المهام المستهلكة للطاقة في سلسلة المحادثات الرئيسية، يمكن أن تستمر هذه الصور المتحركة بدون انقطاع.

• في العديد من الحالات، يمكن أن يعالج خيط المُركِّب أيضًا التغييرات الأخرى في عمليات التحويل والشفافية.

• إذا تسبّب أيّ تأثير متحرّك في بدء عملية الرسم أو التنسيق أو كليهما، سيُطلب من "سلسلة التعليمات الرئيسية" تنفيذ العمل. وينطبق ذلك على كلّ من الصور المتحرّكة المستندة إلى CSS وJavaScript، ومن المرجّح أن تؤدي النفقات العامة للتخطيط أو الرسم إلى تصغير أيّ عمل مرتبط بتنفيذ CSS أو JavaScript، ما يجعل السؤال غير ذي صلة.