jquery live()函数的性能损失

Performance penalty for jQuery's live() function

本文关键字：性能 损失 函数 live jquery      更新时间：2023-09-26

对于某些元素，每当悬停在它们上面时，我希望元素变得更大，然后在取消悬停时缩小。所以我用$('.elementClass').hover(function() { enlarge(this); }, function() { shrink(this); });。我把它放在所有网页的$(function() { });区域，因为许多网页都有这类元素。

有时我需要创建新的动态元素，它们上面有这些元素。当然，我必须为它们再次调用上面的hover函数，因为它们一开始并不存在。

似乎最方便的是在每个网页中简单地拥有一整套$('.variousClasses').live('variousEvents', function() { });调用，以实现上述所有可能的功能。

所以问题是，如果有一个性能损失调用live()这么多次，即使是在元素，永远不会触发那些事件或元素，永远不会存在?重要的是，我要小心只调用hover()或live('hover')(和其他事件)仅在需要时 ?

对你的问题的一般回答是，你应该尽量减少不必要的函数调用——在动态内容的情况下可能更应该如此。

特别是，live()是一个很好的例子，因为它确实带有一些(潜在的)显著的性能复杂性。当您调用live()时，jQuery将您选择的事件绑定到document对象。这意味着每次触发事件时，它都会从origin元素上升到document对象。根据您的网站结构(一般来说)，这可能是昂贵的。

delegate()

是一个更好的选择

最好使用jQuery的delegate()函数，特别是如果您有一个预定义的父容器元素，所有事件都将在其中触发。当您使用delegate()时，您基本上是在使用live()的受限版本，这样事件只能传播到指定的父元素。因此，您可以避免在您不关心的元素上触发许多可能代价高昂的事件。

在您的情况下，由于您正在处理动态生成的内容，因此您要么必须使用上述函数，要么设置代码，以便在将元素插入DOM时将事件处理程序绑定到它。前者可能更容易，但后者可能提供略好(可能无法识别)的性能。

相关文章：