לפני זמן קצר, ווילסון פייג' כתב מאמר מעולה עבור Smashing יקה ונכתב בו איך הוא הפיח חיים באפליקציית האינטרנט של Financial Times. במאמר, ווילסון מציין:
ככל שהאפליקציה התחילה לגדול, גילינו שהביצועים רק השתפרו.
בילינו כמה שעות בציר הזמן של הכלים למפתחים ב-Chrome ומצאנו את הבעיה: זעזוע, אימה! - זאת הייתה החבר החדש הכי טוב שלנו, Flexbox. ציר הזמן הראה שחלק מהפריסות נמשכו כמעט 100 אלפיות השנייה; העיבוד מחדש של הפריסות ללא Flexbox הפחית זאת ל-10 אלפיות השנייה!
התגובות של ווילסון היו לגבי מכשיר Flexbox המקורי (מדור קודם) שבו נעשה שימוש ב-display: box;. לצערי הם אף פעם לא קיבלו הזדמנות לענות אם ה-Flexbox החדש יותר (display: flex;) היה מהיר יותר, אבל לגבי הטריקים של CSS, כריס קוייה פתח את השאלה הזו.
שאלנו את Ojan Vafai (אוג'אן ואפאי) שכתב חלק גדול מההטמעה ב-WebKit & Blink, על המודל החדש יותר וההטמעה של Flexbox.
בקוד החדש של Flexbox יש הרבה פחות נתיבי קוד לפריסה עם מספר מעברים. עם זאת, עדיין אפשר להגיע לנתיבי קוד של ריבוי מעברים די בקלות (למשל,
flex-align: stretchהוא בדרך כלל שני מעברים). באופן כללי, התהליך אמור להיות מהיר בהרבה במקרה המקובל, אבל אפשר לבנות מקרה שבו תהיה איטית באותה מידה.
ולמרות זאת, אם אפשר לצאת מהתהליך, פריסת בלוקים רגילה (לא צף) תהיה בדרך כלל מהירה או מהירה יותר מה-Flexiblebox החדש, מכיוון שתמיד יש לו מעבר יחיד. אבל ה-Flexbox החדש צריך להיות מהיר יותר משימוש בטבלאות או בכתיבת קוד פריסה מותאם אישית של JS-בסיס.
כדי לראות את ההבדל במספרים, ביצעתי השוואה של התחביר הקודם בין התחביר הישן לתחביר החדש.
נקודת ההשוואה הישנה של הגרסה החדשה של Flexbox
- Flexbox הישן לעומת Flexbox חדש (עם החלופה)
- 500 רכיבים בכל דף
- להעריך את עלות הטעינה של דף כדי לפרוס את הרכיבים
- כממוצע ב-3 הפעלות כל אחת
- שנמדד במחשב. (הנייד יהיה איטי פי 10 בערך)
מכשיר Flexbox ישן: עלויות פריסה של כ-43.5 אלפיות שנייה
פורמט Flexbox חדש: עלויות פריסה של כ-18.2 אלפיות השנייה
סיכום: הגרסה הישנה איטית פי 2.3 מהחדשה.
מה עליך לעשות?
כשמשתמשים ב-Flexbox, תמיד חשוב לחבר את הדברים החדשים: תחביר IE10 של tweener והגרסה ה-גמישה החדשה והמעודכנת שב-Chrome 21 ואילך, Safari 7+ , Firefox 22 ואילך, Opera (&Opera Mobile) 12.1+ , IE 11+ ו-BlackBerry בגרסה 10 ואילך. במקרים רבים אפשר להשתמש ב-Flexbox מדור קודם.
חשוב לזכור: כלים לא כללים
הדבר החשוב יותר הוא לבצע אופטימיזציה של מה שחשוב. תמיד מומלץ להשתמש בציר הזמן כדי לזהות את צווארי הבקבוק לפני שתקדישו זמן לביצוע אופטימיזציה של סוג כלשהו של פעולה.
למעשה, יצרנו קשר עם ווילסון ועם צוות Financial Times Labs, וכתוצאה מכך שיפרנו את הכיסוי של כלי הפיתוח ל-Chrome של כלים לביצועי פריסה. בקרוב נוסיף את היכולת לראות את גבולות הממסר של רכיב, ואירועי 'פריסה' בציר הזמן נטענים עם פרטים על ההיקף, הרמה הבסיסית (root) והעלות של כל פריסה:
