Question

我们正计划对我们的项目进行一些重新设计。一个重点是性能。特别是考虑到这一点，我勾勒出了两个不同的用户界面选项，我想知道哪个用户会降低用户的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;
}

并且我通过检测悬停在适当的触发器上并通过将其悬停在高度来编辑css来显示它：300px;过渡：0.5秒;

现在我想知道哪些解决方案是性能最好的解决方案，我怎么能自己检测出这样的问题呢？

为了显示两种解决方案，我使用jquery或vanilla JS，没有纯粹的css解决方案 - 所以它不是什么是更好的选择而是简单的两个中的哪一个（或者是两个优化的东西是表现更好的。

谢谢！

Answer 1

高度为0的元素仍会出现＆＃39;在文件的流程中。显示：无，另一方面，不会。这方面的一个例子是，我希望能够解释一下，我在下面创建了：

https://jsfiddle.net/5rdL3a7x/1/

来自小提琴的原始代码：

<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个跨度在它们之间有一个div，高度为0.这将导致跨距显示在单独的行上，因为div默认显示为block，这将占用其父级的整个宽度。第二个2跨度在它们之间有一个div，带有display：none style。注意它们现在如何出现在同一条线上？如果您仍然希望该元素能够占据＆＃39;空间但不出现，你可以使用visibility：hidden，如上例中的第三组跨度所示

就性能而言，如果有的话，差别可以忽略不计。如何应用css将产生更大的影响（例如[id = menuItem1]将比＃menuItem1执行速度慢），但同样，它是不具有纪念性的。

Answer 2

要跟踪javascript performance，您可以使用console.time()和console.timeEnd()，如下所示：

// start timer
console.time("SOME_NAME");

// your logic/code here

// end timer
console.timeEnd("SOME_NAME");

结果将在ms

中

支持者：Firebug，Webkit Inspector，Opera Dragonfly和IE11。

显示：none表现得比高度更好：0？

2 个答案: