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

Question

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

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

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

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

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

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

score 3 · Accepted Answer

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

1 回答 1