1）首先性能問題一定是一個相對概念畴嘶，flex 布局相比正常的 block layout（non-float）性能開銷一定更大。事實上凝垛，block layout 永遠都是 single-pass懊悯，而 flex 布局卻總會激發(fā) multi-pass codepaths蜓谋。比如常用的 flex-align: stretch 通常都是 2-pass，這是無可爭議且難以避免的短板炭分，天生基因決定桃焕。但是我們還是要完成復雜的布局，往往傳統(tǒng)手段并不能解決問題捧毛。
2）性能問題依然是一個相對概念观堂。各種復雜場景下居中或者居邊的需求非常高。flex 布局相比 table 布局呀忧，柵格化 grid 布局师痕，在性能開銷上有一定優(yōu)勢。
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>
最后得到結(jié)果
flex 布局：Speed of selection is: 248 milliseconds；
table 布局：Speed of selection is: 282 milliseconds泞辐；
flex 布局要更快笔横。
3.新版 flex 布局一般比舊版布局模型更快，同樣也比基于浮動的布局模型更快咐吼。
這里來特殊對比一下 flex 布局和浮動布局在性能上的表現(xiàn) ：
下面顯示了1300個框上使用浮動的布局開銷
我們更新此示例以使用 flex吹缔，則出現(xiàn)不同的情況：
明顯，對于相同數(shù)量的元素和相同的視覺外觀锯茄，flex 布局的時間要少得多（本例中為分別 3.5 毫秒和 14 毫秒）厢塘。
最后，布局性能的開銷肌幽，一般考慮因素如下：
- 需要布局的元素數(shù)量晚碾；
- 布局的復雜性。
相對地牍颈，對于布局性能建議主要有：
應盡可能避免觸發(fā)布局（layout／reflow）；
避免強制同步布局和布局抖動琅关；
最后在下方留一個Chris Coyier 實現(xiàn)了這樣一個 flex 布局生成器煮岁。自行打開 Chrome Dev Tools > Timeline，點擊“record” 按鈕涣易，滑動滑塊并停止画机。查看flex 布局的性能。
