谈谈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 flex
重复一千次这样的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.新版 flex 布局一般比旧版布局模型更快，同样也比基于浮动的布局模型更快。
这里来特殊对比一下 flex 布局和浮动布局在性能上的表现 ：
下面显示了1300个框上使用浮动的布局开销

image.png

我们更新此示例以使用 flex，则出现不同的情况：

image.png

明显，对于相同数量的元素和相同的视觉外观，flex 布局的时间要少得多（本例中为分别 3.5 毫秒和 14 毫秒）。

最后，布局性能的开销，一般考虑因素如下：

1. 需要布局的元素数量；
2. 布局的复杂性。

相对地，对于布局性能建议主要有：
应尽可能避免触发布局（layout／reflow）；
避免强制同步布局和布局抖动；

最后在下方留一个Chris Coyier 实现了这样一个 flex 布局生成器。自行打开 Chrome Dev Tools > Timeline，点击“record” 按钮，滑动滑块并停止。查看flex 布局的性能。