jQuery提升性能技巧及個人總結
1、將jquery對象緩存起來在
for循環中，不要每次都要訪問數組的length屬性，我們應該先將對象緩存進一個變量然后再操作，如下所示：
代碼如下:
var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
// 要做的事
}
代碼塊中，要緩存對象：
代碼如下：
$('#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');
2、在循環外使用append，DOM操作應越少越好
進行DOM操作是有代價的，如果需要往DOM中添加大量元素，你應該一次批量完成，而不是一次一個。
代碼如下:
// 別這樣
$.each(reallyLongArray, function(count, item) {
var newLI = '<li>' + item + '</li>';
$('#ballers').append(newLI);
});
//較好的做法
var frag = document.createDocumentFragment();
$.each(reallyLongArray, function(count, item) {
var newLI = '<li>' + item + '</li>';
frag.appendChild(newLI[0]);
});
$('#ballers')[0].appendChild(frag);不要在each()里用$('#id')的選擇器，會有多次遍歷查找dom元素，效率極低用document.createDocumentFragment()來減少頁面的DOM結構改變的次數、刷新的次數
// 或者這樣
var myHtml = '';
$.each(myArray, function(i, item) {
html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);
3、保持簡潔風格
代碼如下:
// 不理想
if ($ventfade.data('currently') != 'showing') {
$ventfade.stop();
}
if ($venthover.data('currently') != 'showing') {
$venthover.stop();
}
if ($spans.data('currently') != 'showing') {
$spans.stop();
}
// 較好的
var elems = [$ventfade, $venthover, $spans];
$.each(elems, function(k, v) {
if (v.data('currently') != 'showing') {
v.stop();
}
})
4、優化選擇器
節點選擇和DOM操作, 根據給定的ID匹配一個元素總是使用#id去尋找element
代碼如下:
// 非常快
$('#container div.robotarm');
// 超級快
$('#container').find('div.robotarm');使用$.fn.find方法更快一些，因為第一個選擇器是無須經過選擇器引擎處理，在jquery中最快的選擇器是ID選擇器.因為它直接來自于Javascript的getElementById()方法，這是非常快，因為它是原產于瀏覽器。如果你需要選擇多個元素，這必然會涉及到DOM遍歷和循環，為了提高性能，建議從最近的ID開始繼承。
具體指定選擇器的右側部分應該盡可能具體，左側則不需要那么具體。
復制代碼 代碼如下:
// 未優化
$('div.data .gonzalez');
// 優化后
$('.data td.gonzalez');如果可以，盡量在選擇器靠右側的部分使用tag.class，而左側只有tag或者只有.class。
避免過度的具體
復制代碼 代碼如下:
$('.data table.attendees td.gonzalez');
// 不寫中間的會更好
$('.data td.gonzalez');清爽的DOM結構也有助于改善選擇器的性能，選擇器引擎可以少跑幾層去尋覓那個元素了。
5、避免使用無定向通配符選擇器
復制代碼 代碼如下:
$('.buttons > *'); // 極慢
$('.buttons').children(); // 快很多
$('.gender :radio'); // 無定向搜索
$('.gender *:radio'); // 同上
$('.gender input:radio'); // 這樣 好很多
6、當大量元素修改CSS，應該使用樣式表
如果你在用$.fn.css給多于20個元素修改CSS，考慮一下添加一個style標簽，這樣可以速度可以提升60 % 。
代碼如下:
// 多于20個 明顯慢
$('a.swedberg').css('color', '#asd123');
$('<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head');
7、使用$.data而不是$.fn.data將$.data應用于DOM元素比直接調用jQuery選擇結果的$.fn.data要快上10倍.雖然，這要先確定你是理解DOM元素與jQuery選擇結果之間的區別的。
代碼如下:
// 常用
$(elem).data(key, value);
// 快十倍
$.data(elem, key, value);
8、別費時間在空白的選擇結果上了
jQuery將不會告訴你，如果你想運行的代碼在一個空選擇上，它會繼續運行，好像沒有什么錯。影響性能。
代碼如下:
//太遭了，執行了三個方法后才意識到里面是空的
$('#nosuchthing').slideUp();
// 較好
var $mySelection = $('#nosuchthing');
if ($mySelection.length) {
mySelection.slideUp();
}
// 最佳: add a doOnce plugin
jQuery.fn.doOnce = function(func) {
this.length && func.apply(this);
return this;
}
$('li.cartitems').doOnce(function() {
// make it ajax! \o/
});這層保護是適用于jQuery UI widget，因為即使操作的元素為空其開銷也不少。
9、條件判斷
代碼如下:
// 舊方法
if (type == 'foo' || type == 'bar') {...
}
// 好方法
if (/^(foo|bar)$/.test(type)) {...
}
// 查找對象
if (({
foo: 1,
bar: 1
})[type]) {...
}
10、使用最新的JQuery版本
11、返回false防止默認行為
代碼如下:
$('popup').click(function(){
// Launch popup code
return false;
});
參考鏈接：
http://www.jb51.net/article/25530.htm
http://blog.benhuoer.com/posts/10-tips-for-jquery-performance.html