Question

我有一个包含30多个事件处理程序的页面。

与此类似：

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

页面本身并不是那么大。但我觉得随着更多的事件处理程序，它的响应时间变得更加缓慢。

Answer 1

首先，这里有一个类似的问题/答案，其中包含一些与理解此问题相关的信息：Should all jquery events be bound to $(document)?。

以下是关于大量事件处理程序和性能的一些注释：

30+不是大量的事件处理程序。在大多数情况下，您根本不必担心30多个事件处理程序（如果您有讨厌的选择器，请参阅下面的可能例外）。
如果事件处理程序直接附加到目标对象（在实际事件时间处理它们的最有效方式），则可以最大限度地提高运行时性能。
如果您正在使用委托事件处理，则应将事件处理程序放在尽可能接近事件的实际对象的父级上。将所有委派的事件处理程序放在像document或document.body这样的顶级对象上通常是一个坏主意，因为这使得代码必须为每个事件查看更多的选择器，而不是事件处理程序更接近于触发事件的实际对象，从而避免评估大多数事件的大多数选择器。
如果您正在使用委托事件处理，那么辅助选择器（.on()的第二个参数）的性能非常重要。如果这是一个复杂的选择器，评估速度不快，并且您有很多这些都连接到同一事件的同一对象，您可能会开始看到一些性能下降。性能下降程度取决于具体情况。

所以，最糟糕的情况是，如果你有很多委托事件处理程序都附加到同一个对象，所有对象都有一个复杂的二级选择器。这是最糟糕的情况，因为事件必须冒泡到这个父对象，然后jQuery必须经历这个特定事件的每个委托事件，并且它必须评估辅助选择器参数以查看它是否匹配目标对象。如果在同一个对象上有很多这些委托的事件处理程序，并且辅助选择器有点复杂，那么处理所有这些事件的时间可能会开始变得明显。

与任何性能问题一样，如果这对您非常重要，那么您需要进行自己的性能测试。使用辅助选择器安装30个委派的“点击”处理程序，就像您将用于示例页面中的document对象并尝试一样。查看点击和对点击的响应之间是否可以看到任何性能下降。尝试使用100个事件处理程序，1000个事件处理程序等等，直到你看到它变得明显。

拥有大量事件处理程序会降低性能吗？

1 个答案: