flex布局对性能的影响主要体现在哪方面？
7 个回答
Flexbox布局对页面性能的影响主要体现在哪些方面。要深入的了解这个问题，那么就有必要先了解浏览器工作原理。简单的上两张图：
上图是Chrome的渲染过程。
上图是Firefox的渲染过程。
有关于这方面的详细介绍，建议阅读：
有一个经典的前端面试题：当你在浏览器中输入google.com并且按下回车之后发生了什么？ 这个面试题或许能帮助了解一些其他的细节： skyline75489/what-happens-when-zh_CN
了解了这些方面的知识，你应该对Web页面的渲染对性能的影响关键因素在哪。那么回到我们的问题中来。对于CSS属性而言，Flexbox包含了很多个属性，那么这些属性都有可能会造成页面的重排或者重绘。具体会有哪些属性会造成重排或者重绘，可以在这个网站上查到对应的属性：
把有关于Flexbox相关的属性我单独的扣出来：
对号入座一下。然后再补一下 重绘和重排相关的知识。我想你应该能找到你想要到答案了。
本来觉得：这个问题都引来了 @大漠 了，我这种 CSS 水平“半瓶子醋” 的初级选手就没必要再赘言露怯。可是大佬可能太忙，或者太懒，贴了不少链接，看的不是太畅快；正好我也有一些不太一样的看法，说出来求大神斧正也好。
按照知乎惯例：先问“是不是”，再问“为什么”。可是问题中却没有“flex 布局对性能影响的线索或资料”，那么就有必要先思考一下 flex 布局对性能到底有什么影响，或者有多大影响。
1）首先性能问题一定是一个相对概念，flex 布局相比正常的 block layout（non-float）性能开销一定更大。事实上，block layout 永远都是 single-pass，而 flex 布局却总会激发 multi-pass codepaths。比如常用的 flex-align: stretch 通常都是 2-pass，这是无可争议且难以避免的短板，天生基因决定。但是我们还是要完成复杂的布局，往往传统手段并不能解决问题。好吧，再继续往下看。
2）其次性能问题一定依然还是一个相对概念。如今站点布局对于“响应式”，“各种复杂场景下居中或者居边”需求非常高。那么在此基础上，flex 布局相比 table 布局，栅格化 grid 布局，在性能开销上有一定优势，至少不会太吃亏。
那就来做个对比呀，display: table VS display: flex！
我们重复 1000 次这样的 DOM：
<div class="wrap">
<div class="cell description">Item Description</div>
<div class="cell add">Add</div>
<div class="cell remove">Remove</div>
</div>并分别使用 flex 和 table 布局，并采用 Navigation Timing API 进行布局速度测量。代码如下：
<script type="text/javascript">
;(function TimeThisMother() {
window.onload = function(){
setTimeout(function(){
var t = performance.timing;
alert("Speed of selection is: " + (t.loadEventEnd - t.responseEnd) + " milliseconds");
}, 0);
};
})();
</script>
(感兴趣的同学，可以找我要完整对比代码)
得到，
- flex 布局：Speed of selection is: 248 milliseconds；
- table 布局：Speed of selection is: 282 milliseconds；
flex 布局要更快。
3）任何性能问题谈理论没任何意义，抛开 rules 不再多说，我们直接上 codes, 用 tools：
Chris Coyier 实现了这样一个 flex 布局生成器。
注意右上角的滑动条，越向右滑，页面不同颜色区块越多（截图上滚动条已经很短了， 证明页面已经很长，布局区块很多），在如此大规模全面使用 flex 布局下，页面丝毫没有任何卡顿。
如上图，打开 Chrome Dev Tools > Timeline，点击“record” 按钮，滑动滑块并停止。我们得到瀑布流紫色部分，显示性能效果良好。
当然这样的“模拟”距离真实场景也许较远，不排除如果页面中存在很多图片就会使得性能开销激增，可能使用 flex 某些属性也会付出昂贵的代价。但是一般场景使用，我认为没有必要去担心 flex 布局性能问题，至少他比别的方案靠谱（先不论兼容性）。
同学们可以去 codepen 进行体验：
3）最后，需要格外提出的是：新版 flex 布局一般比旧版布局模型更快，同样也比基于浮动的布局模型更快。
这里来特殊对比一下 flex 布局和浮动布局在性能上的表现 ：
下图显示了在 1,300 个框上使用浮动的布局开销。
我们更新此示例以使用 flex，则出现不同的情况：
明显，对于相同数量的元素和相同的视觉外观，flex 布局的时间要少得多（本例中为分别 3.5 毫秒和 14 毫秒）。对比来源：developers.google.com
最后，布局性能的开销，一般直接考虑因素如下：
- 需要布局的元素数量；
- 布局的复杂性。
相对地，对于布局性能建议主要有：
- 应尽可能避免触发布局（layout／reflow）；
- 避免强制同步布局和布局抖动；
这些面就更大了，不再详细展开。有兴趣的同学欢迎讨论。