کمی پیش، ویلسون پیج مقاله‌ای عالی برای مجله Smashing نوشت و در آن به بررسی چگونگی زنده کردن اپلیکیشن وب فایننشال تایمز پرداخت. ویلسون در این مقاله خاطرنشان می کند:
همانطور که برنامه شروع به رشد کرد، متوجه شدیم عملکرد بدتر و بدتر می شود.
ما چند ساعت خوبی را در جدول زمانی Chrome Developers Tools گذراندیم و مقصر را پیدا کردیم: شوک، وحشت! - این بهترین دوست جدید ما، فلکس باکس بود. جدول زمانی نشان داد که برخی از طرح‌بندی‌ها نزدیک به 100 میلی‌ثانیه طول می‌کشد. کار مجدد طرح‌بندی‌هایمان بدون فلکس‌باکس، این میزان را به 10 میلی‌ثانیه کاهش داد!
نظرات ویلسون در مورد فلکس باکس اصلی (میراثی) بود که از display: box; . متأسفانه آنها هرگز فرصتی برای پاسخ به اینکه آیا فلکس باکس جدیدتر ( display: flex; ) سریعتر بود، پیدا نکردند، اما در ترفندهای CSS، کریس کویر این سؤال را باز کرد .
ما از اوجان وفایی ، که بسیاری از پیاده‌سازی‌ها را در WebKit & Blink نوشت، درباره مدل جدیدتر فلکس‌باکس و پیاده‌سازی پرسیدیم.
کد فلکس باکس جدید مسیرهای کد طرح چند گذری بسیار کمتری دارد. شما هنوز هم می توانید مسیرهای کد چند گذری را به راحتی انجام دهید (مثلاً
flex-align: stretchاغلب 2 پاس است). به طور کلی، در حالت معمولی باید بسیار سریعتر باشد، اما شما می توانید یک کیس بسازید که به همان اندازه کند باشد.
گفته می شود، اگر بتوانید از آن دور شوید، طرح بندی بلوک های معمولی (غیر شناور)، معمولاً به همان سرعت یا سریعتر از فلکس باکس جدید خواهد بود، زیرا همیشه تک پاس است. اما flexbox جدید باید سریعتر از استفاده از جداول یا نوشتن کد طرح‌بندی مبتنی بر JS باشد.
برای دیدن تفاوت در اعداد، من یک مقایسه سر به سر از نحو قدیمی v جدید انجام دادم.
معیار قدیمی و جدید Flexbox
- فلکس باکس قدیمی در مقابل فلکس باکس جدید (با جایگزینی)
- 500 عنصر در هر صفحه
- ارزیابی هزینه بارگذاری صفحه برای چیدمان عناصر
- به طور میانگین در هر 3 اجرا
- روی دسکتاپ اندازه گیری شد (موبایل 10 برابر کندتر خواهد بود)
فلکس باکس قدیمی: هزینه های طرح ~ 43.5 میلی ثانیه
فلکس باکس جدید: هزینه های چیدمان ~ 18.2 میلی ثانیه
خلاصه: قدیمی 2.3 برابر کندتر از جدید است.
چه کاری باید انجام دهید؟
هنگام استفاده از flexbox، همیشه مطالب جدید را بنویسید : نحو IE10 tweener و flexbox جدید به روز شده در Chrome 21+، Safari 7+، Firefox 22+، Opera (& Opera Mobile) 12.1+، IE 11+ و Blackberry 10. + در بسیاری از موارد می‌توانید برای انتخاب برخی از مرورگرهای قدیمی تلفن همراه ، به flexbox قدیمی بازگشتی انجام دهید .
به یاد داشته باشید: ابزارها، نه قوانین
آنچه مهمتر است بهینه سازی موارد مهم است. همیشه قبل از صرف زمان برای بهینه سازی یک نوع عملیات، از جدول زمانی برای شناسایی تنگناهای خود استفاده کنید.
در واقع، ما با ویلسون و تیم آزمایشگاه‌های فایننشال تایمز ارتباط برقرار کرده‌ایم و در نتیجه، پوشش ابزارهای توسعه‌دهنده کروم از ابزارهای عملکرد چیدمان را بهبود بخشیده‌ایم. ما به زودی توانایی مشاهده مرز تغییر شکل یک عنصر را اضافه خواهیم کرد و رویدادهای Layout در جدول زمانی با جزئیات دامنه، ریشه و هزینه هر طرح بارگذاری می شوند:
