Question

我发现了一些关于live和bind的问题，但没有一个是关于性能的。我认为标题很清楚，在jQuery中使用live会对性能产生影响吗？为什么我要问这是因为在使用live时每次触发事件时都必须进行查找，我的想法是这可能会以负面的方式影响性能。或者jQuery正在做一些加速这个的神奇东西，比如听一些东西被添加到DOM时被触发的事件？

Answer 1

一般情况下，当您的网站上有大量（...）元素需要拥有事件处理程序时，使用.live() / .delegate()会有更好的整体性能。

将50x事件处理程序绑定到50个不同的节点比将这些事件处理程序绑定到这50个元素的公共父级（基本上是.live()所做的那样）更为昂贵。

现在有人可能会争辩说，“好吧，很棒，但这会带来头顶事件冒泡”，这绝对是正确的。这就是.delegate()被引入的原因。 .live()总是将处理程序绑定到document.body，它显然是标记中任何子节点的父级。然而，.delegate()接受一个参数，您可以在其中指定“最小公分母”，这意味着您希望拥有事件处理程序的那些元素共享的最近的父节点。这实际上将开销减少到零。

我必须承认，我从未对基准（尚未）进行基准测试，在这一点上使用“实时绑定”是有意义的。但是，一旦你有多个元素绑定处理程序，它就有意义了。只有一个功能而不是N的事实对我来说似乎很方便。

Answer 2

从内存角度来看，live表现更好。 bind必须将同一事件附加到目标选择中的每个项目。

从实际效果的角度来看，live的开销很小，只有is支票，但这应该可以忽略不计。

这是一种非常简化的live方法：

function live(event, selector, callback) {
  $(document).bind(event, function () {
    if ($(this).is(selector)) {
      return callback();
    }
  });
}

Answer 3

.live 的工作方式是：event绑定到其中一个父节点。所以实际上每次触发事件时都没有查找，但是这个方法的成本较低，但IE支持。我建议你坚持使用 .bind 。如果必须将事件绑定到多个元素，请使用 .delegate 方法。

Answer 4

jQuery文档准确解释了它的工作原理：

活动授权   .live（）方法能够通过使用事件委托来影响尚未添加到DOM的元素：绑定到祖先元素的处理程序负责在其后代上触发的事件。传递给.live（）的处理程序永远不会绑定到元素;相反，.live（）将一个特殊的处理程序绑定到DOM树的根目录。在我们的示例中，单击新元素时，将执行以下步骤：


生成点击事件并传递给处理。

没有处理程序直接绑定到，所以事件冒泡了DOM树。

事件冒泡直到它到达树的根，这是.live（）默认绑定其特殊处理程序的位置。

从jQuery 1.4开始，事件冒泡可以选择停在DOM元素“context”。



由.live（）绑定的特殊点击处理程序执行。

此处理程序测试事件对象的目标以查看它是否应该继续。通过检查$（event.target）.closest（'。clickme'）是否能够找到匹配的元素来执行此测试。

如果找到匹配的元素，则会在其上调用原始处理程序。

因为在事件发生之前不执行步骤5中的测试，所以可以随时添加元素并仍然响应事件。

所以，你说的第一件事。它会检查事件发生的时间。

在jQuery中使用live而不是bind会对性能产生影响吗？

4 个答案: