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

مقدمة إلى الرسوم المتحركة على شبكة الإنترنت

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

• الرسوم المتحركة التي تم إنشاؤها باستخدام CSS.
• رسوم متحركة غير محسنة باستخدام JavaScript.
• الرسوم المتحركة المحسنة باستخدام JavaScript مع requestAnimationFrame.

إعداد المشروع

المشروع متاح على GitHub. يمكنك تنزيله وتجربته بسهولة.

استنساخ git https://github.com/TomasDevs/animation-performance-test.git
اختبار أداء الرسوم المتحركة على القرص المضغوط

بمجرد تنزيله، تحقق من المجلدات css-animation، js-animation-optimized، و js-animation-unoptimized.

جرب المشروع على GitHub

قياس الأداء

لقياس الأداء، استخدمت لوحة الأداء الخاصة بـ Chrome DevTools. تم تشغيل كل رسم متحرك لمدة 10 ثوانٍ.

نتائج الأداء والتحليل

الرسوم المتحركة CSS

المصدر: تم الإنشاء بواسطة TomasDevs (2024)

• إجمالي وقت الحظر: 390 مللي ثانية

ملحوظات:
تميل الرسوم المتحركة لـ CSS إلى الأداء بشكل أفضل لأنه يتم إلغاء تحميلها إلى محرك العرض الأصلي للمتصفح، خاصة عند العمل مع خصائص مثل التحويل أو العتامة. تتميز هذه الرسوم المتحركة بكفاءة عالية مع تأثير ضئيل على أوقات البرمجة النصية والعرض.

الأمثل للرسوم المتحركة جافا سكريبت

المصدر: تم الإنشاء بواسطة TomasDevs (2024)

• إجمالي وقت الحظر: 400 مللي ثانية

ملحوظات:
يستخدم إصدار JS المُحسّن requestAnimationFrame ووظيفة موجة جيبية سلسة لإدارة الرسوم المتحركة. على الرغم من أنها تتطلب وقتًا أطول في البرمجة النصية مقارنة برسوم CSS المتحركة، إلا أنها لا تزال تعمل بكفاءة إلى حد ما وتحافظ على انخفاض أوقات العرض والرسم.

الرسوم المتحركة غير المحسنة لجافا سكريبت

المصدر: تم الإنشاء بواسطة TomasDevs (2024)

• إجمالي وقت الحظر: 440 مللي ثانية

ملحوظات:
يستخدم إصدار JS غير المُحسّن حلقة بسيطة دون مراعاة تقدم التوقيت. يؤدي هذا إلى أوقات أطول بكثير في البرمجة النصية والعرض والرسم بسبب الحسابات غير الفعالة لكل إطار من الرسوم المتحركة.

خاتمة

• الرسوم المتحركة CSS هي الأكثر كفاءة بشكل عام للرسوم المتحركة البسيطة. إنهم يستفيدون من تسريع الأجهزة بواسطة المتصفح ويقللون الحمل على الموضوع الرئيسي.
• الرسوم المتحركة المحسنة لجافا سكريبت تأتي في المرتبة الثانية. عندما تحتاج إلى مزيد من التحكم الديناميكي في الرسوم المتحركة، يعد التحسين باستخدام requestAnimationFrame أمرًا ضروريًا لضمان الأداء السلس.
• الرسوم المتحركة غير المحسنة لجافا سكريبت تؤدي الأداء الأسوأ، لأنها تضع ضغطًا غير ضروري على محرك العرض في المتصفح بسبب الحسابات غير الفعالة.

انضم إلى المناقشة

ما هي تجاربك مع تحسين الرسوم المتحركة على الويب؟ هل لديك أي نصائح أو حيل إضافية لتعزيز الأداء؟ اسمحوا لي أن أعرف في التعليقات أدناه!