日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

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

網(wǎng)站建設(shè)哪家好，找成都創(chuàng)新互聯(lián)！專注于網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、微信小程序、集團企業(yè)網(wǎng)站建設(shè)等服務(wù)項目。為回饋新老客戶創(chuàng)新互聯(lián)還提供了保山免費建站歡迎大家使用！

更多jQuery內(nèi)容，推薦專題：jQuery從入門到精通

1. 使用***版本

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

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

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

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

#p#

2. 合并、最小化腳本

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

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

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 < 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毫秒。而且這還只是我在本機上測試一個基本上啥也沒做的函數(shù)的結(jié)果，當遇到更復(fù)雜的情況，例如設(shè)置css屬性或DOM操作時，時間差異肯定更大。

#p#

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. 給選擇器指定前后文

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

 
 
 
 

  
  
  
  
$('.class').css ('color' '#123456');
  
  
  
  

 
 
 
 

也就是說：

 
 
 
 

  
  
  
  
$('.class', '#class-container').css ('color', '#123456');
  
  
  
  
 
 
 
 
 

這樣做要快得多，因為它不用遍歷整個DOM。只要找到#class-container就好了。

#p#

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'); 
 
 
 
 

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

#p#

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é)果：

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é)約很多時間。

文章轉(zhuǎn)自PHP愛好者     譯者：慵云

英文原地址：http://net.tutsplus.com/tutorials/javascript-ajax/10-ways-to-instantly-increase-your-jquery-performance/

譯文原地址：http://blog.benhuoer.com/posts/10-tips-for-jquery-performance.html

分享題目：即刻提升jQuery性能的十個技巧
文章URL：http://www.dlmjj.cn/article/dpeeigj.html