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