添加太多事件监听器会影响性能吗？

Does adding too many event listeners affect performance?

我有一个关于 javascript (jQuery) events/listeners 的一般性问题。 在没有性能问题的情况下，点击监听器的数量是否有限制？

就性能而言，事件绑定到的元素数量是您会发现任何问题的地方。

这里是jsperf test。您会发现绑定到许多元素要慢得多，即使在每种情况下只绑定一个事件。

jsperf 中的第三个测试展示了如何将事件绑定到父元素并使用委托来侦听所需的元素。 （在这种情况下.many）

n.b。测试表明第三个选项是最快的，但那是因为它以 id 而不是 class.

为目标元素

更新：这是另一个 perf test 显示绑定到 id 的 3 个事件与使用 class

绑定的一个事件

虽然这是一个老问题，但我觉得还没有完全回答。

正如 指出的那样：将事件处理程序添加到的位置已经很重要了。 但最初的问题似乎更关心触发这些事件处理程序（例如单击或滚动事件）对性能的影响。

是的，向元素添加额外的事件处理程序确实会降低性能。 这是测试以下情况的性能比较：

https://jsbench.me/ztknuth40j/1

结果

  1. 一个<div>有10click个处理程序，click事件由[=103=触发].
    → 72.000 clicks/sec
  2. 一个<div>有100click个处理程序，click事件由[=103=触发].
    → 59.000 clicks/sec ~ 比第一种情况慢 19%
    这表明，额外的事件处理程序会减慢执行速度
  3. 一个 <div> 有 10 click 个处理程序，click 事件由 plain JS.
    → 84.000 clicks/sec ~ 6% 比第一种情况
    快 使用纯 JS 比使用 jQuery
    4. 快一点
  4. 一个 <div> 有 100 click 个处理程序，click 事件由 plain JS.
    → 14.000 clicks/sec ~ 比第二种情况慢 77%
    这很有趣：当使用本机事件时，侦听器的数量似乎比使用 jQuery.
    5. 更快地降低性能

（这些结果因 运行 而异，很大程度上取决于您的硬件和浏览器）

请记住，这些测试是使用空函数完成的。添加执行一些额外任务的真实函数时，性能会进一步降低。

这是第二个测试，每次点击都会更改 div 的内容：

https://jsbench.me/ztknuth40j/2

速度慢吗？

另一方面：即使每秒 100 次操作也非常快（这意味着每个事件处理程序在一秒钟内执行 100 次）并且没有用户会注意到延迟。

我认为您不会 运行 遇到 click 或 mouseenter 处理程序等用户操作事件的问题，但在使用快速触发的事件时需要小心，例如 scroll 或 mouseover.

此外，随着计算机变得越来越快，浏览器应用了越来越多的优化，对于“太多”的事件处理程序数量没有硬性限制。它不仅取决于调用的函数和观察到的事件，还取决于用户的设备和浏览器。