2011-01-24 91 views
5

我发现了一些关于livebind的问题,但没有一个是关于性能的。我认为标题很清楚,那么在jQuery中使用live会有什么性能影响?为什么我问这是因为每当使用live就会触发事件,因此必须执行查找,我的想法是这可能会以负面方式影响性能。或者jQuery做了一些可以加快速度的魔术,比如听某些事件被添加到DOM时触发了某种事件?在jQuery中使用live而不是绑定会对性能产生影响吗?

回答

4

总体而言,当您的站点上有许多需要事件处理程序的(...)元素时,使用.live()/.delegate()的整体性能会更好。

将50个事件处理程序绑定到50个不同的节点,而不仅仅是将一个事件处理程序绑定到这50个元素的共同父项(基本上是.live()),会更加昂贵。

现在人们可能会争辩说,“很好,很好,但是这是伴随着开销事件冒泡”,这是绝对正确的。这就是为什么.delegate()被引入。 .live()始终将处理程序绑定到document.body,该处理程序显然是标记中任何子节点的父级。 .delegate()但是需要一个参数,您可以在其中指定“最低公分母”,这意味着您希望拥有事件处理程序的那些元素共享的最接近的父节点。这实际上将开销减少到零。

我不得不承认,我从来没有基准(但)在哪一点上使用“活动绑定”是有意义的。但是再一次,只要你有多个绑定处理程序的元素,就很有意义。只有只有一个功能而不是N的事实对我来说似乎很方便。

+0

伟大的答案,我会等待看看有没有人做过任何基准测试。但我认为你很有可能。 – 2011-01-24 14:02:03

0

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

从实际性能角度来看,live的检查开支很小,检查is,但这应该可以忽略不计。

这是一个非常简单live样的方法:

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

方式.live作品是:事件被绑定到父节点之一。所以实际上,每次事件被触发时都没有查找,但是这种方法的代价是不太受支持,但是IE。我建议你坚持.bind。如果您必须将事件绑定到许多元素,请使用。删除方法。

+0

@MeaeEYE - 你从哪里得到有关它的支持不足的信息? – ScottE 2011-01-24 13:24:27

0

jQuery的文档准确解释它是如何工作的:

事件代表团 的.live()方法能够影响尚未通过使用事件代表团添加到DOM元素:绑定到祖先元素的处理程序负责在其后代触发的事件。传递给.live()的处理程序永远不会绑定到一个元素;相反,.live()将特殊处理程序绑定到DOM树的根。在我们的示例中,点击新元素时,会发生以下步骤:

  1. 生成单击事件并将其传递给处理。
  2. 没有处理程序直接绑定到,所以事件冒泡了DOM树。
  3. 事件冒起来,直到它到达树的根,这是默认情况下.live()绑定其特殊处理程序的地方。
    • 从jQuery 1.4开始,事件冒泡可以选择停止在DOM元素“context”。
  4. 执行由.live()绑定的特殊点击处理程序。
  5. 此处理程序测试事件对象的目标以查看它是否应该继续。该测试通过检查$(event.target).closest('。clickme')是否能够找到匹配元素来执行。
  6. 如果找到了匹配的元素,则会调用原始处理程序。

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

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

相关问题