显示：flex; vs calc（）;性能 [英] display: flex; vs calc(); performance
问题描述
我今天在一次讨论中上来，我想知道将两个div并排放置的最有效方式是什么。
I came up today in a discussion where I'm wondering what is the most performant way of having two div's beside each other.
一方面，我喜欢使用 display：flex; ，另一方面，可以选择使用 calc（），原因是我们的div有填充，我们需要通过填充来减小宽度。情况：
On one side, i love using display:flex;, on the other side there is the option to use calc(), the reason is our div has padding and we need to reduce the width by the padding. Case:
<div class='container'>
<div class='inner'></div>
<div class='inner'></div>
</div>
两者的宽度均应为50％。默认的CSS是：
Both should be on 50% width. The default css is:
* {
-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;
}
我不想在CSS中使用任何表格布局。
此外，我们不需要照顾浏览器的版本，它应该始终只在最新版本中起作用。
I do not want any table layout in my css. Additionally, we do not need to take care of the browser versions, this should be only functional in the latest versions, always.
建议使用什么用？还有什么性能更高？
What would be recommended to use? What has more performance?
我已经发现一篇文章，它已经提高了很多性能。 链接
I already found an article that the performance has been increased already a lot. Link
推荐答案
出于好奇，我进行了一个简单的测试， float + calc 与 flex 与IE渲染均不同比FF和Chrome慢得多。
I ran a simple test out of curiosity and there don't seem to be any differences in performance between float+calc vs flex, other than IE rendering both much slower than FF and Chrome.
从相关文章：
新的flexbox代码的多次遍历布局要少得多代码路径。不过，您
仍然可以很轻松地命中多遍代码路径（例如
flex-align：Stretch通常为2遍）。通常，在一般情况下，它的速度应该快
，但是您可以构造一个情况，即
的速度同样慢。
The new flexbox code has a lot fewer multi-pass layout codepaths. You can still hit multi-pass codepaths pretty easily though (e.g. flex-align: stretch is often 2-pass). In general, it should be much faster in the common case, but you can construct a case where it’s equally as slow.
，如果可以解决的话，常规的块布局
（非浮动）通常会比新的flexbox快或快，因为
始终是单遍的。但是新的flexbox应该比使用
表或编写自定义的基于JS的布局代码更快。
That said, if you can get away with it, regular block layout (non-float), will usually be as fast or faster than new flexbox since it’s always single-pass. But new flexbox should be faster than using tables or writing custom JS-base layout code.
我很确定 calc（）使得块布局也需要多次通过：）
I'm pretty sure that calc() makes a block layout require multiple passes too :)
LE：有 Firefox中的错误使重排非常缓慢。您有4-5个嵌套的flexbox，但在最新版本（37+）中已得到修复。
LE: There was a bug in Firefox that made reflows very slow when you had 4-5 nested flexboxes, but it was fixed in the latest versions (37+).
这篇关于显示：flex; vs calc（）;性能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
