Comparison of Two stable jquery versions

Jquery has been updated with multiple versions, and it seems that there is no need to compare the versions. In general, the new version will be slightly higher than the old version in all aspects, however, new features are added to the new version, which will inevitably lead to bugs. Evaluate whether a version is suitable for the current development scenario. It is reliable in many aspects. In the following example, we use jquery, which is relatively stable in the industry, for comparison. They are 1.4.2 and 1.7.1.

1. Performance Analysis

1.1 bandwidth comparison

1.4.2 The volume is 71 K, and 1.7.1 is 92 K. The compressed volume is almost the same. The network condition of cash can ignore the gap of 21 K.

1.2 Performance Comparison on various browsers

This performance test does not cover all browsers. Only popular versions are selected, including IE6, IE8, ff11, and chrome 18.

Test cases:

JS Code

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

Execute the following test cases cyclically in one second

JS Code

Get - Class 1.4.2var item = $142(".buttonRef");Get Class1.7.1var item = $171(".buttonRef");Context-Class 1.4.2var item = $142(".buttonRef", context42);Context-Class 1.7.1var item = $171(".buttonRef", context71);Find-Class 1.4.2var item = context42.find(".buttonRef");Find-Class 1.7.1var item = conttext71.find(".buttonRef");

The running results are not displayed one by one. For more information, visit http://jsperf.com/jq1-4-2-vs-jq1-7-1/3.

Summarized the data of various browsers: (OPS/sec)

In general, jquery1.7.1 has a great performance improvement in other three browsers except for IE6.

2. Stability Analysis

JS stability, at least to ensure that the browser will not crash when running jquery. At the same time, we can judge which version is stable based on its release policy and whether major bugs are fixed in the next version.

First, let's take a look at the release time of the two versions, and the release time gap between them and the next version.

HTML code

Jquery 1.4.2  Posted February 19th, 2010 by John ResigJquery 1.4.3  Posted October 16th, 2010 by John ResigChangelog ：http://api.jquery.com/category/version/1.4.3/          Jquery 1.7.1 Posted November 3rd, 2011 by dmethvinJquery 1.7.2 Posted March 21st, 2012 by dmethvinChangelog：http://blog.jquery.com/2012/03/21/jquery-1-7-2-released/

Version 1.4.2 is more stable in terms of release time interval and change log.

3. Functional Analysis

HTML code

<Strong> 1.7.1 New Method removedata ([name | list]) (batch operation with array parameters supported) properties: (new) prop (name | Pro | key, val | Fn) removeprop (name) selector :( new) focus1.6 + filter :( the method is overloaded) 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 * event (new) 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: added the entire module tool: (overload method) $. map (ARR | OBJ, callback) 1.6 * </strong>

In general, jq1.7.2 reloads many methods and adds some new methods. However, it is not very common for our daily development. Of course, we have more options for more functions, however, jq1.4.2 does not have much superiority.

4. Analysis of scalability and compatibility

Because jquery versions are not backward compatible, there is a problem with the plug-in compatibility developed based on jquery. When the new version of jquery is released, if you want to upgrade it, it depends on whether the plug-in is supported. In general, the current plug-in may not work properly in the latest jquery version. The more plug-ins developers use, the higher the probability of such a situation.

At the same time, due to the early release time of jquery1.4.2, the number of plug-ins developed based on this version is huge, and the development community of the corresponding version is quite active and has many strange problems, there are corresponding solutions on the Internet.

Let's analyze the scalability. No matter 1.7.1 or 1.4.2, there are only two methods left for Development Extension: jquery. extend and jquery. FN. extend. One is to add static attributes and methods, and the other is to add attributes and methods to objects. The extension method is simple. After multiple versions, the extension methods are consistent, therefore, there is nothing to compare in terms of scalability.

5. Conclusion

To sum up, jquery1.7.1 has better performance in most browsers than jquery1.4.2, and jquery1.4.2 has better stability and compatibility.

From the perspective of our current front-end development, the number of third-party extension libraries is relatively small, and 1.4.2 has the advantage of a large number of plug-ins, Which is meaningless to us (we are used to self-developed ). The jquery1.7.1 version is the best choice currently because of its superior framework performance and good scalability.