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

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

Paul Lewis

Sam Thorogood

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

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

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

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

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

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

استخدِم الرمز 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، ما يجعل السؤال غير ذي صلة.