jQuery正在成為Web開發(fā)人員首選的JavaScript庫，作為Web開發(fā)者，除了要了解語言和框架的應(yīng)用技巧外，如何提升語言本身的性能也是開發(fā)人員應(yīng)該思考的問題。文章就以jQuery為例，為大家提供了10個有效提升jQuery性能的小技巧。
1. 使用最新版本
jQuery一直處于不斷的開發(fā)和改進過程中。John和他的團隊不斷研究著提升程序性能的新方法。
如果你不想時刻關(guān)注是否有新版本，然后再花時間下載上傳，Google就又能幫你一把了。他們的服務(wù)器上存儲了大量Ajax庫供您選擇。
- <!-- 利用一個簡單的script標簽調(diào)用API -->
- <script type="text/javascript" src="http://www.google.com/jsapi"></script>
- <script type="text/javascript">
-
- google.load ("jquery", "1.3.2", {uncompressed: false});
-
-
- function onLoad () {
- alert ("jQuery + Google API!");
- }
-
- google.setOnLoadCallback (onLoad);
- </script>
-
- 編輯按：另一個更為簡單快速的方法是直接使用腳本鏈接。如果要使用特定版本的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>
<!-- 利用一個簡單的script標簽調(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> 編輯按：另一個更為簡單快速的方法是直接使用腳本鏈接。如果要使用特定版本的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> 2. 合并、最小化腳本
大部分瀏覽器都不能同時處理多個腳本文件，所以它們都是排隊加載——加載時間也相應(yīng)地延長了。
考慮到你網(wǎng)站的每個頁面都會加載這些腳本，你應(yīng)該考慮把它們放到單個文件中，然后利用壓縮工具把它們最小化。更小的文件無疑將帶來更快的加載速度。
3. 用for替代each
原生函數(shù)總是比輔助組件更快。
如果遇到需要遍歷對象的情況(如從遠程接收的JSON對象)，你最好重寫你的(JSON)對象為一個數(shù)組，數(shù)組的循環(huán)處理要容易些。
利用Firebug，我們能測定每個函數(shù)的執(zhí)行時間。
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
上面的結(jié)果顯示原生代碼只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且這還只是我在本機上測試一個基本上啥也沒做的函數(shù)的結(jié)果，當遇到更復(fù)雜的情況，例如設(shè)置css屬性或DOM操作時，時間差異肯定更大。
4. 用ID替代class選擇器
利用ID選擇對象要好得多，因為這時jQuery會使用瀏覽器的原生函數(shù)getElementByID()來獲取對象，查詢速度很快。
因此，比起利用那些方便的css選擇技巧，使用更為復(fù)雜的選擇器也是值得的(jQuery也為我們提供了復(fù)雜選擇器)。你也可以手工書寫自己的選擇器(其實比你想象中簡單)，或者為你想要選擇的元素指定一個有ID的容器。
//下例創(chuàng)建一個列表并且填充條目內(nèi)容
//然后每個條目都被選擇一次
//首先使用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');
上面的例子很好地說明了不同選擇方式之間的顯著性能差異。請看下圖，利用class來做選擇，時間無限增大，甚至超過了五秒：
5. 給選擇器指定前后文
jQuery的參考文檔里說：
傳遞給jQuery() 原始DOM節(jié)點的前后文(如果沒有東西被傳遞，則前后文為整個文檔)。
目的是連同選擇器一起，實現(xiàn)更為準確的查詢。
所以，如果你一定要利用class來指定目標，至少為選擇器指定上下文，以免jQuery費精力去遍歷整個DOM文檔：
與其這樣寫：
$('.class').css ('color' '#123456');為選擇器加上前后文比較好(expression: 目標選擇器;context: 前后文)：
$(expression, context)也就是說：
$('.class', '#class-container').css ('color', '#123456');這樣做要快得多，因為它不用遍歷整個DOM。只要找到#class-container就好了。
6. 建立緩存
不要犯不斷重新選擇同一個東西的錯誤。你應(yīng)該把你要處理的元素緩存為一個變量。
更不要在一個循環(huán)里重復(fù)選擇同一個元素!這樣做十分影響速度!
$('#item').css('color', '#123456');
$('#item').html('hello');
$('#item').css('background-color', '#ffffff');
// 這樣寫更好
$('#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');如下圖所示，即使是相對較短的迭代，緩存的效果還是很明顯的。
7. 避免DOM操作
DOM操作應(yīng)該越少越好，因為諸如prepend()，append()，after()的插入動作都很費時。
上面的例子如果用html()會更快：
var list = '';
for (var i=0; i<1000; i++) {
list += '
'+i+'
';
}
('#list').html (list);8. 避免使用concat()，利用join()處理長字串
聽起來可能挺奇怪，不過這樣做真的能提升速度，尤其是當連接特別長的字串時。
先建立一個數(shù)組，放入你想要串聯(lián)的東西。join()方法比字符串的concat()函數(shù)要快得多。
var array = [];
for (var i=0; i< =10000; i++) {
array[i] = '
'+i+'';
}
$('#list').html(array.join (''));近期一項由Tom Trenka發(fā)起的測試中，得出了下表的結(jié)果：
“ += 操作符更快——比把字串片段放到數(shù)組中然后join起來還要快”，“作為字串緩沖(string buffer)的數(shù)組在大部分瀏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。”
— Tom Trenka
9. 返回false值
您可能已經(jīng)注意到，如果函數(shù)執(zhí)行后不返回false，你就會被跳轉(zhuǎn)到頁面頂部。
如果頁面較長，這種反應(yīng)是很煩人的。
所以，與其這樣：
$('#item').click (function () {
// stuff here
});不如多加一句：
$('#item').click (function () {
// stuff here
return false;
});
10. 額外小貼士 – 小抄和參考文檔
這條建議并不直接提升函數(shù)的執(zhí)行速度，不過如果你肯花時間在這上面，研究研究這些小抄和參考文檔，你將來定能節(jié)約很多時間。
