jquery性能優(yōu)化高級技巧
有時候我們在書寫jquery的時候，為了書寫代碼方便，往往忽略了程序執(zhí)行過程中，給客戶端帶來的壓力。隨之而來的就是在某些低端瀏覽器或者低端電腦上運行速度緩慢，甚至無法運行等問題。
因此我們有必要對我們自己書寫的jquery代碼進行優(yōu)化，以達到更快捷、更流暢的運行效果。
jquery性能優(yōu)化高級技巧，下面主要從七個方面對jquery性能優(yōu)化做介紹：
1.通過CDN（Content Delivery Network）引入jQuery庫
2.減少DOM操作
3.適當使用原生JS
4.選擇器優(yōu)化
5.緩存jQuery對象
6.定義一個可以復用的函數(shù)
7.用數(shù)組方式來遍歷jQuery 對象集合
下面詳解每一個方法的具體說明:
通過CDN（Content Delivery Network）引入jQuery庫
要提升網站中javascript的性能的最簡單的一步就是引入最新版本的jQuery庫，新發(fā)布的版本通常在性能上會有更好的提升而且也修復了一下bug。或者通過CDN引入也是很好的選擇,通過CDN引入能夠減少網站的加載時間。
以下是一些CDN服務：
<!-- Case 1 - jQuery CDN --> <script src="http://code.jquery.com/jquery-1.10.2.min.js" ></script> <!-- Case 2 - requesting jQuery from Googles CDN (notice the protocol) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script> <!-- Case 3 - requesting the latest minor 1.10.x version (only cached for an hour) --> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10/jquery.min.js" ></script> <!-- Case 4 - requesting the absolute latest jQuery version (use with caution) --> <script src="http://code.jquery.com/jquery.min.js" ></script>
一些國內的CDN服務：
http://www.bootcdn.cn/jquery/ <!--新浪 CDN--> <script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js"></script> <!--百度 CDN--> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script> <!--Bootstrap CDN--> http://www.bootcdn.cn/jquery/
減少DOM操作
雖然javascript性能上有了很大的提升，但是DOM操作還是很耗費資源的，需要減少對DOM操作。當在一個頁面中插入大量的元素的時候，尤其重要。
例如：
<div id="elem" ></div>
// 不好的方式
//var elem = $('#elem');
//for(var i = 0; i < 100; i++){
// elem.append('<li>element '+i+'</li>');
//}
// 好的方式
var elem = $('#elem' ),
arr = [];
for(var i = 0; i < 100; i++){
arr. push('<li>element ' +i+'</li>' );
}
elem. append(arr. join('' ));
將所有的元素緩存起來一次插入性能上會有所提升，因為只觸發(fā)頁面一次重繪。對于CSS樣式屬性也是同樣的道理。
更多閱讀： 前端頁面卡頓？可能是DOM操作惹的禍，你需要優(yōu)化代碼
適當使用原生JS
創(chuàng)建jQuery對象會帶來一些開銷。所以，如果比較注重性能的話，盡可能使用原生的javascript。在某些方面可能會更容易理解和寫更少的代碼。例如：
// 打印list中的li的id
$('#colors li' ). each(function(){
//將$(this).attr('id')方法替換為直接通過ID屬性訪問
console. log(this. id);
})
選擇器優(yōu)化
如果你需要更好的性能，但是仍然要用到jQuery，你可以在jQuery選擇器優(yōu)化做一些嘗試。以下是一個測試程序，通過瀏覽器的控制臺console.time 和console.timeEnd 方法來記錄不同選擇器執(zhí)行時間。
HTML:
<div id="peanutButter" >
<div id="jelly" class=".jellyTime" ></div>
</div>
JS:
//測試程序
var iterations = 10000,
i;
//--------------------------------------------
//Case 1: 很慢
console.time('Fancy');
for (i = 0; i < iterations; i++) {
$('#peanutButter div:first');
}
console.timeEnd('Fancy');
//--------------------------------------------
//Case 2: 比較好，但仍然很慢
console.time('Parent-child');
for (i = 0; i < iterations; i++) {
$('#peanutButter div');
}
console.timeEnd('Parent-child');
//--------------------------------------------
//Case 3: 一些瀏覽器會比較快
console.time('Parent-child by class');
for (i = 0; i < iterations; i++) {
// 通過后代Class選擇器
$('#peanutButter .jellyTime');
}
console.timeEnd('Parent-child by class');
//--------------------------------------------
//Case 4: 更好的方式
console.time('By class name');
21
for (i = 0; i < iterations; i++) {
// 直接通過Class選擇器
$('.jellyTime');
}
console.timeEnd('By class name');
//--------------------------------------------
//Case 5: 推薦的方式 ID選擇器
console.time('By id');
for (i = 0; i < iterations; i++) {
$('#jelly');
}
console.timeEnd('By id');
執(zhí)行結果：
緩存jQuery對象
每次通過選擇器構建一個新的jQuery對象時，jQuery的核心部分的Sizzle引擎會遍歷DOM然后通過對應的選擇器來匹配真正的dom元素。這種方式比較低效，在現(xiàn)代瀏覽器中可以通過document.querySelector方法通過傳入對應的Class參數(shù)來匹配對應的元素，不過IE8以下版本不支持此方法。一個提高性能的實踐是通過變量緩存jQuery對象。例如：
<ul id="pancakes" >
<li>first</li>
<li>second</li>
<li>third</li>
<li>fourth</li>
<li>fifth</li>
</ul>
JS：
// 不好的方式:
// $('#pancakes li').eq(0).remove();
// $('#pancakes li').eq(1).remove();
// $('#pancakes li').eq(2).remove();
// ------------------------------------
// 推薦的方式:
var pancakes = $('#pancakes li');
pancakes.eq(0).remove();
pancakes.eq(1).remove();
pancakes.eq(2).remove();
// ------------------------------------
// 或者:
// pancakes.eq(0).remove().end()
// .eq(1).remove().end()
// .eq(2).remove().end();
定義一個可以復用的函數(shù)
直接上例子：
HTML： <button id="menuButton" >Show Menu!</button> <a href="#" id="menuLink" >Show Menu!</a>
JS：
//Bad:
//這個會導致多個回調函數(shù)的副本占用內存
$('#menuButton, #menuLink' ). click(function(){
// ...
});
//----------------------------------------------
//Better
function showMenu(){
alert('Showing menu!' );
// Doing something complex here
}
$('#menuButton' ). click(showMenu);
$('#menuLink' ). click(showMenu);
如果定義一個內聯(lián)(inline)回調函數(shù)同時這個包含多個元素的jQuery對象（正如上面所說的第一個例子），對于這個集合中的每個元素都會在內存中保存一個回調函數(shù)的副本。
用數(shù)組方式來遍歷jQuery 對象集合
你或許沒有注意到，但是在性能方面，對于jQuery each方法這種優(yōu)雅實現(xiàn)是有代價的。有一個辦法能夠更快地遍歷一個jQuery對象。就是通過數(shù)組來實現(xiàn)，jQuery對象集合就是一個類數(shù)組，具有l(wèi)ength和value屬性。可以通過程序來測試一下性能：
HTML:
<ul id="testList" > <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <li>Item</li> <!-- add 50 more --> </ul>
JS:
var arr = $('li'),
iterations = 100000;
//------------------------------
// Array實現(xiàn)：
console.time('Native Loop');
for (var z = 0; z < iterations; z++) {
var length = arr.length;
for (var i = 0; i < length; i++) {
arr[i];
}
}
console.timeEnd('Native Loop');
//------------------------------
// each實現(xiàn)：
console.time('jQuery Each');
for (z = 0; z < iterations; z++) {
arr.each(function(i, val) {
this;
});
}
console.timeEnd('jQuery Each');
結果：
可以看到通過數(shù)組實現(xiàn)方式遍歷，執(zhí)行效率更高。
//-------------------------------------------------------持續(xù)更新...
以上是一些搜集知識的總結，如有任何建議或疑問，歡迎留言討論。
相關文章
jQuery事件綁定用法詳解(附bind和live的區(qū)別)
這篇文章主要介紹了jQuery事件綁定用法,結合實例形式較為詳細的分析了jQuery事件綁定的實現(xiàn)原理與相關注意事項,并附帶了相關綁定方法的使用說明,重點介紹了bind和live的區(qū)別,需要的朋友可以參考下2016-01-01
jQuery實現(xiàn)的監(jiān)聽導航滾動置頂狀態(tài)功能示例
這篇文章主要介紹了jQuery實現(xiàn)的監(jiān)聽導航滾動置頂狀態(tài)功能,涉及基于jQuery的事件響應及狀態(tài)監(jiān)聽等相關操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了jquery實現(xiàn)超簡潔的TAB選項卡效果代碼,涉及jquery通過鼠標click事件結合鏈式操作動態(tài)操作tab選項卡的功能,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
很多效果還是要封裝成插件才好，這里只是給大家個效果參考。對像我這種新手應該還是有幫助的吧2012-06-06
下面小編就為大家?guī)硪黄猨Query序列化表單成對象的簡單實現(xiàn)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-11-11
判斷某元素是否具備指定的樣式的方法有很多，在接下來的文章中為大家介紹下jquery是如何做到的2013-11-11
jquery Ajax 實現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼
本篇文章主要是對jquery Ajax實現(xiàn)加載數(shù)據(jù)前動畫效果的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
這篇文章主要介紹了jQuery實現(xiàn)的淡入淡出二級菜單效果代碼,涉及jQuery中fadeIn及fadeOut的相關使用技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了jQuery實現(xiàn)遍歷復選框的方法,結合實例形式分析了jQuery針對表單復選框元素的遍歷與字符串操作相關技巧,需要的朋友可以參考下2017-03-03
本文主要介紹了JQuery實現(xiàn)兩個下拉框數(shù)據(jù)移動，追加,需要的朋友可以參考下2014-04-04