不久前，Wilson Page 撰寫了一篇《Smashing Magazine》的精彩文章，主題是深入探討他們如何讓《金融時報》網頁應用程式上架。文章中提到：
隨著應用程式開始發展，我們發現效能越來越嚴重。
我們在 Chrome 開發人員工具的推出數小時內，發現了問題：令人驚訝的，— 它是我們新認識的朋友 flexbox。時間軸顯示，部分版面配置大約需要 100 毫秒的時間，因此在不採用 Flexbox 的情況下重新調整版面配置，就縮短了 10 毫秒！
Wilson 的意見是關於使用 display: box; 的原始 (舊版) Flexbox。遺憾的是，如果較新的 Flexbox (display: flex;) 速度更快，他們根本沒有機會回答，但在 CSS Tricks 上，Chris Coyier 開啟了這個問題。
我們詢問了 Ojan Vafai，他曾為 WebKit & Blink 撰寫許多實作內容，說明新的 Flexbox 模型和實作方式。
新版 Flexbox 程式碼的多輪版面配置程式碼路徑較少。不過，您仍可很容易地點擊多道程式碼路徑 (例如
flex-align: stretch通常為雙道)。一般情況下，速度應該快上許多，但您可以建立速度相等的客服案件。
也就是說，如果可以從這個位置取出，一般區塊版面配置 (非浮動)，因為一律採用單傳遞，因此速度通常會比新的彈性箱快或更快。但是新的 Flexbox 會比使用資料表或編寫自訂的 JS 基本版面配置程式碼更快。
為了找出數字差異，我已分別為新舊語法做前後比較。
舊版 V Flexbox 基準測試
- 舊款 Flexbox 與全新 Flexbox (含備用選項)
- 每頁 500 個元素
- 計算網頁載入費用來排列所有元素
- 每次 3 次跑步的平均值
- 都是以桌機做為評估依據(行動裝置的速度會減慢約 10 倍)
舊版 Flexbox：版面配置成本約 43.5 毫秒
全新 Flexbox：版面配置成本約 18.2 毫秒
摘要：舊式裝置的比新舊速度慢 2.3 倍。
此時該如何處理這種狀況？
使用 Flexbox 時，務必編寫新內容的 IE10 高音語法，以及適用於 Chrome 21 以上版本、Safari 7 以上版本、Firefox 22 以上版本、Opera (和 Opera Mobile) 12.1 以上版本、IE 11 以上版本和 Blackberry 10 以上版本的行動裝置。在許多情況下，您可以彈性選擇備用的行動裝置。
記住：工具，而非規則
但最重要的是最佳化重要的指標。請一律根據時間軸來確定瓶頸，再花時間針對特定類型的作業進行最佳化。
事實上，我們與 Wilson 和《金融時報》研究室團隊交流，因此改善了 Chrome 開發人員工具的版面配置效能工具涵蓋範圍。我們即將推出新增查看元素重新版面配置邊界的功能，系統也會載入時間軸中的版面配置事件，提供每個版面配置的範圍、根層級和費用詳細資料：
