jquery提升性能最佳實(shí)踐小結(jié)

更新時(shí)間：2010年12月06日 15:11:41 作者：

因?yàn)閖query的易用性，很多朋友使用jquery，但仍然需要注意的是性能的問題，下面是曾祥展特為大家整理的一些技巧。

將jquery對(duì)象緩存起來在
for循環(huán)中，不要每次都要訪問數(shù)組的length屬性，我們應(yīng)該先將對(duì)象緩存進(jìn)一個(gè)變量然后再操作，如下所示：

 
var myLength = myArray.length; 
for (var i = 0; i < myLength; i++) { 
// 要做的事 
} 

在循環(huán)外使用append

進(jìn)行DOM操作是有代價(jià)的，如果需要往DOM中添加大量元素，你應(yīng)該一次批量完成，而不是一次一個(gè)。

復(fù)制代碼代碼如下:

 
// 別這樣 
$.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')的選擇器，會(huì)有多次遍歷查找dom元素，效率極低用document.createDocumentFragment()來減少頁面的DOM結(jié)構(gòu)改變的次數(shù)、刷新的次數(shù) 

// 或者這樣 
var myHtml = ''; 
$.each(myArray, function(i, item) { 
html += '<li>' + item + '</li>'; 
}); 
$('#ballers').html(myHtml); 

保持簡潔風(fēng)格

復(fù)制代碼代碼如下:

 
// 不理想 
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(); 
} 
}) 

慎用匿名函數(shù)
匿名函數(shù)的約束到處都是一種痛苦。他們難以調(diào)試，維護(hù)，測試或重用。相反，我們可以使用對(duì)象封裝，將那些處理和回調(diào)函數(shù)組織并通過命名管理起來。

復(fù)制代碼代碼如下:

 
// 不要這樣 
$(document).ready(function() {... 
$('#magic').click(function(e) { 
$('#yayeffects').slideUp(function() {... 
}); 
}); 
$('#happiness').load(url + ' #unicorns', function() {... 
}) 
}); 

// 較好的 
var PI = { 
onReady: function() {... 
$('#magic').click(PI.candyMtn); 
$('#happiness').load(url + ' #unicorns', PI.unicornCb); 
}, 
candyMtn: function(e) { 
$('#yayeffects').slideUp(PI.slideCb); 
}, 
slideCb: function() {... 
}, 
unicornCb: function() {... 
} 
} 
$(document).ready(PI.onReady); 

優(yōu)化選擇器
節(jié)點(diǎn)選擇和DOM操作, 根據(jù)給定的ID匹配一個(gè)元素總是使用#id去尋找element

復(fù)制代碼代碼如下:

 
// 非?？?
$('#container div.robotarm'); 
// 超級(jí)快 
$('#container').find('div.robotarm');使用$.fn.find方法更快一些，因?yàn)榈谝粋€(gè)選擇器是無須經(jīng)過選擇器引擎處理，在jquery中最快的選擇器是ID選擇器.因?yàn)樗苯觼碜杂贘avascript的getElementById()方法，這是非?？?，因?yàn)樗窃a(chǎn)于瀏覽器。如果你需要選擇多個(gè)元素，這必然會(huì)涉及到DOM遍歷和循環(huán)，為了提高性能，建議從最近的ID開始繼承。 

具體指定選擇器的右側(cè)部分應(yīng)該盡可能具體，左側(cè)則不需要那么具體。

復(fù)制代碼代碼如下:

 
// 未優(yōu)化 
$('div.data .gonzalez'); 
// 優(yōu)化后 
$('.data td.gonzalez');如果可以，盡量在選擇器靠右側(cè)的部分使用tag.class，而左側(cè)只有tag或者只有.class。 

避免過度的具體

復(fù)制代碼代碼如下:

 
$('.data table.attendees td.gonzalez'); 
// 不寫中間的會(huì)更好 
$('.data td.gonzalez');清爽的DOM結(jié)構(gòu)也有助于改善選擇器的性能，選擇器引擎可以少跑幾層去尋覓那個(gè)元素了。 

避免使用無定向通配符選擇器

復(fù)制代碼代碼如下:

 
$('.buttons > *'); // 極慢 
$('.buttons').children(); // 快很多 
$('.gender :radio'); // 無定向搜索 
$('.gender *:radio'); // 同上 
$('.gender input:radio'); // 這樣 好很多 

