ماذا تختار لتحريك عناصر صفحات الويب؟ جافا سكريبت أو CSS؟ سيضطر هذا السؤال يومًا ما إلى سؤال كل مطور ويب. وربما - وليس مرة واحدة.أنشأ مبرمجو جافا سكريبت العديد من المكتبات للرسوم المتحركة للمتصفح. ويبدو أن الجميع كانوا يميلون إلى استخدام هذه المكتبات كحل جاهز للرسوم المتحركة. لكن دعونا نبطئ. هل هذا صحيح؟ هل يجب تحريك عناصر صفحة الويب باستخدام جافا سكريبت؟ ربما يمكنك الاعتماد على آليات CSS القياسية وبالتالي تحقيق رسوم متحركة عالية الجودة وعالية الأداء؟
بما أنك تقرأ هذا ، يمكنني أن أفترض أنك معتاد على الرسوم المتحركة لجافا سكريبت. لذلك ، أقترح استكشاف موضوع الرسوم المتحركة CSS في مظاهرها المختلفة ، وكذلك - أقترح التحدث عن أداء مثل هذه الرسوم المتحركة.معلومات عامة
تعتمد الرسوم المتحركة في CSS على بعض خصائص العناصر. من بينها ، يمكن ملاحظة ما يلي:- خاصية
position، على وجه الخصوص ، يمكن أن تأخذ القيم absoluteو relative. - الملكية
transform. - الملكية
opacity. - خصائص
left، right، top، bottom.
للبدء ، ألق نظرة على اثنين من المشاريع التجريبية التي تستخدم خصائص CSS المختلفة لتحريك العناصر.هنا مشروع يتم فيه تحريك عنصر بمعرف animateيتم positionتعيين خصائصه إلى قيمة absolute. خصائص العنصر topوقابلة للتغيير left.صفحة المشروع التجريبيأدناه هو الكود الذي ينفذ هذه الرسوم المتحركة.#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
top: 200px;
left: 130px;
}
}
هنا مشروع يتم فيه تنفيذ نفس الحركة باستخدام خاصية CSS transform.يتم تمثيل هذه الرسوم المتحركة بالرمز التالي:#animate {
position: absolute;
top: 100px;
left: 30px;
width: 100px;
height: 100px;
border-radius: 50%;
background: red;
animation: move 3s ease infinite;
}
@keyframes move {
50% {
transform: translate(100px, 100px);
}
}
لنستخدم هذه المشاريع لاستخلاص استنتاجات حول أداء الرسوم المتحركة لـ CSS ، وعن نوع موارد النظام المستخدمة لتنفيذها.إذا نظرت فقط إلى صفحات المشاريع ، يمكنك تحديد ما يتم تنفيذها فيها بنفس الشيء ، وإن كان ذلك باستخدام أساليب مختلفة. ومع ذلك ، إذا قمت بقياس أداء هذه المشاريع باستخدام أدوات مطوري Chrome ، فقد تبين أنها مختلفة.كيف يعرض المتصفح الصفحة؟
قبل الخوض في بحث الأداء ، نحتاج إلى فهم كيفية عرض المتصفح للصفحة ، والإجراءات التي يتخذها في حالة حدوث أي تغييرات على الصفحة.هذا ما تبدو عليه عملية إخراج الصفحة.إخراج الصفحةالنظر في الأحداث التي تنعكس في هذا الشكل.Recalculate Style - حساب الأنماط ليتم تطبيقها على العناصر.Layout - إنشاء تخطيطات للعناصر ووضعها على الصفحة.Paint- تعبئة بكسلات الطبقات التي تم إنشاؤها ، أي - إنشاء صور نقطية لكل طبقة. سيستخدم GPU هذه الصور لعرض الصفحة.Composite Layer- تخطيط الطبقات وعرضها على الشاشة. ستكون النتيجة الصفحة النهائية.
الحدث Composite Layerهو الوقت الذي تتواصل فيه وحدة المعالجة المركزية مع وحدة معالجة الرسومات لإنشاء رسم متحرك. باستخدام خصائص CSS مثل transformو opacity، يمكننا نقل عبء إنشاء الرسوم المتحركة من وحدة المعالجة المركزية إلى وحدة معالجة الرسومات.الرسوم المتحركة وجرافيك
وحدة معالجة الرسوميات (GPU) هي في الأساس كمبيوتر متخصص يستخدم للعمل مع الصور. يمكنه معالجة كميات كبيرة من المعلومات الرسومية بكفاءة.ونتيجة لذلك ، عند وقوع حدث Composite Layer، يتم إنشاء طبقة إضافية. هذه هي الآلية التي يمكنك من خلالها تجنب إعادة عرض العنصر المتحرك وعناصر الواجهة الأخرى.بالنظر إلى الشكل التالي ، قد تعتقد أن العناصر المتحركة موجودة في نفس الطبقة.عناصر الرسوم المتحركة ( الأصلية )ولكن إذا نظرت إلى الطبقات كما لو كانت موجودة في مساحة ثلاثية الأبعاد ، فقد تبين أنه عند تنفيذ الرسوم المتحركة باستخدام خاصية التحويل ، يتم إنشاء طبقة إضافية للدائرة الحمراء. وهذا يجعل من الممكن إخراج رسوم متحركة سلسة عالية الأداء.تم إنشاء طبقة إضافية ( أصلية ) للكائن المتحرك.تحتفظ وحدة معالجة الرسومات بشجرة تجسيد الكائنات في الذاكرة ، ودون إعادة التقديم ، يمكنها وضع الطبقة المقابلة فوق الطبقات الأخرى. في حالة موحية كائن باستخدام خصائصtopوleft، نفس الطبقة، بسبب التغيرات في الخصائص، يتم تقديم مرارا وتكرارا. إذا كنت تأخذ مصلحة في سلوك هذه الخصائص CSS، ثم اتضح أن أعلى و اليسار تؤثر على تخطيط الصفحة، والذي يؤدي إلى الحاجة إلى إعادة تقديم الصفحة وإعادة ترتيب الطبقات.الرسوم المتحركة باستخدام خصائص تترجم واستخدام أعلى وخصائص تركهذا الرقم يسمح لرؤية الفرق الخطير بين الرسوم المتحركة تنفذ باستخدام خصائصtranslateوخصائصtopوleft.في حالة الرسوم المتحركة التي تم إنشاؤها باستخدامtopوleft، يتم تقديم الدائرة في كل موضع حتى تصل إلى الموضع المتطرف. بعد ذلك ، يبدأ في الانتقال إلى وضع البداية.يوضح ما يليPerformanceشريط أدوات مطوري Chrome مع تفاصيل حول عملية الرسوم المتحركة.الرسوم المتحركة باستخدام خاصية الترجمة ( الأصلية )الرسوم المتحركة باستخدام الخصائص العليا واليسرى ( الأصلي )إذا نظرت إلى المعلومات التفصيلية حول المهام الفردية المعروضة في اللوحةPerformance، يمكننا أن نستنتج أنه يتم تنفيذ إجراءات مختلفة في إطار هذه المهام. لذلك ، في حالة الرسوم المتحركة العلوية / اليسرى ، كجزء من المهمة ، يتم إعادة حساب الأنماط ، وترتب الطبقات ، ويتم تحديث شجرة الطبقة ، ويتم إنشاء التخطيط وتقديمه. في حالة ترجمة الرسوم المتحركة ، فإن المهمة الوحيدة التي يحلها GPU هي تحريك الطبقة بدون إخراج أي شيء إلى DOM.ونتيجة لذلك ، بسبب استخدام ميزات GPU القوية ، باستخدام الرسوم المتحركة المترجمة ، يتم تحرير الخيط الرئيسي. هذا يحسن أداء التطبيق. يؤدي استخدام الرسوم المتحركة العلوية / اليسرى إلى تحميل إضافي كبير على الخيط الرئيسي.الحمل على الدفق الرئيسي الذي تم إنشاؤه بواسطة الرسوم المتحركة المترجمة (يسار) والرسوم المتحركة العلوية / اليسرى (يمين) ( الأصل )يوضح الشكل أعلاه الحمل الذي يقع في التيار الرئيسي عند أداء الرسوم المتحركة العلوية / اليسرى. هذا هو نتيجة التغييرات المستمرة التي تحتاج إلى معالجة لأداء مثل هذه الرسوم المتحركة.ملخص
ونتيجة لذلك ، يمكننا أن نستنتج أنه باستخدام الرسوم المتحركة لـ CSS ، يجدر الانتباه إلى موارد النظام المشاركة في تنفيذها. إذا كان ذلك ممكنًا ، يجدر استخدام تلك التي يتم تنفيذها بواسطة GPU.وما نوع الرسوم المتحركة التي تستخدمها في مشاريعك؟