十個(gè)迅速提升JQuery性能讓你的JQuery跑得更快
更新時(shí)間：2012年12月10日 11:10:16 作者：
jQuery正在成為Web開(kāi)發(fā)人員首選的JavaScript庫(kù),作為Web開(kāi)發(fā)者,除了要了解語(yǔ)言和框架的應(yīng)用技巧外如何提升語(yǔ)言的性能,本文提供即刻提升你的腳本性能的十個(gè)步驟 簡(jiǎn)單的幾步讓你的JQuery跑得更快
需要的朋友可以參考下
本文提供即刻提升你的腳本性能的十個(gè)步驟。不用擔(dān)心，這并不是什么高深的技巧。人人皆可運(yùn)用！這些技巧包括：
使用最新版本
合并、最小化腳本
用for替代each
用ID替代class選擇器
給選擇器指定前后文
建立緩存
避免DOM操作
避免使用concat()，利用join()處理長(zhǎng)字串
返回false值
利用小抄和參考文檔
使用最新版本
jQuery一直處于不斷的開(kāi)發(fā)和改進(jìn)過(guò)程中。 John 和他的團(tuán)隊(duì)不斷研究著提升程序性能的新方法。
一點(diǎn)題外話(huà)，幾個(gè)月前他還發(fā)布了Sizzle，一個(gè)據(jù)說(shuō)能在Firefox中把程序性能提升3倍的JS選擇器庫(kù)。
如果你不想時(shí)刻關(guān)注是否有新版本，然后再花時(shí)間下載上傳，Google 就又能幫你一把了。他們的服務(wù)器上存儲(chǔ)了大量Ajax庫(kù)供您選擇。
<!-- 利用一個(gè)簡(jiǎn)單的script標(biāo)簽調(diào)用API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* 加載 jQuery v1.3.2 */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* 加載完成后彈出消息 */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>
另一個(gè)更為簡(jiǎn)單快速的方法是直接使用腳本鏈接。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面這句代碼就夠了：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
特定版本的還可以這樣加載：
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
合并、最小化腳本
大部分瀏覽器都不能同時(shí)處理多個(gè)腳本文件，所以它們都是排隊(duì)加載——加載時(shí)間也相應(yīng)地延長(zhǎng)了。
考慮到你網(wǎng)站的每個(gè)頁(yè)面都會(huì)加載這些腳本，你應(yīng)該考慮把它們放到單個(gè)文件中，然后利用壓縮工具（比如 Dean Edwards 的這款）把它們最小化。更小的文件無(wú)疑將帶來(lái)更快的加載速度。
JavaScript和CSS壓縮的目的是在保持腳本的執(zhí)行性能的同時(shí)，減少數(shù)據(jù)傳遞的字節(jié)數(shù)（可以通過(guò)減小原始文件，也可以利用gzip。大多數(shù)產(chǎn)品級(jí)的網(wǎng)絡(luò)服務(wù)器都把gzip作為HTTP協(xié)議的一部分）。引自 YUI compressor，一款 jQuery官方推薦的壓縮腳本的工具。
用for替代each
原生函數(shù)總是比輔助組件更快。
如果遇到需要遍歷對(duì)象的情況（如從遠(yuǎn)程接收的JSON對(duì)象），你最好重寫(xiě)你的（JSON）對(duì)象為一個(gè)數(shù)組，數(shù)組的循環(huán)處理要容易些。
利用Firebug，我們能測(cè)定每個(gè)函數(shù)的執(zhí)行時(shí)間。
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native'); //原生for函數(shù)
var l = array.length;
for (var i=0; i<10000; i++) {
}
上面的結(jié)果顯示原生代碼只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且這還只是我在本機(jī)上測(cè)試一個(gè)基本上啥也沒(méi)做的函數(shù)的結(jié)果，當(dāng)遇到更復(fù)雜的情況，例如設(shè)置css屬性或DOM操作時(shí)，時(shí)間差異肯定更大。
用ID替代class選擇器
利用ID選擇對(duì)象要好得多，因?yàn)檫@時(shí)jQuery會(huì)使用瀏覽器的原生函數(shù)getElementByID()來(lái)獲取對(duì)象，查詢(xún)速度很快。
因此，比起利用那些方便的css選擇技巧，使用更為復(fù)雜的選擇器也是值得的（jQuery也為我們提供了復(fù)雜選擇器）。你也可以手工書(shū)寫(xiě)自己的選擇器（其實(shí)比你想象中簡(jiǎn)單），或者為你想要選擇的元素指定一個(gè)有ID的容器。
//下例創(chuàng)建一個(gè)列表并且填充條目?jī)?nèi)容
//然后每個(gè)條目都被選擇一次
//首先使用class選擇
console.time('class');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
//然后利用ID選擇
console.time('id');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
上面的例子很好地說(shuō)明了不同選擇方式之間的顯著性能差異。請(qǐng)看下圖，利用class來(lái)做選擇，時(shí)間無(wú)限增大，甚至超過(guò)了五秒。
給選擇器指定前后文
jQuery的參考文檔里說(shuō)：傳遞給jQuery() 原始DOM節(jié)點(diǎn)的前后文（如果沒(méi)有東西被傳遞，則前后文為整個(gè)文檔）。目的是連同選擇器一起，實(shí)現(xiàn)更為準(zhǔn)確的查詢(xún)。
所以，如果你一定要利用class來(lái)指定目標(biāo)，至少為選擇器指定上下文，以免jQuery費(fèi)精力去遍歷整個(gè)DOM文檔：
與其這樣寫(xiě)：
$('.class').css ('color' '#123456');
為選擇器加上前后文比較好（expression: 目標(biāo)選擇器；context: 前后文）：
$(expression, context)
也就是說(shuō)：
$('.class', '#class-container').css ('color', '#123456');
這樣做要快得多，因?yàn)樗挥帽闅v整個(gè)DOM。只要找到#class-container就好了。
建立緩存
不要犯不斷重新選擇同一個(gè)東西的錯(cuò)誤。你應(yīng)該把你要處理的元素緩存為一個(gè)變量。
更不要在一個(gè)循環(huán)里重復(fù)選擇同一個(gè)元素！這樣做十分影響速度！
$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 這樣寫(xiě)更好
$('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
// 甚至這樣
var item = $('#item');
item.css('color', '#123456');
item.html('hello');
item.css('background-color', '#ffffff');
// 遇到循環(huán),這樣做非常不好
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append(i);
}
console.timeEnd('no cache');
// 下面這樣要好得多
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
避免DOM操作
DOM操作應(yīng)該越少越好，因?yàn)橹T如prepend()，append()，after()的插入動(dòng)作都很費(fèi)時(shí)。上面的例子如果用html()會(huì)更快：
var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);
避免使用concat()，利用join()處理長(zhǎng)字串
聽(tīng)起來(lái)可能挺奇怪，不過(guò)這樣做真的能提升速度，尤其是當(dāng)連接特別長(zhǎng)的字串時(shí)。先建立一個(gè)數(shù)組，放入你想要串聯(lián)的東西。join()方法比字符串的concat()函數(shù)要快得多。
var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));
“ += 操作符更快——比把字串片段放到數(shù)組中然后join起來(lái)還要快”，“作為字串緩沖（string buffer）的數(shù)組在大部分瀏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。” — Tom Trenka
返回false值
您可能已經(jīng)注意到，如果函數(shù)執(zhí)行后不返回false，你就會(huì)被跳轉(zhuǎn)到頁(yè)面頂部。如果頁(yè)面較長(zhǎng)，這種反應(yīng)是很煩人的。
所以，與其這樣：
$('#item').click (function () {
// stuff here
});
不如多加一句：
$('#item').click (function () {
// stuff here
return false;
});
額外小貼士 – 小抄和參考文檔
這條建議并不直接提升函數(shù)的執(zhí)行速度，不過(guò)如果你肯花時(shí)間在這上面，研究研究這些小抄和參考文檔，你將來(lái)定能節(jié)約很多時(shí)間。
請(qǐng)?jiān)谑诌呺S時(shí)放一張小抄以作快速參考。
使用最新版本
合并、最小化腳本
用for替代each
用ID替代class選擇器
給選擇器指定前后文
建立緩存
避免DOM操作
避免使用concat()，利用join()處理長(zhǎng)字串
返回false值
利用小抄和參考文檔
使用最新版本
jQuery一直處于不斷的開(kāi)發(fā)和改進(jìn)過(guò)程中。 John 和他的團(tuán)隊(duì)不斷研究著提升程序性能的新方法。
一點(diǎn)題外話(huà)，幾個(gè)月前他還發(fā)布了Sizzle，一個(gè)據(jù)說(shuō)能在Firefox中把程序性能提升3倍的JS選擇器庫(kù)。
如果你不想時(shí)刻關(guān)注是否有新版本，然后再花時(shí)間下載上傳，Google 就又能幫你一把了。他們的服務(wù)器上存儲(chǔ)了大量Ajax庫(kù)供您選擇。
復(fù)制代碼 代碼如下:
<!-- 利用一個(gè)簡(jiǎn)單的script標(biāo)簽調(diào)用API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
/* 加載 jQuery v1.3.2 */
google.load ("jquery", "1.3.2", {uncompressed: false});
/* 加載完成后彈出消息 */
function onLoad () {
alert ("jQuery + Google API!");
}
google.setOnLoadCallback (onLoad);
</script>
另一個(gè)更為簡(jiǎn)單快速的方法是直接使用腳本鏈接。如果要使用特定版本的jQuery，你可以使用上面的方法；如果想直接使用最新版，下面這句代碼就夠了：
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
特定版本的還可以這樣加載：
復(fù)制代碼 代碼如下:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
合并、最小化腳本
大部分瀏覽器都不能同時(shí)處理多個(gè)腳本文件，所以它們都是排隊(duì)加載——加載時(shí)間也相應(yīng)地延長(zhǎng)了。
考慮到你網(wǎng)站的每個(gè)頁(yè)面都會(huì)加載這些腳本，你應(yīng)該考慮把它們放到單個(gè)文件中，然后利用壓縮工具（比如 Dean Edwards 的這款）把它們最小化。更小的文件無(wú)疑將帶來(lái)更快的加載速度。
JavaScript和CSS壓縮的目的是在保持腳本的執(zhí)行性能的同時(shí)，減少數(shù)據(jù)傳遞的字節(jié)數(shù)（可以通過(guò)減小原始文件，也可以利用gzip。大多數(shù)產(chǎn)品級(jí)的網(wǎng)絡(luò)服務(wù)器都把gzip作為HTTP協(xié)議的一部分）。引自 YUI compressor，一款 jQuery官方推薦的壓縮腳本的工具。
用for替代each
原生函數(shù)總是比輔助組件更快。
如果遇到需要遍歷對(duì)象的情況（如從遠(yuǎn)程接收的JSON對(duì)象），你最好重寫(xiě)你的（JSON）對(duì)象為一個(gè)數(shù)組，數(shù)組的循環(huán)處理要容易些。
利用Firebug，我們能測(cè)定每個(gè)函數(shù)的執(zhí)行時(shí)間。
復(fù)制代碼 代碼如下:
var array = new Array ();
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('native'); //原生for函數(shù)
var l = array.length;
for (var i=0; i<10000; i++) {
}
上面的結(jié)果顯示原生代碼只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且這還只是我在本機(jī)上測(cè)試一個(gè)基本上啥也沒(méi)做的函數(shù)的結(jié)果，當(dāng)遇到更復(fù)雜的情況，例如設(shè)置css屬性或DOM操作時(shí)，時(shí)間差異肯定更大。
用ID替代class選擇器
利用ID選擇對(duì)象要好得多，因?yàn)檫@時(shí)jQuery會(huì)使用瀏覽器的原生函數(shù)getElementByID()來(lái)獲取對(duì)象，查詢(xún)速度很快。
因此，比起利用那些方便的css選擇技巧，使用更為復(fù)雜的選擇器也是值得的（jQuery也為我們提供了復(fù)雜選擇器）。你也可以手工書(shū)寫(xiě)自己的選擇器（其實(shí)比你想象中簡(jiǎn)單），或者為你想要選擇的元素指定一個(gè)有ID的容器。
復(fù)制代碼 代碼如下:
//下例創(chuàng)建一個(gè)列表并且填充條目?jī)?nèi)容
//然后每個(gè)條目都被選擇一次
//首先使用class選擇
console.time('class');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('.item' + i);
}
console.timeEnd('class');
//然后利用ID選擇
console.time('id');
var list = $('#list');
var items = '
';
for (i=0; i<1000; i++) {
items += '
item
';
}
items += '
';
list.html (items);
for (i=0; i<1000; i++) {
var s = $('#item' + i);
}
console.timeEnd('id');
上面的例子很好地說(shuō)明了不同選擇方式之間的顯著性能差異。請(qǐng)看下圖，利用class來(lái)做選擇，時(shí)間無(wú)限增大，甚至超過(guò)了五秒。
給選擇器指定前后文
jQuery的參考文檔里說(shuō)：傳遞給jQuery() 原始DOM節(jié)點(diǎn)的前后文（如果沒(méi)有東西被傳遞，則前后文為整個(gè)文檔）。目的是連同選擇器一起，實(shí)現(xiàn)更為準(zhǔn)確的查詢(xún)。
所以，如果你一定要利用class來(lái)指定目標(biāo)，至少為選擇器指定上下文，以免jQuery費(fèi)精力去遍歷整個(gè)DOM文檔：
與其這樣寫(xiě)：
復(fù)制代碼 代碼如下:
$('.class').css ('color' '#123456');
為選擇器加上前后文比較好（expression: 目標(biāo)選擇器；context: 前后文）：
復(fù)制代碼 代碼如下:
$(expression, context)
也就是說(shuō)：
復(fù)制代碼 代碼如下:
$('.class', '#class-container').css ('color', '#123456');
這樣做要快得多，因?yàn)樗挥帽闅v整個(gè)DOM。只要找到#class-container就好了。
建立緩存
不要犯不斷重新選擇同一個(gè)東西的錯(cuò)誤。你應(yīng)該把你要處理的元素緩存為一個(gè)變量。
更不要在一個(gè)循環(huán)里重復(fù)選擇同一個(gè)元素！這樣做十分影響速度！
復(fù)制代碼 代碼如下:
$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 這樣寫(xiě)更好
$('#item').css('color', '#123456').html('hello').css('background-color', '#ffffff');
// 甚至這樣
var item = $('#item');
item.css('color', '#123456');
item.html('hello');
item.css('background-color', '#ffffff');
// 遇到循環(huán),這樣做非常不好
console.time('no cache');
for (var i=0; i<1000; i++) {
$('#list').append(i);
}
console.timeEnd('no cache');
// 下面這樣要好得多
console.time('cache');
var item = $('#list');
for (var i=0; i<1000; i++) {
item.append (i);
}
console.timeEnd('cache');
避免DOM操作
DOM操作應(yīng)該越少越好，因?yàn)橹T如prepend()，append()，after()的插入動(dòng)作都很費(fèi)時(shí)。上面的例子如果用html()會(huì)更快：
復(fù)制代碼 代碼如下:
var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);
避免使用concat()，利用join()處理長(zhǎng)字串
聽(tīng)起來(lái)可能挺奇怪，不過(guò)這樣做真的能提升速度，尤其是當(dāng)連接特別長(zhǎng)的字串時(shí)。先建立一個(gè)數(shù)組，放入你想要串聯(lián)的東西。join()方法比字符串的concat()函數(shù)要快得多。
復(fù)制代碼 代碼如下:
var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));
“ += 操作符更快——比把字串片段放到數(shù)組中然后join起來(lái)還要快”，“作為字串緩沖（string buffer）的數(shù)組在大部分瀏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。” — Tom Trenka
返回false值
您可能已經(jīng)注意到，如果函數(shù)執(zhí)行后不返回false，你就會(huì)被跳轉(zhuǎn)到頁(yè)面頂部。如果頁(yè)面較長(zhǎng)，這種反應(yīng)是很煩人的。
所以，與其這樣：
復(fù)制代碼 代碼如下:
$('#item').click (function () {
// stuff here
});
不如多加一句：
復(fù)制代碼 代碼如下:
$('#item').click (function () {
// stuff here
return false;
});
額外小貼士 – 小抄和參考文檔
這條建議并不直接提升函數(shù)的執(zhí)行速度，不過(guò)如果你肯花時(shí)間在這上面，研究研究這些小抄和參考文檔，你將來(lái)定能節(jié)約很多時(shí)間。
請(qǐng)?jiān)谑诌呺S時(shí)放一張小抄以作快速參考。
相關(guān)文章
本文章來(lái)給大家介紹一款固定底網(wǎng)站底部菜單效果，這里是基于jquery的，大家下載之后把jquery加入即可實(shí)現(xiàn)效果了，并且兼容性強(qiáng)。2013-08-08
這篇文章介紹了jQuery點(diǎn)擊彈出下拉菜單的小例子，有需要的朋友可以參考一下2013-08-08
這篇文章主要介紹了jQuery中的siblings用法,結(jié)合實(shí)例形式簡(jiǎn)單分析了jQuery中siblings的功能及用法,需要的朋友可以參考下2015-12-12
這篇文章主要介紹了JQuery異步加載PartialView的方法,涉及jQuery與asp.net交互及異步操作相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2016-06-06
easyui 中的datagrid跨頁(yè)勾選問(wèn)題的實(shí)現(xiàn)方法
很多朋友都遇到這樣的需求，easyui的datagrid分頁(yè)顯示數(shù)據(jù)，如果有需求要求勾選多條數(shù)據(jù)且不再同一頁(yè)中，easyui會(huì)保存在其他頁(yè)選中的數(shù)據(jù)嗎？小編結(jié)合資料自己整理了一篇文章，需要的的朋友參考下吧2017-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的文件上傳進(jìn)度條效果，上傳文件時(shí)顯示上傳進(jìn)度條，以百分比的形式顯示上傳進(jìn)度，感興趣的小伙伴們可以參考一下2015-11-11
jQuery實(shí)現(xiàn)的回車(chē)觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的回車(chē)觸發(fā)按鈕事件功能,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03
jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解
Validate是基于jQuery的一款輕量級(jí)驗(yàn)證插件，內(nèi)置豐富的驗(yàn)證規(guī)則，這篇文章主要介紹了jQuery.validate.js表單驗(yàn)證插件的使用代碼詳解,需要的朋友可以參考下2018-10-10
jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果
這篇文章主要介紹了jQuery+canvas實(shí)現(xiàn)的球體平拋及顏色動(dòng)態(tài)變換效果,通過(guò)jQuery結(jié)合html5的canvas技術(shù)調(diào)用時(shí)間函數(shù)實(shí)時(shí)進(jìn)行數(shù)學(xué)運(yùn)算,最終實(shí)現(xiàn)球體平拋及顏色動(dòng)態(tài)變換的效果,需要的朋友可以參考下2016-01-01
這篇文章主要介紹了jQuery統(tǒng)計(jì)上傳文件大小的方法,主要通過(guò)ActiveXObject對(duì)象來(lái)實(shí)現(xiàn),需要的朋友可以參考下2015-01-01