顯示：沒有表現好，高度：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？

回答

相關問題