是否有大量事件處理程序降低性能？

與此類似：

$section.on("click", "a.unselect-all", function() { 
    var $s = $(this).siblings("select"); 
    $s.find("option").removeAttr("selected"); 
    $s.val(""); 
});

頁面本身是不是所有的大。但我覺得它的響應時間越來越慢，更多的事件處理程序。

來源

2014-01-17 David

需要更多的上下文。 30個處理程序數量不是很大。更多地依賴於他們的工作。你是不小心將多個重複處理程序綁定到相同的元素？ –

如果你有很多的事件處理程序，它可能會降低性能，特別是如果它們被委派一次...因爲每個單元在'$ section'元素需要對所述動態選擇器進行評估 –

如何緩慢？你在哪裏看到問題... – epascarello

首先，這裏有一個類似的問題/回答，並附上一些相關信息以瞭解此問題：Should all jquery events be bound to $(document)?。

這裏有大量的事件處理程序和性能的一些注意事項：

30+不是大量的事件處理程序。在大多數情況下，您根本不必擔心30多個事件處理程序（如果您有令人討厭的選擇器，請參閱下面的可能例外情況）。
如果事件處理程序直接附加到預期的對象上（這是在實際事件時間處理它們的最有效方式），那麼您將最大化運行時性能。
如果您使用委託事件處理，則事件處理程序應放置在儘可能接近接收事件的實際對象的父級上。將所有委派的事件處理程序放在頂級對象上，如document或document.body通常是一個壞主意，因爲這會使代碼不得不爲每個事件查看更多的選擇器，而不是如果事件處理程序更接近觸發事件的實際對象，從而避免評估大多數事件的選擇器。
如果您使用委託事件處理，則次選擇器（.on()的第二個參數）的性能很重要。如果這是一個複雜的選擇器，並且評估速度不快，並且有很多這些選項都附加到同一個事件的同一個對象上，那麼您可能會發現某些性能下降。性能下降多少取決於具體情況。

所以，最糟糕的情況是，如果您有很多委託事件處理程序都附加到同一個對象上，並且都具有複雜的輔助選擇器。這是最糟糕的情況，因爲事件將不得不冒泡到這個父對象，然後jQuery將不得不經歷這個特定事件的每一個委託事件，並且它將不得不評估次選擇器參數以查看它是否匹配目標對象。如果在同一個對象上有很多這樣的委託事件處理程序，並且輔助選擇器有點複雜，那麼處理所有這些事件的時間可能會開始變得明顯。

與任何性能問題一樣，如果這對您真的很重要，那麼您需要進行自己的性能測試。使用輔助選擇器安裝30個委派的'點擊'處理程序，就像您將使用示例頁面中的document對象並嘗試。查看點擊和點擊響應之間是否有任何性能下降。嘗試使用100個事件處理程序，1000個事件處理程序等......直到您看到它變得明顯。

來源

2014-01-17 00:38:10 jfriend00

是否有大量事件處理程序降低性能？

回答

相關問題