萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jQuery性能優化技巧分析

jQuery性能優化技巧分析

 這篇文章主要介紹了jQuery性能優化技巧,較為詳細的分析了jQuery的常見使用技巧,非常具有實用價值,需要的朋友可以參考下

   

本文較為詳細分析了jQuery性能優化技巧。分享給大家供大家參考。具體分析如下:

一、使用最新版本的jQuery類庫

jQuery新版本會較上個版本進行Bug修復和一些優化,不過需要注意的是,在更換版本之後,不要忘記測試你的代碼,畢竟有時候不是完全向後兼容的。

二、使用合適的選擇器

jQuery選擇器性能最佳到最差方式如下:

id選擇器,如$('#id', context)
標簽選擇器,如$('p', context)
class選擇器,如$('.class', context)
屬性選擇器,如$('[attribute=value]', context)
偽類選擇器,如$(':hidden', context)

補充及注意事項:

盡量給選擇器指定上下文context,可以縮小定位元素的范圍
避免id重復修飾id,錯誤代碼:var $el = $('#list #item1')
避免標簽或class修飾id,錯誤代碼: var $el = $('ul #item1')
如果使用屬性選擇器,盡量指定所屬的標簽選擇器,這樣可以加快訪問速度,正確代碼:var $el = $('a[title="link"]')

三、緩存對象

下面是性能不好的方式:

? 1 2 3 $('#home').css(...); $('#home').bind('click', function() {}); $('#home').addClass(...);

說明:jQuery會在創建每個選擇器的過程中,查找DOM,消耗時間與性能。

比較好的方式:

? 1 2 3 4 var $homeLink = $('#home', context); $homeLink.css(...); $homeLink.bind('click', function() {}); $homelink.addClass(...);

說明:永遠不要讓相同的選擇器在你的代碼裡出現多次。

四、循環時的DOM操作

使用jQuery可以很方便的添加,刪除或者修改DOM節點,但是在一些循環中,例如for(),while()或者$.each()中處理節點時,下面有個實例值得大家注意:

? 1 2 3 4 var $list = $('#list'); for(var i = 0; i < 100; i++) { $list.append('<li>' + i + '</li>'); }

說明:循環添加li節點100次,這種操作消耗的性能不低,所以更好的方式是將要添加的節點在插入DOM樹之前全部創建好,再一次性添加到DOM樹中。更好的方式:

? 1 2 3 4 5 6 var $list = $('#list'), fragment = ''; for(var i = 0; i < 100; i++) { fragment += '<li>' + i + '</li>'; } $list.append(fragment);

五、數組方式使用jQuery對象

使用jQuery選擇器獲取結果是一個jQuery對象。在性能方面,建議使用簡單for或者while循環來處理,而不是$.each(),這樣能使你的代碼更快。

另外注意:檢查長度是一個檢查jQuery對象是否存在的方式。

? 1 2 3 4 5 6 7 var $list = $('#list'); if($list) { //總是true //do something } if($list.length) { //擁有元素才返回true //do something }

六、事件代理

每一個JavaScript事件(如click,mouseover)都會冒泡到父級節點。當我們需要給多個元素調用同一個函數時,這點會很有用。

? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ... <ul id="list"> <li id="item1"></li> <li id="item2"></li> <li id="item3"></li> ... </ul> ...   var $item1 = $('#item1'), $item2 = $('#item2'), $item3 = $('#item3'); ...   $item1.click(function() {...}); $item2.click(function() {...}); $item3.click(function() {...}); ...

說明:這種方式,如果有100個li,要綁定100個事件。顯然,不科學,性能損耗很多。

更好的方式是:只需向li的父節點ul綁定一次事件,然後通過event.target獲取到點擊的當前元素。

? 1 2 3 4 5 var $list = $('#list'); $list.click(function(e) { var $currentItem = $(e.target); //e.target捕捉到當前觸發事件的目標元素 ... });

七、將你的代碼轉化成jQuery插件

如果每次都花時間去寫類似的jQuery代碼,那麼可以考慮將這部分類似的代碼變成插件,它能夠使你的代碼有更好的重用性,並且能夠有效的幫助你組織代碼。

八、使用Javascript數組join()來拼接字符串

處理長字符串的時候,使用join()方法有助於優化性能。

? 1 2 3 4 5 var arr = []; for(var i = 0; i < 100; i++){ arr[i] = '<li>' + i + '</li>'; } $list.html(arr.join(''));

九、合理利用HTML5的data屬性

HTML5的data屬性可以幫助我們插入數據,特別是前後端的數據交換。jQuery的data()方法,有效的利用HTML5的屬性,來自動得到數據。

? 1 2 3 4 5 6 7 ... <a id="info" data-info-index="23" data-role="linkInfo"></a> ...   var $infoLink = $('#info'); var infoIndex = $infoLink.data('info-index'); var type = $infoLink.data('linkInfo');

十、盡量使用原生的JavaScript方法

如:

? 1 $(this).css('color': 'blue');

優化成:

? 1 this.style.color = 'blue';

如:

? 1 $('<p></p>');

優化成:

? 1 $(document.createElement('p'));

十一、壓縮JavaScript

使用壓縮工具壓縮JavaScript文件。
發布項目時,應使用“壓縮版”JavaScript文件。

希望本文所述對大家的jQuery程序設計有所幫助。

copyright © 萬盛學電腦網 all rights reserved