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