哪些jQuery JavaScript會有更好的性能？

我有標題部分。單擊標題將摺疊並展開它下面的部分。爲了樣式目的，類也被應用或移除到標題。有9個這些部分和標題。哪些jQuery JavaScript會有更好的性能？

$('.header').click(function() { 
     $(this).toggleClass('open'); 
     $(this).next().slideToggle(); 
});

我試圖改善移動設備的性能。我不是指頁面加載時間，而是指在動畫觸發標題之前動畫和延遲的平滑度。

我讀過使用ID比Classes快。以下要快多少？（注意，它需要重複9次，並顯示前2）。我還假設使用ID比使用.next（）遍歷DOM更快，這會產生多大的區別？

$('#header1').click(function() { 
     $(this).toggleClass('open'); 
     $('#section1').slideToggle(); 
}); 

$('#header2').click(function() { 
     $(this).toggleClass('open'); 
     $('#section2').slideToggle(); 
});

注意，我知道它有點柺杖，但我想使用jQuery不是普通的JavaScript。無論如何，jQuery庫將被加載爲在網站上其他地方使用。謝謝

來源

2012-05-04 Evans

使用[jsPerf]（http://www.jsperf.com）。 – Sirko

根本沒關係。儘管ID查找確實是最快的，但現代瀏覽器已經優化了基於選擇器的查找，所以它們都非常快，除非您執行需要遍歷整個文檔的內容（例如[someattribute]選擇器）。

但是，$('.header')可以讓您免於重複代碼，因此是最佳選擇。除此之外，它更具可讀性 - 在第二個示例中，您甚至不知道它影響的元素在哪裏看不到DOM。

所以，而不是試圖optimize what doesn't need to be optimized，保持您的代碼清潔和維護！

來源

2012-05-04 09:49:28 ThiefMaster

一個id作爲選擇器更快，但爲了可維護性，你真的想要那個重複的代碼嗎？

來源

2012-05-04 09:49:38

第二種方法將是邊際更快，但輕微的收益將被代碼的醜陋和不可維護性否定。

使用第一個選項。

來源

2012-05-04 09:50:20

技術上：
的ID參照方法是在瀏覽器中一個遠快DOM查找不支持getElementByClassName。但是由於必須解析兩次代碼量並應用兩個單擊處理程序，這被抵消了。 .live（）可能會更快，因爲它只綁定到body並稍後執行查找。

實際上：
差別很小。這是微型優化領域。代碼中的速度可能比這更大。

來源

2012-05-04 09:52:03 Paystey

哪些jQuery JavaScript會有更好的性能？

回答

相關問題