大型列表上单击事件的 jQuery 委托性能 - 如果动态添加更多元素会减慢速度？

Posted 2023-02-22

【中文标题】大型列表上单击事件的 jQuery 委托性能 - 如果动态添加更多元素会减慢速度？

【英文标题】：jQuery delegate performance on the click event on large lists - slows down if you dynamically add more elements?

【发布时间】：2011-09-28 10:39:18

【问题描述】：

我有一个这样的项目的视觉列表：

http://jsfiddle.net/viatropos/XCe3T/1/

在真正的应用程序中，我只加载了 200 个项目。但问题是click 事件需要将近一秒钟才能调用处理程序，即使只有 200 个项目。无论列表中有多少项，mouseover 事件回调都会立即执行。

我的问题是，无论页面上有多少元素，委托方法不应该一样快吗？我正在做的就是：

$("body").delegate("a", "click", function(event)  console.log($(event.target).get(0)); return false; 

如果您转到上面的 jsfiddle 示例和网络检查器，并单击呈现结果中的链接，它将添加 200 个以上的元素。注意你添加的元素越多，它变得越慢。奇怪的是，如果你从 6000 个项目开始，委托/点击的执行速度比你从 2000 个开始并一次添加 200 个直到达到 6000 时要快得多。

您有什么想法，我该如何提高 jQuery 的 delegate 方法在 click 事件中的性能？ css 是否会导致速度变慢（可能是样式过多或布局未优化）？

【问题讨论】：

如果您的视图列表中有 2000 多个项目，那么我建议您做错了。

***.com/questions/2402953/…

它立即为我执行，据我所知......

【参考方案1】：

根据我的经验，重新初始化（取消绑定然后再次绑定事件处理程序）比使用 .live 或 .delegate 更好（性能方面）。 这样你就应该达到你需要的性能。 实际上，我会定义一个阈值，使委托变慢，删除所有绑定并将 eventHandlers 重新绑定到现有元素集。