不久之前，Wilson Page 为 Smashing Magazine 写了一篇精彩文章，深入探讨了他们如何让《金融时报》这个 Web 应用变得生动有趣。在本文中，Wilson 指出：
随着应用规模的扩大，我们发现应用的表现越来越差。
我们花了好几个小时查看 Chrome 开发者工具的时间轴，并找出了问题所在：惊悚、可怕！它是我们的新好友：Flexbox。时间轴显示，某些布局耗时将近 100 毫秒；在不使用 Flexbox 的情况下重新处理布局时，这一时间缩短至 10 毫秒！
Wilson 的评论是关于使用 display: box; 的原始（旧版）Flexbox。遗憾的是，他们从来没有机会回答较新的 Flexbox (display: flex;) 是否更快，但在 CSS Tricks 中，Chris Coyier 提出了这个问题。
我们请 Ojan Vafai 向我们介绍了较新的 Flexbox 模型和实现，他在 WebKit 和 Blink 中编写了很多实现方法。
新的 Flexbox 代码的多遍布局代码路径减少了很多。不过，您仍然可以非常轻松地遇到多遍代码路径（例如，
flex-align: stretch通常是 2 次代码路径）。一般来说，在常见情况下，运行速度应该快得多，但您也可以构建一个同样慢的用例。
即便如此，只要能使用常规块布局（非浮点数），它通常就会比新的 Flexbox 快或快，因为它总是单遍。但是，与使用表格或编写自定义 JS 基本布局代码相比，新的 Flexbox 应该更快。
为了了解数据差异，我对新旧语法进行了对比。
旧版与新版 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 开发者工具在布局性能工具方面的覆盖范围。我们很快就会添加查看元素的重新布局边界的功能，时间轴中的布局事件会加载每个布局的作用域、根和开销的详细信息：
