10個有效提升jQuery性能的小技巧

 jQuery正在成爲Web開發人員首選的JavaScript庫，作爲Web開發者，除了要了解語言和框架的應用技巧外，如何提升語言本身的性能也是開發人員應該思考的問題。文章就以jQuery爲例，爲大家提供了10個有效提升jQuery性能的小技巧。

　　1. 使用最新版本

　　jQuery一直處於不斷的開發和改進過程中。John和他的團隊不斷研究着提升程序性能的新方法。
　　如果你不想時刻關注是否有新版本，然後再花時間下載上傳，Google就又能幫你一把了。他們的服務器上存儲了大量Ajax庫供您選擇。

<!-- 利用一個簡單的script標籤調用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>

<!-- 利用一個簡單的script標籤調用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. 合併、最小化腳本


　　大部分瀏覽器都不能同時處理多個腳本文件，所以它們都是排隊加載——加載時間也相應地延長了。

　　考慮到你網站的每個頁面都會加載這些腳本，你應該考慮把它們放到單個文件中，然後利用壓縮工具把它們最小化。更小的文件無疑將帶來更快的加載速度。




　3. 用for替代each

　　原生函數總是比輔助組件更快。

　　如果遇到需要遍歷對象的情況(如從遠程接收的JSON對象)，你最好重寫你的(JSON)對象爲一個數組，數組的循環處理要容易些。

　　利用Firebug，我們能測定每個函數的執行時間。

　　var array = new Array ();

　　for (var i=0; i<10000; i++) {

　　array[i] = 0;

　　}

　　console.time('native'); //原生for函數

　　var l = array.length;

　　for (var i=0;i

　　


　　上面的結果顯示原生代碼只需2毫秒就做到的事，利用jQuery的each方法需要26毫秒。而且這還只是我在本機上測試一個基本上啥也沒做的函數的結果，當遇到更復雜的情況，例如設置css屬性或DOM操作時，時間差異肯定更大。

　　4. 用ID替代class選擇器

　　利用ID選擇對象要好得多，因爲這時jQuery會使用瀏覽器的原生函數getElementByID()來獲取對象，查詢速度很快。

　　因此，比起利用那些方便的css選擇技巧，使用更爲複雜的選擇器也是值得的(jQuery也爲我們提供了複雜選擇器)。你也可以手工書寫自己的選擇器(其實比你想象中簡單)，或者爲你想要選擇的元素指定一個有ID的容器。

　　//下例創建一個列表並且填充條目內容

　　//然後每個條目都被選擇一次

　　//首先使用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節點的前後文(如果沒有東西被傳遞，則前後文爲整個文檔)。

　　目的是連同選擇器一起，實現更爲準確的查詢。

　　所以，如果你一定要利用class來指定目標，至少爲選擇器指定上下文，以免jQuery費精力去遍歷<script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/themes/advanced/langs/zh.js"></script><script type="text/javascript" src="http://www.iteye.com/javascripts/tinymce/plugins/javaeye/langs/zh.js"></script>整個DOM文檔：

　　與其這樣寫：

　　$('.class').css ('color' '#123456');爲選擇器加上前後文比較好(expression: 目標選擇器;context: 前後文)：

　　$(expression, context)也就是說：

　　$('.class', '#class-container').css ('color', '#123456');這樣做要快得多，因爲它不用遍歷整個DOM。只要找到#class-container就好了。

　　6. 建立緩存

　　不要犯不斷重新選擇同一個東西的錯誤。你應該把你要處理的元素緩存爲一個變量。

　　更不要在一個循環裏重複選擇同一個元素!這樣做十分影響速度!

　　$('#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');

　　// 遇到循環,這樣做非常不好

　　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操作應該越少越好，因爲諸如prepend()，append()，after()的插入動作都很費時。
　　上面的例子如果用html()會更快：
　　var list = '';
　　for (var i=0; i<1000; i++) {
　　list += '
　　'+i+'
　　';
　　}
　　('#list').html (list);8. 避免使用concat()，利用join()處理長字串
　　聽起來可能挺奇怪，不過這樣做真的能提升速度，尤其是當連接特別長的字串時。
　　先建立一個數組，放入你想要串聯的東西。join()方法比字符串的concat()函數要快得多。
　　var array = [];
　　for (var i=0; i< =10000; i++) {
　　array[i] = '
　　'+i+'';
　　}
　　$('#list').html(array.join (''));近期一項由Tom Trenka發起的測試中，得出了下表的結果：
　　


　　“ += 操作符更快——比把字串片段放到數組中然後join起來還要快”，“作爲字串緩衝(string buffer)的數組在大部分瀏覽器中都比string.prototype.concat.apply方法效率更高，Windows下的Firefox 2.0.0.14例外。”
　　— Tom Trenka
　　9. 返回false值
　　您可能已經注意到，如果函數執行後不返回false，你就會被跳轉到頁面頂部。
　　如果頁面較長，這種反應是很煩人的。
　　所以，與其這樣：
　　$('#item').click (function () {
　　// stuff here
　　});不如多加一句：
　　$('#item').click (function () {
　　// stuff here
　　return false;
　　});