JQuery 代码中使用的 CSS 类的事件侦听器的性能开销

Question

如果我的标记如下所示：

<button id="button-1" class="nice">
<button id="button-2" class="nice">
<button id="button-3" class="nice">

并且我定义了以下 jQuery：

$(".nice").click(function () { 
    // something happens
});

1. 建立了多少个事件侦听器？ 1 还是 3？

2. 如果我有 1000 个按钮而不是 3 个，我应该改用事件委托吗？

3. 从性能角度来看，如果元素类在标记中包含大量元素，最好不要在这些类上定义 jQuery 调用吗？

   从性能角度来看，

Answer 1

1) 3 个事件监听器都指向同一个函数。

2) 这取决于您想要完成的任务

3) 尝试做一些基准测试，看看性能影响在哪里变得明显。 我选择了多达 1000 个元素，然后同时进行动画处理 - 并且（在 FF 中）直到大约 600-700 个元素时，性能影响才明显。 性能当然取决于浏览器和JS引擎。 有些（Chrome）会比其他（IE）更快。 值得一提的是，对于该网站，我使用了与您问题中相同的方法。

Answer 2

1) 3

2) 是的

3) 是的，正如您所说，使用事件委托，在 jQuery 中可以通过 .live 功能。 请注意，太多 .live 函数也会影响性能，因此请考虑本机事件委托。

Answer 3

1. 是的，因为 $() 函数返回一个数组，并且 click() 应用于其中的所有元素。
2. 是的。 当您有大量可以触发事件的节点，或者当这些节点的数量可以改变时，委派通常会获得最佳回报。 这使得您只需初始化事件侦听器一次，无论 DOM 发生什么情况。 如果您计划拥有超过 100 个节点，我会使用事件委托而不是事件处理。
3. 是的。 这将改善您的响应时间（尤其是对于非常大的列表[请进行基准测试]），并使您的初始化时间复杂度为 O(1) 而不是 O(n)。

Answer 4

完全同意！ 您必须向包含所有这些好元素的父元素添加一个事件侦听器。 这将大大提高性能。