javascript - 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

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