jQuery - 为什么“活”效率低下？我们如何衡量这一点？

Question

为什么程序员说“生活”效率低下？

1. 那么什么是替代 方法来复制该功能 是更有效率？
2. 我们如何衡量它减慢事物的影响？

Answer 1

我想这是低效的，因为处理程序放置在根节点上，并依靠冒泡来捕获事件并运行正确的处理程序。

其中一种替代方法是将您的处理程序简单地bind添加到您的动态创建的元素中，并将其添加到DOM中。

另一种替代方法是将一个处理程序绑定到一个容器，并让您的事件发生。这可以很好，如果你有很多相同的元素添加到一个容器。

<div id="myContainer"> 
    <div class="myElement>element</div> 
    <div class="myElement>element</div> 
    <div class="myElement>element</div> 
    <div class="myElement>element</div> 
</div> 

绑定一个单击处理程序#myContainer，而不是每个.myElement。

$('#myContainer').click(function(e) { 
    $target = $(e.target); 
    if($target.closest('.myElement').length) { 
     // Run my code for the click 
    } 
}); 

我像这可能会从一些相同的低效率的受苦.live()，但应该再好些，因为它是更本地化。新增.myElement项目，自动工作。

---

编辑：

根据the docs：对于jQuery 1.4，事件冒泡可任选地停止在DOM元素 “上下文”。

这似乎与我提到的最后一种方法产生了类似的效果。

---

编辑：

如所建议的由尼克Craver，jQuery的.delegate()方法可以产生类似的效果更干净。尼克的

实施例提供：

$('#myContainer').delegate('.myElement', 'click' function() { alert($(this).text()); }); 

Answer 2

live()可能仅被认为是低效的，如果：

1. 有被绑定到一个事件（< 5个元素的少量，让我们说）。
2. 这些目标元素的数量保持不变。

如果您的用例满足上述标准（特别是＃2），您应该坚持直接绑定元素并避免live()。

标杆live()的性能，你可以尝试的一个例子是通过剖析使用live()到click处理程序绑定到一个元素，还配置文件使用click()绑定到同一元素的另一个代码片段的代码片段。

我不太确定你会得到什么样的结果，但我相信它会很有趣。

Answer 3

正如@帕特里克认为它可能效率低下，因为它需要处理文档上的所有事件，无论气泡是否到达您的元素。

这是delegate可以帮助，因为它的工作原理相同的方式活，但允许其只将其限制在一个共同的父

影响文档的比例较小（用他的例子）

$('#myContainer').delegate('div.myElement', 'click', function(){});