不久之前，Wilson Page 为《Smashing Magazine》撰写了一篇精彩的文章，深入探讨了他们如何生动展现《金融时报》的 Web 应用。Wilson 在这篇文章中指出：
随着应用开始增长，我们发现性能变得越来越差。
我们花了好几个小时浏览 Chrome 开发者工具的时间轴，发现了问题所在：太惊悚了！— 那就是我们新的好友 Flexbox。时间轴显示，一些布局耗时接近 100 毫秒；如果在不使用 Flexbox 的情况下重新构建布局，这一时间缩短到了 10 毫秒！
Wilson 发表的评论是关于使用 display: box; 的原版（旧版）Flexbox。遗憾的是，如果新的 Flexbox (display: flex;) 速度更快，他们永远没有机会回答。但在介绍 CSS 技巧时，Chris Coyier 提出这个问题。
我们向使用 WebKit 和 Blink 编写大部分实现方案的 Ojan Vafai 询问有关较新的 Flexbox 模型和实现的问题。
新的 Flexbox 代码的多通布局代码路径要少得多。不过，您仍然可以非常轻松地遇到多通路代码路径（例如，
flex-align: stretch通常是 2 次通路）。一般来说，在常见情况下，速度应该快得多，但您可以构建一个情况，让速度同样慢。
也就是说，如果您可以随意使用它，常规块布局（非浮动）通常会比新的 Flexbox 更快或更快，因为它始终是单遍的。但是，新的 Flexbox 应该比使用表格或编写自定义 JS-base 布局代码更快。
为了了解数字上的差异，我对新旧语法进行了对比。
新旧 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。在很多情况下，您可以使用一些旧版移动浏览器来作为旧版移动设备的后备。
切记：工具，而非规则
更重要的是，优化更重要的方面。务必先根据时间表确定您的瓶颈，然后再花时间优化某种操作。
事实上，我们已经与 Wilson 和 Financial Times Labs 团队进行了联系，因此，我们改进了 Chrome 开发者工具对布局性能工具的覆盖率。我们即将添加查看元素重新布局边界的功能，并且系统会加载时间轴中的布局事件，其中包含每个布局的作用域、根和开销的详细信息：
