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
測試用例:
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秒里循環執行以下測試用例
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 修復來來衡量哪個版本比較穩定。
首先看看兩個版本各自發布的時間,同時它們各自跟下個版本的發布時間間距。
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.功能上分析
<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 的版本是當前最好的選擇。