添加 jQuery 侦听器会降低浏览器性能吗？答案

【问题标题】：can adding jQuery listeners slow down browser performance?添加 jQuery 侦听器会降低浏览器性能吗？
【发布时间】：2011-02-07 11:00:03
【问题描述】：

我的应用程序通过 Ajax 带来响应，并在每次刷新时创建 5-20 个新的 jQuery 单击侦听器。 IE 和 mozilla 浏览器的使用似乎都在变慢。这会显着降低浏览器性能。听众可以“释放”吗？

【问题讨论】：

标签： jquery ajax performance listeners

【解决方案1】：

补充安迪所说的现场。

您可能应该在要添加到页面的元素上使用delegate 或live。听起来您不是将唯一事件绑定到新元素（每次刷新时），而是重用函数。

在 jQuery 1.4.2 中可以像这样使用 delegate()：

// the container,        the selector, "the event", the function to be called
$("#container").delegate(".selector",  "click",     function(){
  // do stuff...
});

这只需要调用一次，每个添加了“选择器”类的新元素都会绑定到“#container”中的点击事件

【讨论】：

【解决方案2】：

使用.bind() 设置的侦听器在元素被删除或.unbind()ed 时被释放。使用.live() 设置的那些将持续存在，直到您调用.die() 或它们绑定的元素被删除（如果您指定，它可能位于DOM 中的某个位置，否则它将默认为DOM 根-.live() 不工作绑定到目标元素，以便可以删除/替换/更新元素，并且仍然绑定事件侦听器）。

5-20 个听众听起来太多了 - 如果可能的话，考虑绑定更少的处理程序，因为旧浏览器在压力下会比新浏览器更快地崩溃。

【讨论】：

确保通过 jQuery 删除元素。 empty() 和 html() 方法将起作用。

【解决方案3】：

您可以使用 unbind 取消绑定侦听器：

$("a").unbind("click"); // remove click event handler(s)
$("a").unbind(); // remove all event handlers

并使用die 删除live 事件：

$("#foo").die(); // remove all live events
$("a").die("click"); // remove live click event handlers

【讨论】：