显示：弯曲；与计算（）；表现

Posted 2023-03-07

【中文标题】显示：弯曲；与计算（）；表现

【英文标题】：display: flex; vs calc(); performance

【发布时间】：2015-01-11 22:48:16

【问题描述】：

我今天在一次讨论中出现，我想知道将两个 div 并排放置的最高效的方式是什么。

一方面，我喜欢使用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;

我不想在我的 CSS 中使用任何表格布局。 此外，我们不需要处理浏览器版本，这应该始终只在最新版本中起作用。

推荐使用什么？什么性能更好？

我已经找到一篇文章，性能已经提高了很多。 Link

【问题讨论】：

这也是我的用例，同事不喜欢这种显示类型，所以我们讨论了。另外我从未注意到任何性能问题，这就是为什么我想知道现在通常更快的原因。

我不知道任何直接的测试结果，但在我的经验中display: flex 表现更好

【参考方案1】：

出于好奇，我进行了一个简单的测试，float+calc 与 flex 之间的性能似乎没有任何差异，除了 IE 渲染都比 FF 和 Chrome 慢得多。

来自related article：

新的 flexbox 代码具有更少的多通道布局代码路径。你 尽管如此，仍然可以很容易地命中多遍代码路径（例如 flex-align：拉伸通常是 2-pass）。一般来说应该很多 在常见情况下更快，但您可以构建一个案例 同样慢。

也就是说，如果你能侥幸逃脱，常规的块布局 （非浮动），通常会比新的 flexbox 快或快，因为 它总是单程的。但是新的 flexbox 应该比使用更快 表格或编写基于 JS 的自定义布局代码。

我很确定 calc() 使块布局也需要多次传递 :)

---

LE：a bug in Firefox 在您有 4-5 个嵌套的 flexbox 时使重排非常慢，但在最新版本 (37+) 中已修复。

【讨论】：

性能真的是个问题吗？即使速度较慢，谁（开发人员除外）真正玩弄他们的窗口大小？

@twicejr - 在一个示例中，性能至关重要，您正在创建能够左右滑动排水沟的分屏，并且可能希望使用 calc/flex 来调整每一侧的面板。

顺其自然。让人们从 IE 移过来；）我怀疑它真的会引起注意。