قبل قليل، كتب "ويلسون بيدج" مقالة رائعة لمجلة Smashing Magazine تتناول كيفية تحديث تطبيق الويب Financial Times إلى النور. في هذه المقالة، يلاحظ ويلسون ما يلي:
عندما بدأ التطبيق في النمو، وجدنا أن الأداء كان يزداد سوءًا.
لقد أمضينا بضع ساعات في المخطط الزمني لأدوات مطوّري برامج Chrome ووجدنا سبب الخطأ: صدمة، رعب! - لقد كان صديقنا المفضّل الجديد، وهو flexbox. أظهر المخطط الزمني أنّ بعض التنسيقات كانت تقترب من 100 ملي ثانية تقريبًا، وبالتالي أدت إعادة صياغة التنسيقات بدون استخدام flexbox إلى خفض مدة هذه التنسيقات إلى 10 ملّي ثانية.
كانت تعليقات "ويلسون" تتعلّق بالوضع المرن الأصلي (الإصدار القديم) الذي استخدم "display: box;". للأسف، لم تتوفّر لهم فرصة الإجابة عما إذا كان إطار flexbox (display: flex;) الجديد أسرع، ولكن في وضع CSS Tricks، فتح "كريس كوييه" هذا السؤال.
لقد سألنا أوجان فافاي، الذي كتب الكثير من فيديوهات التنفيذ في WebKit وBlink، عن نموذج flexbox وتنفيذه الجديد.
يحتوي رمز flexbox الجديد على عدد أقل بكثير من مسارات الترميز لتخطيط متعدد المسارات. لا يزال بإمكانك الوصول إلى مسارات الترميز ذات المسارات المتعددة بسهولة كبيرة (على سبيل المثال، غالبًا ما يكون
flex-align: stretchمن مرّتَين). بوجه عام، يجب أن يكون الأمر أسرع بكثير في الحالة الشائعة، ولكن يمكنك إنشاء حالة تكون فيها ببطء نفس القدر من البطء.
ومع ذلك، إذا تمكنت من تجاوز هذه الطريقة، سيكون تنسيق الكتلة العادية (غير عائم) سريعًا أو أسرع من إطار flexbox الجديد لأنه دائمًا ما يكون بتمريرة واحدة. ولكن يجب أن يكون تطبيق flexbox الجديد أسرع من استخدام الجداول أو كتابة رمز تصميم JS الأساسي المخصص.
لمعرفة الفرق في الأرقام، قمتُ بإجراء مقارنة مباشرة لبناء جملة v القديم الجديد.
مقياس الأداء القديم مقابل الجديد من Flexbox
- old flexbox مقابل new flexbox (مع احتياطي)
- 500 عنصر في كل صفحة
- لتقييم تكلفة تحميل الصفحة لتحديد العناصر
- بالمتوسط عبر 3 نقاط لكل منها
- قياسها على سطح المكتب. (سيكون أبطأ بمقدار 10 مرات تقريبًا على الجهاز الجوّال)
Flexbox القديمة: تكاليف التنسيق حوالي 43.5 ميلي ثانية
flexbox جديد: تكاليف التنسيق حوالي 18.2 ميلي ثانية
ملخّص: الصفحة القديمة أبطأ بمقدار 2.3 مرّة من الإصدار الجديد.
ما هي الإجراءات التي عليك اتخاذها؟
عند استخدام flexbox، احرص دائمًا على إنشاء العناصر الجديدة: بنية IE10 tweener وflexbox الجديد المحدّث الذي يتوفر في Chrome 21 وSafari 7 و+ وFirefox 22 وOpera (وOpera Mobile) 12.1 و+ وIE 11 والإصدارات الأحدث وBlackberry 10 والإصدارات الأحدث. في كثير من الحالات، يمكنك إجراء احتياطي لاستخدام بعض المتصفحات القديمة على الأجهزة الجوّالة.
تذكير: الأدوات، وليس القواعد
الأهم هو تحسين الأمور المهمة. استخدم دائمًا المخطط الزمني لتحديد المؤثِّرات السلبية قبل قضاء الوقت في تحسين نوع واحد من العمليات.
في الواقع، لقد تواصلنا مع "ويلسون" وفريق Financial Times Labs، ونتيجةً لذلك، تم تحسين تغطية "أدوات مطوري البرامج في Chrome" لأدوات أداء التنسيق. سنضيف قريبًا إمكانية عرض حدود إعادة تنسيق العنصر، ويتم تحميل أحداث التنسيق في المخطط الزمني مع تفاصيل النطاق والجذر وتكلفة كل تنسيق:
