什麼是更好的隱藏HTML元素的性能方式？

如果我有很多下面div S：什麼是更好的隱藏HTML元素的性能方式？

<div class="error"> </div> 
<div class="error"> </div> 
<div class="error"> </div> 
<div class="error"> </div> 
<div class="error"> </div> 
...

什麼是隱藏在所有的一次最好的方法（和最佳實踐）？

$('.error').hide()或

.addClass('hide')包括.hide { display: none; }？

來源

2014-09-05 Alexey

當然要用CSS代替Javascript。所以'display：none;' – Siyah 2014-09-05 12:38:34

'$（'。error'）。hide（）'in CSS'{display：none}' – Jack 2014-09-05 12:40:15

使用CSS'.error {display：none;}'它會一次隱藏所有元素，與js你仍然需要等待頁面加載來隱藏它們 – Arvind 2014-09-05 12:40:37

最佳的最後一件事是一個意見，你可以運行jsperf測試，每個瀏覽器會有所不同。

最後，您將循環使用JavaScript並添加類或設置樣式屬性，或者只依靠CSS爲您執行循環。

看使用選擇

$(".error").hide(); // or .addClass() or .css("display","none")

在它的蓋：

一個DOM查找爲一個或多個元件
它用於循環通過所述一組做一個
它獲取循環迭代中的當前元素
在循環迭代中應用css規則
結束了做一個重繪/重繪

但有辦法不用循環是僅僅依靠添加CSS規則越往上的層次結構。

CSS：

.hideErrors div.error { 
    display: none; 
}

的JavaScript：

$(document.body).addClass("hideErrors");

這裏做的事情：

DOM查找一個元素
再添一類
最終做了重繪/重繪

這樣你就不必循環遍歷並向每個元素添加一個類。將「hideError」規則放在包裝錯誤列表的元素周圍會更好。所以把「body」改成那個父元素。

來源

2014-09-05 12:45:21 epascarello

但這是一個相當低效的選擇器。它仍然遍歷DOM來查找'.error'，然後遍歷每個查找'.hideErrors'。 – 2014-09-05 12:46:38

收益是用JavaScript或CSS循環DOM。 – epascarello 2014-09-05 12:47:10

你必須循環任一方式。事實是，你的表現問題不太可能來自你放課的地方。將項目從文檔中消失以及爲此需要重新刷新/重新繪製的副作用是會消耗大部分資源。 – 2014-09-05 12:48:43

-1

如果您希望在頁面加載中隱藏它們，請將隱藏的類添加到div中。

.hidden{ 
    display: none; 
}

要顯示和隱藏只是使用jQuery。

$('.error').hide(); 
$('.error').show();

來源

2014-09-05 12:39:55 Tim

這不是問題的答案。他要求最好的方法。 – Siyah 2014-09-05 12:40:41

使用.hide（）和.show（）是當前的標準，因爲它是最好的答案。那就是他想知道的 – Tim 2014-09-05 12:45:59

*「現行標準」*什麼標準？ – epascarello 2014-09-05 13:21:23

你挑哪個真的沒關係。如果這對你很重要，那麼運行一個基準測試。

大部分瀏覽器的時間無論如何都是處理佈局和重繪，添加類或內聯樣式（因爲這就是.hide()所做的，將style="display: none;添加到元素）實際上並不重要。

如果你關心性能，降了jQuery，開始使用一些vanilla JS，瞭解page performance和優化您的JavaScript和CSS選擇器。

老實說，你如何修改DOM是你應該擔心:)

來源

2014-09-05 12:44:37

術語「最好」並不是真的足夠的信息，因爲它可能意味着性能（速度）或大小（包含的庫）。

如果您已經在使用JQuery，它通常是一個非常高效的庫，以下是在DOM完成加載之後您將如何執行此操作。

$(document).ready(function() { 
    $('.error').hide() 
});

還有除此之外其它事件「DOM準備」 jQuery的定義，你可以掛鉤的動作爲止，這就是爲什麼它是一個方便的庫。

如果您只是對整體速度感興趣並希望避免使用外部庫，那麼CSS通常是您最快的方法，您可以按照樣式表中的說明添加該類。這會限制您何時可以在DOM加載之前隱藏它們。

對於您所描述的所有情況，都有最佳和最差的情況。 JavaScript將不得不循環（解析）DOM，所以它總是比純CSS慢。

來源

2014-09-05 12:52:16

我認爲添加和刪除類將是更好的處理方法。

通過這種方式，您還可以執行與錯誤消息相關的其他樣式更改。

css code : 

    .showdiv { 
     display : block; 
    } 

    .hidediv { 
     display:none; 
    } 

    javascript code : 

    $('.error').addClass('showdiv') 

    $('.error').removeClass('hidediv')

來源

2014-09-05 12:52:32

什麼是更好的隱藏HTML元素的性能方式？

回答

相關問題