顯示：flex; vs calc（）;性能

我今天想到了一個討論，在這個討論中，我想知道兩個div彼此相鄰的最高效的方式。顯示：flex; vs calc（）;性能

一方面，我喜歡使用display:flex;，另一方面有使用calc()的選項，原因是我們的div有填充，我們需要通過填充來減小寬度。案例：

<div class='container'> 
<div class='inner'></div> 
<div class='inner'></div> 
</div>

兩者都應該在50％的寬度。默認的CSS是：

* { 
-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */ 
-moz-box-sizing: border-box; /* Firefox, other Gecko */ 
box-sizing: border-box;   /* Opera/IE 8+ */ 
} 
.container { 
height: 100%; 
width: 100%; 
} 
.inner { 
width: 50%; 
padding: 20px; 
}

的display:flex;的辦法是補充：

.container { 
display: -webkit-box; 
display: -moz-box; 
display: -ms-flexbox; 
display: -webkit-flex; 
display: flex; 
flex-wrap: nowrap; 
align-items: stretch; 
align-content: stretch; 
}

的calc()方法是：

.inner { 
width: calc(100% - 40px); 
display: inline-block; 
}

或：

.inner { 
width: calc(100% - 40px); 
float: left; 
}

我做不想要任何表l ayout在我的CSS。此外，我們不需要照顧瀏覽器版本，這應該只在最新版本中才有效。

建議使用什麼？什麼有更多的表現？

我已經找到一篇文章，表現已經提高了很多。 Link

來源

2014-11-14 Michael Schneider

這也是我的用例，一個同事不喜歡這個顯示類型，所以我們討論了。此外，我從來沒有注意到任何性能問題，這就是爲什麼我想知道什麼是現在通常更快。 – 2014-11-14 14:08:22

我不知道任何直接的測試結果，但'display：flex'在我的經驗中表現更好 – 2014-11-14 14:16:31

我跑了一個簡單的測試，出於好奇，有不似乎是渲染比FF和Chrome都慢得多float+calc VS flex之間在性能上的任何差異，IE以外。

從related article：

新Flexbox的代碼有很多少多通道佈局codepaths。儘管（例如 flex-align：stretch通常是2遍），但您仍然可以很容易地點擊多遍代碼路徑。一般來說，在一般情況下，它應該快得多，但是你可以構建一個同樣緩慢的情況。

這就是說，如果你能擺脫它，常規塊佈局（非浮動），通常會比新flexbox一樣快或更快，因爲它始終是單通道。但新的Flexbox應該比使用表或編寫自定義的基於JS的佈局代碼更快。

我敢肯定，calc()使得塊佈局需要多次通過太:)

LE：有a bug in Firefox這使迴流很慢，當你有4-5嵌套flexboxes，但它已在最新版本（37+）中修復。

來源

2014-11-14 17:23:14

性能真的是個問題嗎？即使速度較慢，誰（除開發人員）真的在玩他們的窗口大小？ – twicejr 2015-09-21 15:23:30

@twicejr - 在一個例子中，性能非常關鍵，因爲您可以創建分屏，並且可以將排水溝左右滑動，並且可能需要使用calc/flex來調整每側的面板。 – Blake 2016-11-18 14:34:49

讓它成爲。讓人們從IE瀏覽器移動過來）我懷疑它真的會引人注意。 – twicejr 2016-11-21 13:10:10

顯示：flex; vs calc（）;性能

回答

相關問題