يجب أن تعمل الرسوم المتحركة بشكل جيد، وإلا ستؤثر سلبًا على تجربة المستخدم.
احرِص على التقاط صور متحركة بمعدّل 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 والرسوم المتحركة على الويب إذا كانت متاحة بشكل أصلي، يتم التعامل معها عادةً في سلسلة محادثات تُعرف باسم "سلسلة محادثات المكوّن". ويختلف هذا عن "سلسلة التعليمات الرئيسية" في المتصفّح، حيث يتم تنفيذ النمط والتنسيق والرسم وJavaScript. وهذا يعني أنّه إذا كان المتصفّح يشغّل بعض المهام المكلفة في سلسلة التعليمات الرئيسية، يمكن لهذه الرسوم المتحركة أن تستمر في العمل بدون مقاطعة.
في كثير من الحالات، يمكن التعامل مع التغييرات الأخرى التي تطرأ على عمليات التحويل والتعتيم بواسطة سلسلة التعليمات.
إذا أدّت أي رسوم متحركة إلى عرض محتوى الصفحة أو تطبيق التنسيق أو كليهما، ستكون "سلسلة التعليمات الرئيسية" مطلوبةً للقيام بالعمل. وينطبق هذا على الصور المتحركة التي تعتمد على CSS وJavaScript، ومن المحتمل أن يؤدي الحد الأقصى للتخطيط أو الرسم إلى تصغير أي عمل مرتبط بتنفيذ CSS أو JavaScript، ما يؤدي إلى عرض السؤال.