<分区>
我们正在计划对我们的一个元素进行一些重新设计。一个重点是性能。特别是考虑到这一点，我草拟了 2 个不同的 UI 选项，我想知道哪个会花费用户更少的 CPU 功率/运行更流畅？ 带有水平导航组的经典场景，例如
<nav><ul><li>Foo</li><li>Products</li><li>News></li><li>Contact</li></ul></nav>
因此还有一些隐藏的子菜单，比如
<section class="submenu_products">
<h3>some content</h3><p>some content</p>
<ul>
<li>Sub-Product</li>
<li>Sub-Product 1</li>
<li>Sub-Product 2</li>
<li>Sub-Product 3</li>
</ul>
</section>
对于场景 1:
.submenu_products{
z-index:5;
display:none;
position:absolute;
top:20px;
}
我会通过检测悬停在适当的触发器上来展示它，并通过将其悬停到 display:block 来编辑 css；
或场景2:
.submenu_products{
display:none;
height:0;
}
我会通过检测悬停在适当的触发器上来展示它，并通过将其悬停到 height:300px 来编辑 css；过渡:0.5s；
现在我想知道这些解决方案中哪些是最高效的，我如何才能自己检测到这样的问题？
为了显示这两种解决方案，我会使用 jquery 或 vanilla JS，而不是纯 css 解决方案 - 所以问题不是什么是更好的选择，而是两者中的哪一个(或两者中的优化的东西)是性能更好的。
谢谢!
最佳答案
高度为 0 的元素仍将“出现”在文档流中。 display: none 另一方面，不会。我在下面创建了一个这样的例子，希望能解释得更多一些:
https://jsfiddle.net/5rdL3a7x/1/
来自 fiddle 的原始代码:
<div>
<span>Span1</span>
<div style="height:0;"></div>
<span>Span2</span>
</div>
<div>
<span>Span3</span>
<div style="display:none;"></div>
<span>Span4</span>
</div>
<div>
<span>Span5</span>
<div style="visibility:hidden;"></div>
<span>Span6</span>
</div>
前 2 个 span 之间有一个高度为 0 的 div。这将导致 span 出现在不同的行上，因为 div 默认显示是 block ，它将占据其父级的整个宽度。第二个 2 个跨度在它们之间有一个 div，带有 display: none 样式。注意到它们现在如何出现在同一行上了吗？如果你仍然希望元素“占用”空间但不出现，你可以使用visibility: hidden，如上例中的第三组span所示
就性能而言，即使有差异也可以忽略不计。 css 的应用方式会产生更大的影响(例如 [id=menuItem1] 的执行速度会比 #menuItem1 慢)，但同样，这并不是什么重要的事情。
关于jquery - 是否显示 :none perform better then height:0?，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/31519309/