jQuery查找dom的幾種方法效率詳解
前言
關(guān)于這個問題的產(chǎn)生由于我們前端組每個人的編碼習(xí)慣的差異,最主要的還是因為代碼的維護性問題。在此基礎(chǔ)上,我對jQuery源碼(1.11.3)查找dom節(jié)點相關(guān)的內(nèi)容進行了仔細的查閱,雖然并不能理解的很深入 。。同時基于對瀏覽器console對象的了解產(chǎn)生了一系列之后的問題和分析,對jQuery最常用的三種dom查找方式進行了一個查找效率和性能方面的比較分析。
首先我們要用到的是console.time()
和console.timeEnd()
這兩個成對出現(xiàn)的console對象的方法,該方法的用法是將他們兩者之間的代碼段執(zhí)行并輸出所消耗的執(zhí)行時間,并且兩者內(nèi)傳入的字符串命名須統(tǒng)一才能生效,例如:
console.time('Scott'); console.log('seven'); console.timeEnd('Scott'); seven Scott: 0.256ms
代碼段中三處一致才是正確的用法。
正文
接下來我們來討論我們常用的jQuery查找dom方式:
1.$(‘.parent .child'); 2.$(‘.parent').find(‘.child'); 3.$(‘.child','.parent');
其中方式1和方式3都是基于jQuery的selector和context的查找方式,既我們最常用的jQuery()
或者$()
,
詳細即為:
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)建了一個jquery.fn
上的init方法的對象,我們再來細看這個對象是什么:
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行處,該方法比較長,我就來大概說一下我對這個方法的了解:這里主要就是做了先對selector的判斷,在判斷完后,查找context如果存在就繼續(xù)做對有context存在情況的處理,沒有則進行沒有context情況的處理,而方式1和方式3:
1.$(‘.parent .child'); 3.$(‘.child','.parent');
他們都要進入相同的判斷步驟,即上面簡要說明的判斷流程,等到1和3判斷完后所花費的時間基本差不多,但是1內(nèi)部的選擇器還需要花費時間去進行sizzle相關(guān)查找,得出:
- 方式1.
$(‘.parent .child');
走完流程花費的時間:a; - 方式3.
$(‘.child','.parent');
走完流程花費的時間:a; 幾乎已經(jīng)找到dom節(jié)點 - 方式1.
$(‘.parent .child');
sizzle相關(guān)查找選擇器.parent .child
花費的時間:b; - 所以得出初步結(jié)論:
- 方式3.
$(‘.child','.parent');花
費的時間:a; - 方式1.
$(‘.parent .child');
花費的時間:a + b; - 方式3優(yōu)于方式1
接下來我們來看實際的運行結(jié)果:
以百度頁面為例,我們隨便找出一組滿足的范圍來查找,博主進行多次測試,方式3的查找效率均快于方式1,且方式3的查找速度基本為方式1的3倍左右,即:
接下來我們我們加入jQuery的find方法進行比較,即為:
- 方式1.
$(‘.parent .child');
- 方式2.
$(‘.parent').find(‘.child');
- 方式3.
$(‘.child','.parent');
由于我們已有了之前的判斷,基于他們?nèi)叨家M行jQuery()
的查找,所以三者都在此花費a的查找時間,此時方式3已經(jīng)基本找到了:
- 方式3.
$(‘.child','.parent');
花費時間:a;
接下來方式1進行 ‘ .parent .child
'選擇器的查找,方式2進行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的過程比較簡單,相較于方式1查找復(fù)雜的選擇器(在查找選擇器的過程中需要排除很多的情況,更多的時間花費在處理字符串上,即處理出我們想要表達的選擇器)更高效一點,我們得出方式2優(yōu)于方式1,下面我們拿三者來進行比較:
我們可以看出,方式1最慢,方式2和方式3不相上下,方式3略勝一籌,基本吻合我們的初衷,即為:
在基于jQuery查找dom的過程中能使用jquery的查找方式就使用,盡量不寫復(fù)雜的選擇器來表達我們想要查找的dom,效率極低。相反使用jquery的查找方式我們就能盡量排除復(fù)雜選擇器的情況,極大提高查找效率。
由于方式2的使用可能會受限,所以在此我推薦大家使用方式3,即為:
總結(jié)
好了,以上就是這篇文文章的全部內(nèi)容了,寫到這里,突然感覺好像對自己并沒有什么(luan)用,寫的好像我的編碼能力已經(jīng)強到了來拼dom查找效率的地步 。希望能對有需要的朋友們有一定的幫助吧。
相關(guān)文章
jQuery EasyUI中對表格進行編輯的實現(xiàn)代碼
對表格進行增刪改后一次性保存或回滾的發(fā)生相當(dāng)有用。參照官方的教程例子做了個用戶管理的小例子。2010-06-06jquery如何實現(xiàn)在加載完iframe的內(nèi)容后再進行操作
怎么實現(xiàn)在加載完iframe的內(nèi)容后才進行下一步操作,通過jquery可以實現(xiàn),為iframe添加onload事件,具體如下,喜歡的朋友不妨參考下或許對大家有所幫助2013-09-09使用Jquery實現(xiàn)點擊文字后變成文本框且可修改
使用Jquery實現(xiàn)點擊文字變?yōu)槲谋究蛐Ч?,可對文本框文字進行修改,具體的實現(xiàn)思路如下,感興趣的朋友可以參考下,希望對大家有所幫助2013-09-09jQuery學(xué)習(xí)之prop和attr的區(qū)別示例介紹
prop和attr的區(qū)別你知道嗎?在本文有些不錯的示例對兩者詳細介紹,感興趣的朋友不要錯過2013-11-11