jQuery性能:$('#selector').live()vs手动绑定(当使用ajax请求时)

Question

处理异步加载的内容时,从性能角度来看,它们之间存在任何差异:

// .live()
$('#mybutton').live('click', function(e){ doSomething(); });

并在每次加载内容后手动bind()我们需要的事件:

// manual bind every time
$.ajax({
    url: url,
    success: function(data){
        mycontainer.html(data); // data contains #mybutton
        $('#mybutton').click(function(e){ doSomething(); });  
    }
});

？

Answer 1

有不同的成本,让我们来看看它们:

$('#mybutton').live('click', function(e){ doSomething(); });

这里有2个主要成本:

• 在#mybutton选择需要立即无故运行(结果被扔掉,我们只是想选择反正...我们结合document).在这种情况下,它是一个#id选择器,因此成本非常低......在其他情况下,它不便宜且非常浪费(例如[attr=something]).
• 到目前为止,每个click泡沫document都必须根据此选择器进行检查,每次点击评估成本会随着您期望的点击次数而变化.

现在让我们看看另一种方法:

$('#mybutton').click(function(e){ doSomething(); });  

这里还有两个主要成本:

• 在#mybutton选择运行,但每Ajax请求只有一次.但是,我们并没有浪费它,我们正在使用结果.
• 该click处理器被绑定到一个实际的元素,而不是document,所以有约束力的成本每运行一次,而不是一次

但是,没有每次点击成本,并且选择器调用本身并没有浪费...因此总体上更好,因为您使用的是ID,在其他情况下则不然.

在您的情况下,由于您正在处理ID(并保证单个元素),这要便宜得多:

$('#mybutton').click(function(e){ doSomething(); }); 

在其他情况下,你绑定数百个元素,.live()是明显的赢家,但.delegate()会更好.