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代码

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
  var $171 = jQuery.noConflict();
</script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
  var $142 = jQuery.noConflict();
</script>

<div class="wrapper">
  <div class="innerWrapper">
    <div class="button">
        <a href="" id="button" class="buttonRef">  
           <span class="buttonText">Text</span> 
       </a>
    </div>
  </div>
</div>

<script>
  var context71 = $171("div.wrapper");
  var context42 = $142("div.wrapper");
</script>

<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js">
</script>
<script type="text/javascript">
  var $171 = jQuery.noConflict();
</script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js">
</script>
<script type="text/javascript">
  var $142 = jQuery.noConflict();
</script>

<div class="wrapper">
  <div class="innerWrapper">
    <div class="button">
        <a href="" id="button" class="buttonRef">  
           <span class="buttonText">Text</span> 
       </a>
    </div>
  </div>
</div>

<script>
  var context71 = $171("div.wrapper");
  var context42 = $142("div.wrapper");
</script>

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

Js代码

Get - Class 1.4.2	var item = $142(".buttonRef");
Get Class1.7.1	var item = $171(".buttonRef");
Context-Class 1.4.2	var item = $142(".buttonRef", context42);
Context-Class 1.7.1	var item = $171(".buttonRef", context71);
Find-Class 1.4.2	var item = context42.find(".buttonRef");
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代码

Jquery 1.4.2  Posted February 19th, 2010 by John Resig
Jquery 1.4.3  Posted October 16th, 2010 by John Resig
Changelog ：http://api.jquery.com/category/version/1.4.3/          


Jquery 1.7.1 Posted November 3rd, 2011 by dmethvin
Jquery 1.7.2 Posted March 21st, 2012 by dmethvin
Changelog：http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/

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

3.功能上分析

Html代码

<strong>1.7.1新增的方法 
     removeData([name|list]) (支持以数组为参数的批量操作)

属性：(新增)
        prop(name|pro|key,val|fn)
        removeProp(name)
    
选择器：(新增)
        focus1.6+

筛选：(重载了方法)
       is(expr|obj|ele|fn)1.6*
       closest(expr,[con]|obj|ele)1.6*
       nextUntil([exp|ele][,fil])1.6*
       parentsUntil([exp|ele][,fil])1.6*
       prevUntil([exp|ele][,fil])1.6*
	
事件：(新增)
       on(eve,[sel],[data],fn)1.7+
       off(eve,[sel],[fn])1.7+
       delegate(sel,[type],[data],fn)
       undelegate([sel,[type],fn])1.6*

Deferred：
    新增了整个模块

工具：(重载了方法)
    $.map(arr|obj,callback)1.6*
</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的版本是当前最好的选择。