jQuery live 事件绑定性能测试

昨天和我们可爱的后端架构师在争论这个问题，我很多UI组件中大量使用了jQuery live进行事件绑定，众所周知它最直观的好处在于可以一直“监听”我们操作，对于新增的DOM节点也会有效，而不需要重新绑定。也许是因为这个“监听”让我们很多人联想到他会不断的去绑定、判断，会造成性能问题，这也是他给我的意见，真的是这样吗？ 在我开始认识live之前，我也看过网上很多文章说live会降低性能，昨天架构师也给我这么一篇：《jQuery性能优化指南》，此文说到live上完全就是避重就轻，原因都还没谈直接给出定结论——“虽然我把绑定事件重新写了一次，代码多了点，但这种方式的效率明显高于live()方式，特别是在频繁的DOM操作中，这点非常明显。”，鄙视之。 在此之前，我认为我这篇文章是毫无意义的，因为live是类似于绑定父节点，去监听子节点产生的冒泡才去执行相应的事件，这种代理的好处几乎已经得到js编程哥公认了。可是前端面对环境的问题往往要比后端复杂，这也是前端经常需要与人分享的原因，通过前端工程师不断的积累让很多浏览器的问题明朗起来，让彼此避免陷入泥潭中。理论上的争执永远比不过一个实测来得直观。下面是我对live与普通绑定的内存占用测试： 环境：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 从结果可以得知在内存消耗方面live几乎完胜（执行效率与这个无关）。总之绑定6000次与绑定1次的区别还是比较大的。 前段时间我也浅浅的阅读了jQuery的源码，也曾经尝试写过自己的微型DOM引擎，因为我认为解决jQuery常用的方法可以控制在8Kb之内，后来在处理事件机制的时候才知道这个是无法“微型”，无法自动处理内存泄漏，所以jQuery源码中有一大片地方是给事件机制的，在1.42源码中竟然达到了1069行！ 了解jQuery应该从他实现的原理开始，也可以自己尝试写DOM操作引擎，看别人造轮子与自己造轮子都会让一切将明朗起来！ 事件代理机制扩展阅读：http://bbs.51js.com/viewthread.php?tid=87369&page=1&fromuid=81151#pid607391 本文原文： http://www.planeart.cn/?p=835