不久前，Wilson Page 為Smashing Magazine 撰寫了一篇精彩文章，深入探討他們如何打造 Financial Times 網路應用程式。威爾森在文章中指出：
隨著應用程式開始成長，我們發現效能越來越差。
我們花了好幾個小時研究 Chrome 開發人員工具的時間軸，終於找到罪魁禍首：我們新認識的好朋友：彈性容器。時間軸顯示某些版面配置需要近 100 毫秒的時間；不使用 Flexbox 重新設計版面配置後，這項作業的時間縮短到 10 毫秒！
Wilson 的評論是關於使用 display: box; 的原始 (舊版) flexbox。很遺憾，他們從未有機會回答新版 Flexbox (display: flex;) 是否更快的問題，但在 CSS 秘訣中，Chris Coyier 提出了這個問題。
我們請 Ojan Vafai 說明新版 Flexbox 模型和實作方式，因為他撰寫了 WebKit 和 Blink 的大部分實作內容。
新的 flexbox 程式碼具有較少的多重通行版版面配置程式碼路徑。不過，您還是可以輕鬆觸及多重傳遞程式碼路徑 (例如
flex-align: stretch通常是 2 次傳遞)。一般來說，在常見情況下，這項作業應該會快上許多，但您可以建立同樣緩慢的情況。
不過，如果可以接受，一般區塊版面配置 (非浮動) 通常會比新彈性容器快，或至少一樣快，因為它一律是單次掃描。不過，新版 Flexbox 的速度應該會比使用表格或編寫自訂 JS 架構程式碼還要快。
為了比較數字差異，我將舊版和新版語法進行了直接比較。
舊版與新版 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 以上版本中新更新的 flexbox。在許多情況下，您可以改用舊版 flexbox，以便支援某些較舊的行動瀏覽器。
請記住：工具，而非規則
更重要的是，您必須針對重點進行最佳化調整。請務必先使用時序圖找出瓶頸，再花時間最佳化某種作業。
事實上，我們已與 Wilson 和 Financial Times Labs 團隊聯繫，並因此改善了 Chrome 開發人員工具對版面配置效能工具的涵蓋率。我們很快就會新增查看元素重新配置邊界的功能，並在時間軸中載入版面配置事件，其中包含每個版面配置的範圍、根目錄和成本的詳細資料：
