jQuery的 - 顯示/隱藏 - 檢查是否已經設置

Question

可能重複：
Jquery performance: hide() vs is(':visible') - which is faster?

是否有意義檢查（通過自己的狀態），如果元素被調用的jQuery之前已隱藏.hide（）函數？ （和jQuery.show（））

閱讀函數源代碼，在我看來，它運行結束，不管元素屬性如何。是更多時間昂貴做檢查或讓功能設置屬性結束？

Answer 1

這些類型的問題始終可以通過實際的性能測試得到最好的回答，而jsperf系統使測試變得非常簡單。

令我感到驚訝的是，如果已經設置了所需的樣式，那麼它在設置之前似乎會節省一些性能週期（在Chrome和Firefox中）以先檢查。

你可以看到許多不同的組合在這裏：http://jsperf.com/hide-vs-check

由於這兩個選項之間的簡單對比：

elem.style.display = "none"; 
elem.style.display = "none"; 

和

elem.style.display = "none"; 
if (elem.style.display !== "none") { 
    elem.style.display = "none"; 
} 

第二個選項是微微有點更快。這表明，設置風格，即使已經設置爲該值，仍然具有顯着的成本，並且節省時間以避免在不需要時設置風格。

---

或者jQuery的版本的兩個選項：

elem.style.display = "none"; 
elem$.hide() 

和

elem.style.display = "none"; 
if (elem$.css("display") !== "none") { 
    elem$.hide(); 
} 

仍然顯示了第二個選項是當所需要的狀態已被設置得更快。

---

但是，如果狀態需要改變，那麼額外的測試確實（顯然）會減慢你的速度。這裏的第一個選項是比第二快的，因爲條件只是成本，如果條件計算爲真額外的時間：

elem.style.display = "block"; 
elem$.hide() 

和

elem.style.display = "block"; 
if (elem$.css("display") !== "none") { 
    elem$.hide(); 
} 

Answer 2

檢查屬性會花費更多時間。首先jQuery必須找到所有元素，然後檢查以下所有內容：

• 它們的CSS顯示值爲none。
• 它們是帶有type="hidden"的表單元素。
• 它們的寬度和高度明確設置爲0.
• 祖先元素被隱藏，因此元素不會顯示在頁面上。

在另一種情況下，當設置屬性只有2步 - 找到元素並分配（或覆蓋）一個屬性。