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

与此类似：

$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

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

回答

相关问题