يجب أن تعمل الرسوم المتحركة بشكل جيد، وإلا ستؤثر سلبًا على تجربة المستخدم.
حافظ على معدّل 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، ما يؤدي إلى عرض السؤال بدون تدخُّل.