使用事件委派

事件委派允許你為一個(gè)容器元素（例如，一個(gè)無序列表）綁定一個(gè)事件處理程序，而不需給容器內(nèi)每個(gè)元素（例如，列表項(xiàng)）都去綁定。jQuery提供$.fn.live和$.fn.delegate。如果可能的話，你應(yīng)該使用$.fn.delegate而不是$.fn.live，因?yàn)樗∪チ瞬槐匾倪x擇需要，其明確的情況下（對(duì)$.fn.live的文檔的上下文），減少了大約80 % 的開銷。除了有性能提升的好處，事件委派也使你在往容器里添加新元素時(shí)無需重新綁定事件，因?yàn)橐呀?jīng)有了。

通過事件委派一次綁定多種事件，以減少事件冗余

復(fù)制代碼代碼如下:

 
// 不好的 (如果列表里面元素很多) 
$('li.trigger').click(handlerFn); 

// 較好的: event delegation with $.fn.live 
$('li.trigger').live('click', handlerFn); 

// 最優(yōu)的: $.fn.delegate 
$('#myList').delegate('li.trigger', 'click', handlerFn); 

移除元素
DOM操作是慢的，你應(yīng)該盡量避免去操作它。jQuery在1.4版引入了
$.fn.detach從DOM中去掉所有匹配的元素。

復(fù)制代碼代碼如下:

 
var $table = $('#myTable'); 
var $parent = table.parent(); 
$table.detach(); 
// ... 添加大量的行到表格中 
$parent.append(table); 

.detach()和.remove()一樣, 除了.detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)。當(dāng)需要移走一個(gè)元素，不久又將該元素插入DOM時(shí)，這種方法很有用。

當(dāng)大量元素修改CSS，應(yīng)該使用樣式表

如果你在用$.fn.css給多于20個(gè)元素修改CSS，考慮一下添加一個(gè)style標(biāo)簽，這樣可以速度可以提升60 % 。

復(fù)制代碼代碼如下:

 
// 多于20個(gè) 明顯慢 
$('a.swedberg').css('color', '#asd123'); 
$('<style type="text/css">a.swedberg { color : #asd123 }</style>').appendTo('head'); 

使用$.data而不是$.fn.data將$.data應(yīng)用于DOM元素比直接調(diào)用jQuery選擇結(jié)果的$.fn.data要快上10倍.雖然，這要先確定你是理解DOM元素與jQuery選擇結(jié)果之間的區(qū)別的。

復(fù)制代碼代碼如下:

 
// 常用 
$(elem).data(key, value); 
// 快十倍 
$.data(elem, key, value); 

別費(fèi)時(shí)間在空白的選擇結(jié)果上了

jQuery將不會(huì)告訴你，如果你想運(yùn)行的代碼在一個(gè)空選擇上，它會(huì)繼續(xù)運(yùn)行，好像沒有什么錯(cuò)。影響性能。

復(fù)制代碼代碼如下:

 
//太遭了，執(zhí)行了三個(gè)方法后才意識(shí)到里面是空的 
$('#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/ 
});這層保護(hù)是適用于jQuery UI widget，因?yàn)榧词共僮鞯脑貫榭掌溟_銷也不少。 

定義變量
變量可以定義一個(gè)聲明而不是幾個(gè)

復(fù)制代碼代碼如下:

 
// 老套寫法 
var test = 1; 
var test2 = function() {... 
}; 
var test3 = test2(test); 

// 新 
var test = 1, 
test2 = function() {... 
}, 
test3 = test2(test);在自動(dòng)執(zhí)行的函數(shù)，變量的定義可以完全省掉。 (function(foo, bar) {... 
})(1, 2); 

條件判斷

復(fù)制代碼代碼如下:

 
// 舊方法 
if (type == 'foo' || type == 'bar') {... 
} 

// 好方法 
if (/^(foo|bar)$/.test(type)) {... 
} 

// 查找對(duì)象 
if (({ 
foo: 1, 
bar: 1 
})[type]) {... 
} 

作者：曾祥展
出處：學(xué)無止境（http://www.cnblogs.com/zengxiangzhan/）

您可能感興趣的文章: