本文較為詳細分析了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"]')
三、快取物件
以下是性能不好的方式：
$('#home').css(...);
$('#home').bind('click', function() {});
$('#home').addClass(...);說明:jQuery會在建立每個選擇器的過程中，尋找DOM，消耗時間與效能。
比較好的方式：
var $homeLink = $('#home', context);
$homeLink.css(...);
$homeLink.bind('click', function() {});
$homelink.addClass(...);說明:永遠不要讓相同的選擇器在你的程式碼裡出現多次。
四、循環時的DOM操作
使用jQuery可以很方便的添加，刪除或修改DOM節點，但是在一些循環中，例如for()，while()或$.each()中處理節點時，下面有個實例值得大家注意:
var $list = $('#list');
for(var i = 0; i < 100; i++) {
$list.append('<li>' + i + '</li>');
}說明:循環添加li節點100次，這種操作消耗的性能不低，所以更好的方式是將要添加的節點在插入DOM樹之前全部創建好，再一次性添加到DOM樹中。更好的方式：
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物件是否存在的方式。
var $list = $('#list');
if($list) { //总是true
//do something
}
if($list.length) { //拥有元素才返回true
//do something
}六、事件代理
每一個JavaScript事件(如click,mouseover)都會冒泡到父級節點。當我們需要給多個元素呼叫同一個函數時，這點會很有用。
...
<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取得到點擊的目前元素。
var $list = $('#list');
$list.click(function(e) {
var $currentItem = $(e.target); //e.target捕捉到当前触发事件的目标元素
...
});七、將你的程式碼轉換成jQuery外掛
如果每次都花時間去寫類似的jQuery程式碼，那麼可以考慮將這部分類似的程式碼變成插件，它能夠使你的程式碼有更好的重用性，並且能夠有效的幫助你組織程式碼。
八、使用Javascript數組join()來拼接字串
處理長字串的時候，使用join()方法有助於最佳化效能。
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的屬性，來自動取得資料。
...
<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方法
如：
$(this).css('color': 'blue');
優化成：
this.style.color = 'blue';
如：
$('<p></p>');
優化成:
$(document.createElement('p'));十一、壓縮JavaScript
使用壓縮工具壓縮JavaScript檔案。
發布專案時，應使用「壓縮版」JavaScript檔案。
希望本文所述對大家的jQuery程式設計有所幫助。
