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(){});