jQuery的live函数性能

2009 5 22 12:08 AM 3278次查看

分类：JavaScript 标签：JavaScript, jQuery, 性能

前几天看了篇jQuery性能优化指南，说live函数绑定事件比较占资源，不建议使用。
由于在做游戏王时需要用到这个函数，所以特地来测试一下。

先看一次绑定一个：

click函数：
var $body = $('body');
var d = new Date();
for (var i = 1000; i > 0; --i) {
  $('<p></p>').appendTo($body).click(function () {alert('hello');});
}
var d2 = new Date();
$('#msg').html(d2 - d);
结果：
Chrome 2.0：349
IE 6：1672
Firefox 3.0.3：664
bind函数（只写for循环里的代码）：
$('<p></p>').appendTo($body).bind("click", function () {alert('hello');});
结果：
Chrome 2.0：359
IE 6：1687
Firefox 3.0.3：673
速度几乎是一样的，所以不再测bind函数了。

live函数：
var $body = $('body');
var d = new Date();
$('p').live("click", function () {alert('hello');});
for (var i = 1000; i > 0; --i) {
  $('<p></p>').appendTo($body);
}
var d2 = new Date();
$('#msg').html(d2 - d);
结果：
Chrome 2.0：235
IE 6：1266
Firefox 3.0.3：509
由于无需再次绑定，速度提升了不少。

再看一次绑定多个：

click函数：
var $body = $('body');
var dom = [];
for (var i = 1000; i > 0; --i) {
  dom.push('<p></p>');
}
var doms = dom.join('');
var d = new Date();
var $doms = $(doms).appendTo($body);
var d2 = new Date();
$doms.click(function () {alert('hello');});
var d3 = new Date();
$('#msg').html(d2 - d + ' ' + (d3 - d2) + ' ' + (d3 - d));
结果：
Chrome 2.0：52 79 131
IE 6：1063 218 1281
Firefox 3.0.3：107 108 215
live函数：
var $body = $('body');
var dom = [];
for (var i = 1000; i > 0; --i) {
  dom.push('<p></p>');
}
var doms = dom.join('');
var d = new Date();
$('p').live('click', function () {alert('hello');});
var d2 = new Date();
$(doms).appendTo($body);
var d3 = new Date();
$('#msg').html(d2 - d + ' ' + (d3 - d2) + ' ' + (d3 - d));
结果：
Chrome 2.0：1 52 53
IE 6：0 1109 1109
Firefox 3.0.3：1 107 108
可以看出，live不会对Chrome和Firefox的创建DOM对象造成影响，但IE会急剧下降，然而加上绑定事件的总时间仍比click少。

因此得出结论，live函数比直接绑定所花时间更少。


那么接下来就测响应事件所需的时间：
$('span').live("click", function () {$('#msg2').html(new Date() * 1);});
var dom = [];
for (var i = 1000; i > 0; --i) {
  dom.push('<span>', i.toString(), ' </span>');
}
$(dom.join('')).appendTo('body').click(function () {$('#msg').html(new Date() * 1);});
结果：
Chrome 2.0：live要慢1~4ms
IE 6：时间差基本为0，但如果很快地点2个span，则可能相差几十ms
Firefox 3.0.3：live要慢2~4ms
可见live的效率是相当高的，对于用户而言，就算是几十ms的时间差，也是难以察觉的。

当然，live的原理应该是捕捉所有事件，并通过事件的target属性过滤出其中符合的事件。
因此，如果你的事件非常多，延时应该会相应变长。当你确实遇到这种性能问题时，才去考虑改进吧。
至于说资源占用大，我觉得bind事件的资源占用更大，因为每个对象自身都包含事件的handler，而live只需要在一个全局对象上处理事件就行了，内存占用理论上会少很多。

最终结论：没必要每次都去绑定事件，如果live符合需求的话，就直接用live。

0条评论 你不来一发么↓

    想说点什么呢？