jQuery代碼優(yōu)化 遍歷篇
jQuery對(duì)象棧
jQuery內(nèi)部維護(hù)著一個(gè)jQuery對(duì)象棧。每個(gè)遍歷方法都會(huì)找到一組新元素(一個(gè)jQuery對(duì)象),然后jQuery會(huì)把這組元素推入到棧中。而每個(gè)jQuery對(duì)象都有三個(gè)屬性:context、selector和prevObject,其中的prevObject屬性就指向這個(gè)對(duì)象棧中的前一個(gè)對(duì)象,而通過(guò)這個(gè)屬性可以回溯到最初的DOM元素集。
jQuery為我們操作這個(gè)內(nèi)部對(duì)象棧提供了兩個(gè)非常有用的方法:
.end()
.andSelf()
調(diào)用第一個(gè)方法只是簡(jiǎn)單地彈出一個(gè)對(duì)象(結(jié)果就是回到前一個(gè)jQuery對(duì)象)。第二個(gè)方法更有意思,調(diào)用它會(huì)在棧中回溯一個(gè)位置,然后把兩個(gè)位置上的元素集組合起來(lái),并把這個(gè)新的、組合之后的元素集推入棧的上方。
利用這個(gè)DOM元素??梢詼p少重復(fù)的查詢和遍歷的操作,而減少重復(fù)操作也正是優(yōu)化jQuery代碼性能的關(guān)鍵所在。
優(yōu)化示例
下面是一個(gè)函數(shù)(省略了前后代碼),用于實(shí)現(xiàn)表格行條紋效果:
function stripe() {
$('#news').find('tr.alt').removeClass('alt');
$('#news tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
stripe()函數(shù)兩次使用了ID選擇符#news查找元素:一次是為了從帶有alt類的行中刪除該類,另一次是為了給新選中的行添加這個(gè)類。
優(yōu)化這個(gè)函數(shù)的方法有兩個(gè),一是連綴。
連綴
連綴優(yōu)化利用的就是jQuery的內(nèi)部對(duì)象棧和.end()方法。優(yōu)化后的代碼如下:
function stripe() {
$('#news').
find('tr.alt').removeClass('alt').end()
find('tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
第一次調(diào)用.find()會(huì)把表格行推到棧上,然后的.end()方法則把這些行彈出,從而讓下一次調(diào)用.find()仍然是在#news表格上執(zhí)行操作。這樣就把兩次選擇符查找減少為一次。
另一個(gè)優(yōu)化方法是緩存。
緩存
所謂緩存,在這里就是把之前操作的結(jié)果保存起來(lái),以便將來(lái)重用。優(yōu)化后的代碼如下:
var $news = $('#news');
function stripe() {
$news.find('tr.alt').removeClass('alt');
$news.find('tbody').each(function() {
$(this).children(':visible').has('td')
.filter(':group(3)').addClass('alt');
});
}
與連綴的方法相比,緩存方式稍嫌冗長(zhǎng),因?yàn)轭~外創(chuàng)建了一個(gè)用于保存jQuery對(duì)象的變量。但從另一個(gè)角度來(lái)看,這種方式在代碼中可以實(shí)現(xiàn)對(duì)選中元素的兩次操作完全分離,而這也許可以滿足我們其他情況下的需求。同樣,因?yàn)榭梢园堰x中的元素保存在stripe()函數(shù)之外,也就避免了每次調(diào)用函數(shù)時(shí)重復(fù)查詢選擇符的操作。
結(jié)論
利用jQuery的內(nèi)部對(duì)象棧和緩存,可以減少重復(fù)的DOM查詢及遍歷,從而提高腳本執(zhí)行速度。
因?yàn)楦鶕?jù)ID在頁(yè)面中選擇元素速度極快,以上兩個(gè)例子在優(yōu)化前后不會(huì)有明顯的性能差異。在實(shí)際編碼中,應(yīng)該選擇可讀性最好、最容易維護(hù)的方式。如果真的遇到了性能瓶頸,以上優(yōu)化技術(shù)都可以起到立竿見影的效果。
(注:本文基于《jQuery基礎(chǔ)教程(第3版)》相關(guān)章節(jié)內(nèi)容編撰而成。)
相關(guān)文章
jQuery Mobile操作HTML5的常用函數(shù)總結(jié)
jQuery Mobile是針對(duì)移動(dòng)端開發(fā)的JavaScript框架,正如其名基于jQuery庫(kù),jQuery Mobile主要被用來(lái)操作HTML5設(shè)計(jì)頁(yè)面UI,下面就來(lái)看一下jQuery Mobile操作HTML5的常用函數(shù)總結(jié):2016-05-05jQuery EasyUI Layout實(shí)現(xiàn)tabs標(biāo)簽的實(shí)例
這篇文章主要介紹了jQuery EasyUI Layout實(shí)現(xiàn)tabs標(biāo)簽的實(shí)例的相關(guān)資料,希望通過(guò)本文能幫助到大家實(shí)現(xiàn)這樣的功能,需要的朋友可以參考下2017-09-09jquery.validate.js插件使用經(jīng)驗(yàn)記錄
工作中使用到了jquery.validate.js插件,下面將其用法整理一下,方便以后使用2014-07-07jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法
jQuery對(duì)表格的操作是老生常談的問(wèn)題了,各種插件也到處都是,這里我們還是來(lái)從技術(shù)著手jQuery增加和刪除表格項(xiàng)目及實(shí)現(xiàn)表格項(xiàng)目排序的方法:2016-05-05jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的手動(dòng)拖動(dòng)控制進(jìn)度條效果,涉及jQuery事件響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-04-04jQuery 移動(dòng)端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動(dòng)端artEditor富文本編輯器 的相關(guān)資料,需要的朋友可以參考下2016-01-01jquery 卷簾效果實(shí)現(xiàn)代碼(不同方向)
卷簾效果在生活中應(yīng)用比較廣泛,因?yàn)樗囊曈X(jué)效果比較不錯(cuò),本文用代碼實(shí)現(xiàn)一個(gè),感興趣的朋友不妨了解一下,或許對(duì)你學(xué)習(xí)jquery有所幫助,好了話不多說(shuō)切入正題2013-02-02使用基于jquery的gamequery插件做JS乒乓球游戲
現(xiàn)在jquery比較流行,用js做游戲的也越來(lái)越多了,雖然現(xiàn)在html5出來(lái)了,但實(shí)際上要用html5做點(diǎn)啥出來(lái)還是得靠javascript,所以學(xué)好js是非常重要的2011-07-07用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條實(shí)現(xiàn)代碼
用jquery實(shí)現(xiàn)自定義風(fēng)格的滑動(dòng)條的實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-04-04