性能開銷

Question

如果我的標記看起來像這樣：

<button id="button-1" class="nice"> 
<button id="button-2" class="nice"> 
<button id="button-3" class="nice"> 

，我定義以下的jQuery：

$(".nice").click(function() { 
    // something happens 
}); 

1. 多少事件監聽器成立？ 1或3？

2. 如果我有1000個按鈕而不是3個，應該使用事件委託嗎？

3. 如果這些類在標記中包含大量元素，那麼在元素類中不定義jQuery調用是否最好，性能明智？

Answer 1

1）3個事件監聽器都指向相同的函數。

2）那要看你要完成

3）嘗試做一些基準測試，看看那裏的性能損失變得明顯的。我已經選擇了多達1000個元素，然後同時進行動畫製作 - 而且（在FF中）性能命中直到大約600-700個元素都不明顯。性能當然取決於瀏覽器和JS引擎。一些（Chrome）會比其他（IE）更快。值得一提的是，對於該網站，我使用了與您的問題相同的方法。

Answer 2

1）3

2）是

3）是的，正如你所說的使用事件代表團這jQuery是可以通過.live功能。要小心，太多.live功能也會影響性能，所以請考慮本地事件委派。

Answer 3

完全同意！您必須將事件偵聽器添加到包含所有這些好元素的父元素。這將大大提高性能。

Answer 4

1. 是的，因爲的$()函數返回一個數組和click()被應用到所有在其中的元件。
2. 是的。如果有大量可觸發事件的節點，或者這些節點的數量可能發生變化，委派通常可以獲得最佳效果。這允許您只需要初始化事件偵聽器一次，而不管DOM發生了什麼。如果你打算有超過100個節點，我會使用事件委託來處理事件。
3. 是的。這會改善你的響應時間（特別是對於非常大的列表[請參考基準]），以及使你的初始化O（1）而不是O（n）。