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