أدت رسوم متحركة CSS صغيرة إلى استهلاك 60% من وحدة المعالجة المركزية و 25% من وحدة معالجة الرسومات على جهاز MacBook M2 الخاص بي
2025-07-23
كانت رسوم متحركة CSS صغيرة تبدو غير مهمة تستهلك بشكل غامض 60% من وحدة المعالجة المركزية و 25% من وحدة معالجة الرسومات على جهاز MacBook M2 الخاص بي. توضح هذه المقالة عملية تصحيح الأخطاء باستخدام أدوات تحديد ملفات تعريف الأداء في Chrome DevTools لتحديد الجاني: وهي عبارة عن رسوم متحركة لخاصية `height`. يشرح الكاتب خط أنابيب عرض المتصفح ويوضح كيفية التبديل إلى خاصية `transform` الأقل تكلفة (باستخدام حل ذكي لتجنب التشوهات المرئية) مما أدى إلى تقليل استهلاك الموارد بشكل كبير إلى أقل من 6% من وحدة المعالجة المركزية و 1% من وحدة معالجة الرسومات.
اقرأ المزيد
التطوير
خط أنابيب العرض