不久前，Wilson Page 为 Smashing Magazine 撰写了一篇精彩的文章，深入探讨了他们如何打造《金融时报》Web 应用。在文章中，Wilson 指出：
随着应用开始发展壮大，我们发现性能越来越差。
我们花了好几个小时在 Chrome 开发者工具的时间轴中查找原因，最终找到了罪魁祸首：那就是我们的新挚友，弹性盒模型。时间轴显示，某些布局需要近 100 毫秒的时间；在不使用 Flexbox 的情况下重新调整布局后，这一时间缩短到了 10 毫秒！
Wilson 的评论涉及使用 display: box; 的原始（旧版）Flexbox。遗憾的是，他们没有机会回答新版 Flexbox (display: flex;) 是否更快的问题，但在 CSS Tricks 上，Chris Coyier 提出了这个问题。
我们向 Ojan Vafai 询问了较新的 Flexbox 模型和实现。Ojan Vafai 负责编写了 WebKit 和 Blink 中的大部分实现。
新版 Flexbox 代码的多遍历布局代码路径要少得多。不过，您仍然可以非常轻松地触及多传递代码路径（例如，
flex-align: stretch通常是两传递）。一般来说，在常见情况下，它应该会快得多，但您可以构造一个速度同样缓慢的用例。
不过，如果可以，常规的块布局（非浮动）通常与新版 Flexbox 一样快或更快，因为它始终是单次传递。不过，新版 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 DevTools 对布局性能工具的覆盖率。我们很快就会添加查看元素的重新布局边界的功能，并且时间轴中的布局事件会加载每个布局的范围、根和开销的详细信息：
