我们有一次代码评审的会议上,说起live的影响效率的事情,众所周知它最直观的好处在于可以一直“监听”我们操作,对于新增的DOM节点也会有效,而不需要重新绑定。也许是因为这个“监听”让我自然的联想到他会不断的去绑定、判断,会造成性能问题,而我理所当然的认为这绝对他妈的浪费内存,而这一切在我看了一篇博文后,为自己理所当然而脸红!下面是某位大神的测试数据,我们来see see
//环境:IE8。 工具:sIEve。 jQuery:1.42 //普通方式: jQuery(function($){ var li = '<li><a href="#">test</a></li>', newLi = li; for (i = 0; i < 6000; i++) { newLi += li; }; $('#test').html(newLi); $('#test a').click(function(){ alert(0); return false; }); }); //测试结果:绑定前 20880KB | 绑定后 64932KB | 执行事件后 64980KB //live 代理方式: jQuery(function($){ var li = '<li><a href="#">test</a></li>', newLi = li; for (i = 0; i < 6000; i++) { newLi += li; }; $('#test').html(newLi); $('#test a').live('click', function(){ alert(0); return false; }); }); //测试结果:绑定前 21056KB | 绑定后 20936KB | 执行事件后 20936KB
也需你会和我一样很震惊,怎会他妈的这样!
首先我大致研究了jquery的live 的实现。其原理是利用事件的冒泡
document.onclick= function(event){ if ($(event.target) =='你live哪个元素') { //do something } }
就是 冒泡到 document 在做处理,而不是实时监听,当你点击哪个元素,触发冒泡,效率影响应该不大,请放心饮用
ps : 大神的东西,当然会考虑效率。如果有所怀疑,请用数据说话,不能想淡然。
大家有什么想法一起讨论,仅一家之言