jQuery查找dom的幾種方法效率詳解
前言
關(guān)于這個(gè)問題的產(chǎn)生由于我們前端組每個(gè)人的編碼習(xí)慣的差異,最主要的還是因?yàn)榇a的維護(hù)性問題。在此基礎(chǔ)上,我對(duì)jQuery源碼(1.11.3)查找dom節(jié)點(diǎn)相關(guān)的內(nèi)容進(jìn)行了仔細(xì)的查閱,雖然并不能理解的很深入 。。同時(shí)基于對(duì)瀏覽器console對(duì)象的了解產(chǎn)生了一系列之后的問題和分析,對(duì)jQuery最常用的三種dom查找方式進(jìn)行了一個(gè)查找效率和性能方面的比較分析。
首先我們要用到的是console.time()和console.timeEnd()這兩個(gè)成對(duì)出現(xiàn)的console對(duì)象的方法,該方法的用法是將他們兩者之間的代碼段執(zhí)行并輸出所消耗的執(zhí)行時(shí)間,并且兩者內(nèi)傳入的字符串命名須統(tǒng)一才能生效,例如:
console.time('Scott');
console.log('seven');
console.timeEnd('Scott');
seven
Scott: 0.256ms
代碼段中三處一致才是正確的用法。
正文
接下來(lái)我們來(lái)討論我們常用的jQuery查找dom方式:
1.$(‘.parent .child'); 2.$(‘.parent').find(‘.child'); 3.$(‘.child','.parent');
其中方式1和方式3都是基于jQuery的selector和context的查找方式,既我們最常用的jQuery()或者$() ,
詳細(xì)即為:
jQuery = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
// Need init if jQuery is called (just allow error to be thrown if not included)
return new jQuery.fn.init( selector, context );
}
基于jQuery(1.11.3)70行處,為該方法的入口,他做的所有事情就是創(chuàng)建了一個(gè)jquery.fn上的init方法的對(duì)象,我們?cè)賮?lái)細(xì)看這個(gè)對(duì)象是什么:
init = jQuery.fn.init = function( selector, context ) {
var match, elem;
// HANDLE: $(""), $(null), $(undefined), $(false)
if ( !selector ) {
return this;
}
// Handle HTML strings
if ( typeof selector === "string" ) {
if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
// Assume that strings that start and end with <> are HTML and skip the regex check
match = [ null, selector, null ];
} else {
match = rquickExpr.exec( selector );
}
// Match html or make sure no context is specified for #id
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
if ( match[1] ) {
context = context instanceof jQuery ? context[0] : context;
// scripts is true for back-compat
// Intentionally let the error be thrown if parseHTML is not present
jQuery.merge( this, jQuery.parseHTML(
match[1],
context && context.nodeType ? context.ownerDocument || context : document,
true
) );
// HANDLE: $(html, props)
if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
for ( match in context ) {
// Properties of context are called as methods if possible
if ( jQuery.isFunction( this[ match ] ) ) {
this[ match ]( context[ match ] );
// ...and otherwise set as attributes
} else {
this.attr( match, context[ match ] );
}
}
}
return this;
// HANDLE: $(#id)
} else {
elem = document.getElementById( match[2] );
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if ( elem && elem.parentNode ) {
// Handle the case where IE and Opera return items
// by name instead of ID
if ( elem.id !== match[2] ) {
return rootjQuery.find( selector );
}
// Otherwise, we inject the element directly into the jQuery object
this.length = 1;
this[0] = elem;
}
this.context = document;
this.selector = selector;
return this;
}
// HANDLE: $(expr, $(...))
} else if ( !context || context.jquery ) {
return ( context || rootjQuery ).find( selector );
// HANDLE: $(expr, context)
// (which is just equivalent to: $(context).find(expr)
} else {
return this.constructor( context ).find( selector );
}
// HANDLE: $(DOMElement)
} else if ( selector.nodeType ) {
this.context = this[0] = selector;
this.length = 1;
return this;
// HANDLE: $(function)
// Shortcut for document ready
} else if ( jQuery.isFunction( selector ) ) {
return typeof rootjQuery.ready !== "undefined" ?
rootjQuery.ready( selector ) :
// Execute immediately if ready is not present
selector( jQuery );
}
if ( selector.selector !== undefined ) {
this.selector = selector.selector;
this.context = selector.context;
}
return jQuery.makeArray( selector, this );
}
基于jQuery(1.11.3) 2776行處,該方法比較長(zhǎng),我就來(lái)大概說一下我對(duì)這個(gè)方法的了解:這里主要就是做了先對(duì)selector的判斷,在判斷完后,查找context如果存在就繼續(xù)做對(duì)有context存在情況的處理,沒有則進(jìn)行沒有context情況的處理,而方式1和方式3:
1.$(‘.parent .child'); 3.$(‘.child','.parent');
他們都要進(jìn)入相同的判斷步驟,即上面簡(jiǎn)要說明的判斷流程,等到1和3判斷完后所花費(fèi)的時(shí)間基本差不多,但是1內(nèi)部的選擇器還需要花費(fèi)時(shí)間去進(jìn)行sizzle相關(guān)查找,得出:
- 方式1.
$(‘.parent .child');走完流程花費(fèi)的時(shí)間:a; - 方式3.
$(‘.child','.parent');走完流程花費(fèi)的時(shí)間:a; 幾乎已經(jīng)找到dom節(jié)點(diǎn) - 方式1.
$(‘.parent .child');sizzle相關(guān)查找選擇器.parent .child花費(fèi)的時(shí)間:b; - 所以得出初步結(jié)論:
- 方式3.
$(‘.child','.parent');花費(fèi)的時(shí)間:a; - 方式1.
$(‘.parent .child');花費(fèi)的時(shí)間:a + b; - 方式3優(yōu)于方式1
接下來(lái)我們來(lái)看實(shí)際的運(yùn)行結(jié)果:

以百度頁(yè)面為例,我們隨便找出一組滿足的范圍來(lái)查找,博主進(jìn)行多次測(cè)試,方式3的查找效率均快于方式1,且方式3的查找速度基本為方式1的3倍左右,即:

接下來(lái)我們我們加入jQuery的find方法進(jìn)行比較,即為:
- 方式1.
$(‘.parent .child'); - 方式2.
$(‘.parent').find(‘.child'); - 方式3.
$(‘.child','.parent');
由于我們已有了之前的判斷,基于他們?nèi)叨家M(jìn)行jQuery()的查找,所以三者都在此花費(fèi)a的查找時(shí)間,此時(shí)方式3已經(jīng)基本找到了:
- 方式3.
$(‘.child','.parent');花費(fèi)時(shí)間:a;
接下來(lái)方式1進(jìn)行 ‘ .parent .child '選擇器的查找,方式2進(jìn)行jQuery的find方法查找,在此列出find的具體內(nèi)容:
find: function( selector ) {
var i,
ret = [],
self = this,
len = self.length;
if ( typeof selector !== "string" ) {
return this.pushStack( jQuery( selector ).filter(function() {
for ( i = 0; i < len; i++ ) {
if ( jQuery.contains( self[ i ], this ) ) {
return true;
}
}
}) );
}
for ( i = 0; i < len; i++ ) {
jQuery.find( selector, self[ i ], ret );
}
// Needed because $( selector, context ) becomes $( context ).find( selector )
ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
ret.selector = this.selector ? this.selector + " " + selector : selector;
return ret;
}
基于jQuery(1.11.3) 2716行處,在此我們可以看出find的過程比較簡(jiǎn)單,相較于方式1查找復(fù)雜的選擇器(在查找選擇器的過程中需要排除很多的情況,更多的時(shí)間花費(fèi)在處理字符串上,即處理出我們想要表達(dá)的選擇器)更高效一點(diǎn),我們得出方式2優(yōu)于方式1,下面我們拿三者來(lái)進(jìn)行比較:

我們可以看出,方式1最慢,方式2和方式3不相上下,方式3略勝一籌,基本吻合我們的初衷,即為:
在基于jQuery查找dom的過程中能使用jquery的查找方式就使用,盡量不寫復(fù)雜的選擇器來(lái)表達(dá)我們想要查找的dom,效率極低。相反使用jquery的查找方式我們就能盡量排除復(fù)雜選擇器的情況,極大提高查找效率。
由于方式2的使用可能會(huì)受限,所以在此我推薦大家使用方式3,即為:

總結(jié)
好了,以上就是這篇文文章的全部?jī)?nèi)容了,寫到這里,突然感覺好像對(duì)自己并沒有什么(luan)用,寫的好像我的編碼能力已經(jīng)強(qiáng)到了來(lái)拼dom查找效率的地步 。希望能對(duì)有需要的朋友們有一定的幫助吧。
- jquery根據(jù)屬性和index來(lái)查找屬性值并操作
- jquery 輸入框查找關(guān)鍵字并提亮顏色的實(shí)例代碼
- jQuery查找和過濾_動(dòng)力節(jié)點(diǎn)節(jié)點(diǎn)Java學(xué)院整理
- JQuery查找子元素find()和遍歷集合each的方法總結(jié)
- jquery的父、子、兄弟節(jié)點(diǎn)查找,節(jié)點(diǎn)的子節(jié)點(diǎn)循環(huán)方法
- jQuery查找節(jié)點(diǎn)方法完整實(shí)例
- jQuery查找節(jié)點(diǎn)并獲取節(jié)點(diǎn)屬性的方法
- jQuery選擇器總結(jié)之常用元素查找方法
- JQuery元素快速查找與操作
相關(guān)文章
jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV功能
這篇文章主要介紹了jQuery除指定區(qū)域外點(diǎn)擊任何地方隱藏DIV的相關(guān)資料,代碼簡(jiǎn)單易懂,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-11-11
jQuery UI Dialog 創(chuàng)建友好的彈出對(duì)話框?qū)崿F(xiàn)代碼
jQuery UI Dialog是jQuery UI的彈出對(duì)話框組件,使用它可以創(chuàng)建各種美觀的彈出對(duì)話框;它可以設(shè)置對(duì)話框的標(biāo)題、內(nèi)容,并且使對(duì)話框可以拖動(dòng)、調(diào)整大小、及關(guān)閉;平常主要用來(lái)替代瀏覽囂自帶的alert、confirm、open等方法2012-04-04
jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08
jQuery中insertBefore()方法用法實(shí)例
這篇文章主要介紹了jQuery中insertBefore()方法用法,實(shí)例分析了insertBefore()方法的功能、定義及把匹配的元素插入到另一個(gè)指定的元素集合前面的使用技巧,需要的朋友可以參考下2015-01-01
JQuery Highcharts 動(dòng)態(tài)生成圖表的方法
動(dòng)態(tài)圖表生成方法有很多,在接下來(lái)的文章中將為大家介紹下使用JQuery Highcharts是如何實(shí)現(xiàn)的2013-11-11
關(guān)于兩個(gè)jQuery(js)特效沖突的bug的解決辦法
下面小編就為大家?guī)?lái)一篇關(guān)于兩個(gè)jQuery(js)特效沖突的bug的解決辦法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享 給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2016-09-09
jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框?qū)嵗a
這篇文章主要介紹了jQuery實(shí)現(xiàn)動(dòng)態(tài)添加和刪除input框,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03
jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效代碼分享
這篇文章主要介紹了jQuery右側(cè)選項(xiàng)卡焦點(diǎn)圖片輪播特效,一段清新可愛的焦點(diǎn)圖輪播代碼,有需要的小伙伴可以參考下2015-09-09
基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果
這篇文章主要為大家詳細(xì)介紹了基于jQuery實(shí)現(xiàn)點(diǎn)擊列表加載更多效果的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-05-05
jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換
本篇文章主要是對(duì)使用jQuery簡(jiǎn)單實(shí)現(xiàn)banner圖片切換的示例代碼進(jìn)行了介紹,需要的朋友可以過來(lái)參考下,希望對(duì)大家有所幫助2014-01-01

