欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2010年12月06日 15:11:41   作者：  
因?yàn)閖query的易用性，很多朋友使用jquery，但仍然需要注意的是性能的問(wèn)題，下面是曾祥展特為大家整理的一些技巧。

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

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

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()來(lái)減少頁(yè)面的DOM結(jié)構(gòu)改變的次數(shù)、刷新的次數(shù)

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

保持簡(jiǎn)潔風(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ù)，測(cè)試或重用。相反，我們可以使用對(duì)象封裝，將那些處理和回調(diào)函數(shù)組織并通過(guò)命名管理起來(lái)。
復(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è)選擇器是無(wú)須經(jīng)過(guò)選擇器引擎處理，在jquery中最快的選擇器是ID選擇器.因?yàn)樗苯觼?lái)自于Javascript的getElementById()方法，這是非?？?，因?yàn)樗窃a(chǎn)于瀏覽器。如果你需要選擇多個(gè)元素，這必然會(huì)涉及到DOM遍歷和循環(huán)，為了提高性能，建議從最近的ID開(kāi)始繼承。

具體指定選擇器的右側(cè)部分應(yīng)該盡可能具體，左側(cè)則不需要那么具體。
復(fù)制代碼 代碼如下:

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

避免過(guò)度的具體
復(fù)制代碼 代碼如下:

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


避免使用無(wú)定向通配符選擇器
復(fù)制代碼 代碼如下:

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

使用事件委派

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

通過(guò)事件委派一次綁定多種事件，以減少事件冗余
復(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)行，好像沒(méi)有什么錯(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)榧词共僮鞯脑貫榭掌溟_(kāi)銷(xiāo)也不少。



定義變量
變量可以定義一個(gè)聲明而不是幾個(gè)
復(fù)制代碼 代碼如下:

// 老套寫(xiě)法
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é)無(wú)止境 （http://www.cnblogs.com/zengxiangzhan/）

相關(guān)文章

最新評(píng)論