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

Question

我有一个像这样的项目的可视列表:

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

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

我的问题是，无论页面上有多少元素，委托(delegate)方法不应该一样快吗？我所做的就是这样:

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

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

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

Answer 1

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