關(guān)于這個(gè)問(wèn)題的產(chǎn)生由于我們前端組每個(gè)人的編碼習(xí)慣的差異，最主要的還是因?yàn)榇a的維護(hù)性問(wèn)題。在此基礎(chǔ)上，我對(duì)jQuery源碼(1.11.3)查找dom節(jié)點(diǎn)相關(guān)的內(nèi)容進(jìn)行了仔細(xì)的查閱，雖然并不能理解的很深入 。。同時(shí)基于對(duì)瀏覽器console對(duì)象的了解產(chǎn)生了一系列之后的問(wè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)大概說(shuō)一下我對(duì)這個(gè)方法的了解：這里主要就是做了先對(duì)selector的判斷，在判斷完后，查找context如果存在就繼續(xù)做對(duì)有context存在情況的處理，沒(méi)有則進(jìn)行沒(méi)有context情況的處理，而方式1和方式3：
1.$(‘.parent .child'); 3.$(‘.child','.parent');
他們都要進(jìn)入相同的判斷步驟，即上面簡(jiǎn)要說(shuō)明的判斷流程，等到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é)果：
