【转】jquery两稳定版本比较~~

 

博客分类：
jquery 

       jquery历经了多个版本的更新，版本上的比较貌似没什么必要性，一般来说新的版本会比旧的版本各方面都略有提升，但由于新版中增加了各种新的功能，难免会引起bug的发生。评估一个版本是否适合当前开发场景使用，通过多几方面来衡量比较靠谱。以下我选用业界中比较稳定两个jquery来进行对比，它们分别是1.4.2版本以及1.7.1版本来 。

 

1.  性能上的分析

     1.1带宽比较

      1.4.2体积为71K，1.7.1体积为92k，压缩后的体积相差无几，现金的网络情况可忽视21K的差距。

 

     1.2各浏览器上的性能比较

       本次性能测试并没有覆盖所有的浏览器，只选用当前比较流行的几个版本，包括了：IE6、IE8、FF11、Chrome 18

 

      测试用例：

Js代码  
  1. <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js">  
  2. </script>  
  3. <script type="text/javascript">  
  4.   var $171 = jQuery.noConflict();  
  5. </script>  
  6. <script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js">  
  7. </script>  
  8. <script type="text/javascript">  
  9.   var $142 = jQuery.noConflict();  
  10. </script>  
  11.   
  12. <div class="wrapper">  
  13.   <div class="innerWrapper">  
  14.     <div class="button">  
  15.         <a href="" id="button" class="buttonRef">    
  16.            <span class="buttonText">Text</span>   
  17.        </a>  
  18.     </div>  
  19.   </div>  
  20. </div>  
  21.   
  22. <script>  
  23.   var context71 = $171("div.wrapper");  
  24.   var context42 = $142("div.wrapper");  
  25. </script>  

 

   在1秒里循环执行以下测试用例

Js代码  
  1. Get - Class 1.4.2   var item = $142(".buttonRef");  
  2. Get Class1.7.1  var item = $171(".buttonRef");  
  3. Context-Class 1.4.2 var item = $142(".buttonRef", context42);  
  4. Context-Class 1.7.1 var item = $171(".buttonRef", context71);  
  5. Find-Class 1.4.2    var item = context42.find(".buttonRef");  
  6. Find-Class 1.7.1    var item = conttext71.find(".buttonRef");  

 

 

    其运行结果就不一一显示出来，感兴趣的童鞋们可以到http://jsperf.com/jq1-4-2-vs-jq1-7-1/3 具体查看各浏览器的性能比较。

    简略汇总了各浏览器的数据：单位：(ops/sec)

    

       总的来说， jquery1.7.1 除了在 IE6 上性能没太大的差别以外，在其它三个浏览器均有较大性能的提升。

 

2.稳定性分析

   

js 稳定性，起码保证浏览器在运行 jquery 的时候不会奔溃，同时我们从其发布策略以及其下个版本有没重大bug 修复来来衡量哪个版本比较稳定。

首先看看两个版本各自发布的时间，同时它们各自跟下个版本的发布时间间距。

 

Html代码  
  1. Jquery 1.4.2  Posted February 19th, 2010 by John Resig  
  2. Jquery 1.4.3  Posted October 16th, 2010 by John Resig  
  3. Changelog ：http://api.jquery.com/category/version/1.4.3/            
  4.   
  5.   
  6. Jquery 1.7.1 Posted November 3rd, 2011 by dmethvin  
  7. Jquery 1.7.2 Posted March 21st, 2012 by dmethvin  
  8. Changelog：http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/  

 

 从发布时间间距和更改日志来说， 1.4.2 版本更稳定点。

 

3.功能上分析

  

Html代码  
  1. <strong>1.7.1新增的方法   
  2.      removeData([name|list]) (支持以数组为参数的批量操作)  
  3.   
  4. 属性：(新增)  
  5.         prop(name|pro|key,val|fn)  
  6.         removeProp(name)  
  7.       
  8. 选择器：(新增)  
  9.         focus1.6+  
  10.   
  11. 筛选：(重载了方法)  
  12.        is(expr|obj|ele|fn)1.6*  
  13.        closest(expr,[con]|obj|ele)1.6*  
  14.        nextUntil([exp|ele][,fil])1.6*  
  15.        parentsUntil([exp|ele][,fil])1.6*  
  16.        prevUntil([exp|ele][,fil])1.6*  
  17.       
  18. 事件：(新增)  
  19.        on(eve,[sel],[data],fn)1.7+  
  20.        off(eve,[sel],[fn])1.7+  
  21.        delegate(sel,[type],[data],fn)  
  22.        undelegate([sel,[type],fn])1.6*  
  23.   
  24. Deferred：  
  25.     新增了整个模块  
  26.   
  27. 工具：(重载了方法)  
  28.     $.map(arr|obj,callback)1.6*  
  29. </strong>  

 

 

       总的来说， jq1.7.2 重载了不少方法，也新增了一些方法，但对于我们日常开发来说都不是太常用，当然功能更多我们有更多的选择，不过相对来说跟 jq1.4.2 没有太多的优越性。

 

4.可扩展性、兼容性分析

  

由于 Jquery 的版本都是不向后兼容的，导致了基于 jquery 开发的插件兼容性有问题，当新版本的 jquery 推出后，如果开发想升级的话，要看插件是否支持。通常情况下，在最新版 jquery 版本下，现有插件可能无法正常使用。开发者使用的插件越多，这种情况出现概率越高。

 

同时，由于 jquery1.4.2 版本发布时间比较早，基于这版本开发的插件数量庞大，而对应版本的开发社区相当活跃，很多诡异的问题，网上都有对应的解决方案。

 

从可扩展性来分析吧，无论是 1.7.1 还是 1.4.2 留给开发扩展的方法只有两个，分别是 jquery.extend 和jquery.fn.extend ，一种是添加静态属性和方法、一种是对象添加属性和方法，扩展方式比较简单，经历了多个版本，扩展方式都一致，因此在扩展性上面没什么可比较的。

 

5.结论

   

综上所述， jquery1.7.1 的版本在多数浏览器上的性能表现无疑比 jquery1.4.2 更好，而稳定性和兼容性方面jquery1.4.2 更出色点，其它地方基本没什么差距。   

 

从我们目前前端开发情况来说吧，引用到第三方的扩展库相对来说比较少，而 1.4.2 拥有庞大插件数量的优势对于我们来说没什么意义（习惯自研的）。我们更多的关注框架性能是否优越，可扩展性是否良好，因此，jquery1.7.1 的版本是当前最好的选择。

posted on 2013-06-24 16:31  Rain&Sun  阅读(404)  评论(0)  编辑  收藏  举报