国产午夜不卡,国产区欧美区一区二区精品区,国产高清天天看在线

提升jQuery性能的十個(gè)技巧

當(dāng)前位置：點(diǎn)晴教程→知識(shí)管理交流 →『技術(shù)文檔交流』

admin

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

jQuery正在成為Web開(kāi)發(fā)人員首選的JavaScript庫(kù)，作為Web開(kāi)發(fā)者，除了要了解語(yǔ)言和框架的應(yīng)用技巧外，如何提升語(yǔ)言本身的性能也是開(kāi)發(fā)人員應(yīng)該思考的問(wèn)題……

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

　　1. 使用最新版本

　　jQuery一直處于不斷的開(kāi)發(fā)和改進(jìn)過(guò)程中。John和他的團(tuán)隊(duì)不斷研究著提升程序性能的新方法。

jQuery

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

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

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

　　2. 合并、最小化腳本

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

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

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

array[i] = i;

}

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

array[i] = i;

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

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

　　4. 用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 = '<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');

　　上面的例子很好地說(shuō)明了不同選擇方式之間的顯著性能差異。請(qǐng)看下圖，利用class來(lái)做選擇，時(shí)間無(wú)限增大，甚至超過(guò)了五秒：

5. 給選擇器指定前后文

　　如果你一定要利用class來(lái)指定目標(biāo)，至少為選擇器指定上下文，以免jQuery費(fèi)精力去遍歷整個(gè)DOM文檔，與其這樣寫(xiě)：

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

　　也就是說(shuō)：

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

　　這樣做要快得多，因?yàn)樗挥帽闅v整個(gè)DOM。只要找到#class-container就好了。

　　6. 建立緩存

　　不要犯不斷重新選擇同一個(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');

　　如下圖所示，即使是相對(duì)較短的迭代，緩存的效果還是很明顯的。

　　7. 避免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 += '<li>' + i + '</li>';

}

$('#list').html (list);

　　8. 避免使用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] = '<li>' + i + '</li>';

}

$('#list').html(array.join (''));

　　近期一項(xiàng)由Tom Trenka發(fā)起的測(cè)試中，得出了下表的結(jié)果：

9. 返回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;
);

　　10. 額外小貼士 – 小抄和參考文檔

　　這條建議并不直接提升函數(shù)的執(zhí)行速度，不過(guò)如果你肯花時(shí)間在這上面，研究研究這些小抄和參考文檔，你將來(lái)定能節(jié)約很多時(shí)間。

該文章在 2010/8/18 15:24:03 編輯過(guò)

關(guān)鍵字查詢(xún)

技巧

相關(guān)文章

正在查詢(xún)...

點(diǎn)晴ERP是一款針對(duì)中小制造業(yè)的專(zhuān)業(yè)生產(chǎn)管理軟件系統(tǒng),系統(tǒng)成熟度和易用性得到了國(guó)內(nèi)大量中小企業(yè)的青睞。

點(diǎn)晴PMS碼頭管理系統(tǒng)主要針對(duì)港口碼頭集裝箱與散貨日常運(yùn)作、調(diào)度、堆場(chǎng)、車(chē)隊(duì)、財(cái)務(wù)費(fèi)用、相關(guān)報(bào)表等業(yè)務(wù)管理，結(jié)合碼頭的業(yè)務(wù)特點(diǎn)，圍繞調(diào)度、堆場(chǎng)作業(yè)而開(kāi)發(fā)的。集技術(shù)的先進(jìn)性、管理的有效性于一體，是物流碼頭及其他港口類(lèi)企業(yè)的高效ERP管理信息系統(tǒng)。

點(diǎn)晴WMS倉(cāng)儲(chǔ)管理系統(tǒng)提供了貨物產(chǎn)品管理,銷(xiāo)售管理,采購(gòu)管理,倉(cāng)儲(chǔ)管理,倉(cāng)庫(kù)管理,保質(zhì)期管理,貨位管理,庫(kù)位管理,生產(chǎn)管理,WMS管理系統(tǒng),標(biāo)簽打印,條形碼,二維碼管理,批號(hào)管理軟件。

點(diǎn)晴免費(fèi)OA是一款軟件和通用服務(wù)都免費(fèi)，不限功能、不限時(shí)間、不限用戶(hù)的免費(fèi)OA協(xié)同辦公管理系統(tǒng)。

精品秘无码一区二区三区老师-精品秘一区二三区免费雷安-精品蜜桃秘一区二区三区-精品蜜桃秘一区二区三区粉嫩-精品蜜桃一区二区三区-精品蜜臀国产aⅴ一区二区三区

提升jQuery性能的十個(gè)技巧