92福利在线,草草草影院,日本a级大片

提升jQuery性能的十個技巧

admin

2010年8月18日 15:24 本文熱度 3937

jQuery正在成為Web開發人員首選的JavaScript庫，作為Web開發者，除了要了解語言和框架的應用技巧外，如何提升語言本身的性能也是開發人員應該思考的問題……

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

　　1. 使用最新版本

　　jQuery一直處于不斷的開發和改進過程中。John和他的團隊不斷研究著提升程序性能的新方法。

jQuery

　　如果你不想時刻關注是否有新版本，然后再花時間下載上傳，Google就又能幫你一把了。他們的服務器上存儲了大量Ajax庫供您選擇。

　　另一個更為簡單快速的方法是直接使用腳本鏈接。如果要使用特定版本的jQuery，你可以使用上面的方法;如果想直接使用最新版，下面這句代碼就夠了：

　　特定版本的還可以這樣加載：

　　2. 合并、最小化腳本

　　大部分瀏覽器都不能同時處理多個腳本文件，所以它們都是排隊加載——加載時間也相應地延長了。考慮到你網站的每個頁面都會加載這些腳本，你應該考慮把它們放到單個文件中，然后利用壓縮工具(比如Dean Edwards的這款)把它們最小化。更小的文件無疑將帶來更快的加載速度。

　　引自YUI compressor，一款jQuery官方推薦的壓縮腳本的工具：JavaScript和CSS壓縮的目的是在保持腳本的執行性能的同時，減少數據傳遞的字節數(可以通過減小原始文件，也可以利用gzip。大多數產品級的網絡服務器都把gzip作為HTTP協議的一部分)。

　　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 < l; i++) {

array[i] = i;

}

console.timeEnd('native');
console.time('jquery'); //jQuery的each方法
$.each(array, function(i) {

array[i] = i;

});
console.timeEnd('jquery');

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

　　4. 用ID替代class選擇器

　　利用ID選擇對象要好得多，因為這時jQuery會使用瀏覽器的原生函數getElementByID()來獲取對象，查詢速度很快。因此，比起利用那些方便的css選擇技巧，使用更為復雜的選擇器也是值得的(jQuery也為我們提供了復雜選擇器)。

　　你也可以手工書寫自己的選擇器(其實比你想象中簡單)，或者為你想要選擇的元素指定一個有ID的容器。

以下是代碼片段：
//下例創建一個列表并且填充條目內容
//然后每個條目都被選擇一次
//首先使用class選擇
console.time('class');
var list = $('#list');
var items = '<ul>';
for (i =0; i < 1000; i++) {

items += '<li>item</li>';

}

items += '</ul>';
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 = '<ul>';
for (i = 0; i < 1000; i++) {
items += '<li id="item' + i + '">item</li>';

}

items += '</ul>';
list.html(items);
for (i = 0; i < 1000; i++) {

var s = $('#item' + i);

}
console.timeEnd('id');

　　上面的例子很好地說明了不同選擇方式之間的顯著性能差異。請看下圖，利用class來做選擇，時間無限增大，甚至超過了五秒：

5. 給選擇器指定前后文

　　如果你一定要利用class來指定目標，至少為選擇器指定上下文，以免jQuery費精力去遍歷整個DOM文檔，與其這樣寫：

以下是代碼片段：
$('.class').css ('color' '#123456');

　　也就是說：

以下是代碼片段：
　$('.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');