显示：没有表现好，高度：0？

-1

我们正在计划对我们的项目进行一些重新设计。一个重点是性能。特别是考虑到这一点，我画了2个不同的用户界面选项，我想知道哪个用户会花费更少的CPU功耗/运行更平滑？所以经典场景与水平的导航组像显示：没有表现好，高度：0？

<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; 
}

，我会表现出来通过检测悬停在适当的触发器上并通过悬停来编辑css来显示：block;

或场景2：

.submenu_products{ 
display:none; 
height:0; 
}

，我会与检测的适当触发悬停显示它，并通过盘旋这对高度编辑的CSS：300像素;过渡：0.5秒;

现在我想知道哪些解决方案是最高性能的解决方案，我怎么能自己检测到这样的东西？

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

谢谢！

来源

2015-07-20 Daiaiai

除非必须支持 cdMinix

我假设浏览器兼容性，但如果是这样的话，我希望触摸屏幕也处理;-) –

追踪javascript performance，您可以使用console.time()和console.timeEnd()如下：

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

// your logic/code here 

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

的结果将是ms

支持：萤火虫，在Webkit的督察，Opera蜻蜓和IE11。

来源

2015-07-20 14:55:37

高度为0的元素仍然会出现在文档流中。显示：没有，另一方面，不会。这样的一个例子是，它应该有希望解释一点，我已经下面创建：

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的默认显示是块，这将占用其父项的整个宽度。第二个跨度在他们之间有一个div：none样式。注意他们现在如何出现在同一行上？如果您仍然希望元素“占据”空间但未显示，则可以使用visibility：hidden，如上例中第三组跨度所示：

在性能方面，如果不考虑任何。如何应用css会有更多的影响（例如[id = menuItem1]将执行比＃menuItem1慢），但它再次，这是不是巨大的。

来源

2015-07-20 14:49:26

显示：没有表现好，高度：0？

回答

相关问题