就在不久前，Wilson Page 寫了一篇有關《瘋狂雜誌》的實用文章，深入探討他們如何將《金融時報》網頁應用程式打造成現實。Wilson 在這篇文章中提到：
隨著應用程式業務拓展，我們發現成效越來越差。
花了幾小時的時間，我們就在 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 基礎版面配置程式碼，新的 Flexbox 應該能帶來更快的速度。
為了看出數字的差異，我預先比較了舊版與舊版語法。
舊版 與 Flexbox 基準測試
- old Flexbox 與全新 Flexbox (含備用方案)
- 每頁 500 個元素
- 評估網頁載入費用
- 每個事件平均有 3 次
- 實際曝光次數(行動速度大約會是 10 倍)
舊版 Flexbox：版面配置成本 約 43.5 毫秒
全新 Flexbox：版面配置成本為 約 18.2 毫秒
摘要：舊版速度比新版慢 2.3 倍。
此時該如何處理這種狀況？
使用 Flexbox 時，請一律撰寫新程式的作者：Chrome 21 以上版本、Safari 7 以上版本、Firefox 22 以上版本、Opera (和 Opera Mobile) 12.1 以上版本、IE 11 以上版本和 Blackberry 10 以上版本。在許多情況下，你可以選擇備用的行動版 Flexbox。
請記住：工具而非規則
更重要的是最佳化目標。花時間將一種作業最佳化之前，請務必使用時間軸找出瓶頸。
事實上，我們已與 Wilson 和 Financial Times Labs 團隊合作，因此改善了 Chrome 開發人員工具的版面配置效能工具涵蓋率。我們即將推出新功能，讓您查看元素的版面配置界線。時間軸中的版面配置事件則會載入每個版面配置範圍、根層級和費用的詳細資料：
