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

Question

我有一个关于javascript（jQuery）事件/监听器的一般问题。 点击监听器的数量是否有任何限制而不会出现性能问题？

Answer 1

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

这是jsperf test。您将看到绑定到许多元素的速度要慢得多，即使每种情况下只绑定了一个事件。

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

n.b。测试显示第3个选项是最快的，但这是因为它使用id而不是类来定位元素。

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

Answer 2

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

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

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

https://jsbench.me/ztknuth40j/1

结果

1. 一个 <div> 有 10 click 个处理程序，click 事件由 jQuery 触发。
   → 72.000 次点击/秒
2. 一个 <div> 有 100 click 个处理程序，click 事件由 jQuery 触发。
   → 59.000 次点击/秒 ~ 比第一种情况慢 19%
   这表明，额外的事件处理程序会减慢执行速度
3. 一个 <div> 具有 10 click 个处理程序，并且 click 事件由 plain JS 触发。
   → 84.000 次点击/秒 ~ 6% 比第一种情况快
   使用纯 JS 比使用 jQuery 快一点
4. 一个 <div> 有 100 click 个处理程序，并且 click 事件由 plain JS 触发。
   → 14.000 次点击/秒 ~ 比第二种情况慢 77%
   这很有趣：使用原生事件时，侦听器的数量似乎比使用 jQuery 降低性能的速​​度更快。

（每次运行的结果都不同，很大程度上取决于您的硬件和浏览器）

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

这是在每次点击时更改 div 内容的第二个测试：

https://jsbench.me/ztknuth40j/2

慢吗？

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

我认为您不会遇到用户操作事件（例如 click 或 mouseenter 处理程序）的问题，但在使用快速触发的事件（例如 scroll 或 {）时需要注意{1}}。

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