基于jQuery查找dom的多種方式性能問題

這個問題的產生由于我們前端組每個人的編碼習慣的差異，最主要的還是因為代碼的維護性問題。在此基礎上，我對jQuery源碼(1.11.3)查找dom節點相關的內容進行了仔細的查閱，雖然并不能理解的很深入 。。同時基于對瀏覽器console對象的了解產生了一系列之后的問題和分析，對jQuery最常用的三種dom查找方式進行了一個查找效率和性能方面的比較分析。

首先我們要用到的是 console.time() 和   console.timeEnd() 這兩個 成對出現 的console對象的方法，該方法的用法是將他們兩者之間的代碼段執行并輸出所消耗的執行時間，并且兩者內傳入的字符串命名須統一才能生效，例如：

1 console.time('Scott');
2 console.log('seven');
3 console.timeEnd('Scott');
4 seven5 Scott: 0.256ms

代碼段中三處一致才是正確的用法。

接下來我們來討論我們常用的jQuery查找dom方式：

1. $('.parent .child');

2. $('.parent').find('.child');

3. $('.child','.parent');

其中方式1和方式3都是基于jQuery的selector和context的查找方式，既我們最常用的jQuery()或者$()，

詳細即為：

1 jQuery = function( selector, context ) {
2     // The jQuery object is actually just the init constructor 'enhanced'
3     // Need init if jQuery is called (just allow error to be thrown if not included)
4     return new jQuery.fn.init( selector, context );
5 }

基于jQuery(1.11.3)70行處，為該方法的入口，他做的所有事情就是創建了一個jquery.fn上的init方法的對象，我們再來細看這個對象是什么：

  1     init = jQuery.fn.init = function( selector, context ) {
  2         var match, elem;
  3 
  4         // HANDLE: $(""), $(null), $(undefined), $(false)
  5         if ( !selector ) {
  6             return this;
  7         }
  8 
  9         // Handle HTML strings
 10         if ( typeof selector === "string" ) {
 11             if ( selector.charAt(0) === "<" && selector.charAt( selector.length - 1 ) === ">" && selector.length >= 3 ) {
 12                 // Assume that strings that start and end with <> are HTML and skip the regex check
 13                 match = [ null, selector, null ];
 14 
 15             } else {
 16                 match = rquickExpr.exec( selector );
 17             }
 18 
 19             // Match html or make sure no context is specified for #id
 20             if ( match && (match[1] || !context) ) {
 21 
 22                 // HANDLE: $(html) -> $(array)
 23                 if ( match[1] ) {
 24                     context = context instanceof jQuery ? context[0] : context;
 25 
 26                     // scripts is true for back-compat
 27                     // Intentionally let the error be thrown if parseHTML is not present
 28                     jQuery.merge( this, jQuery.parseHTML(
 29                         match[1],
 30                         context && context.nodeType ? context.ownerDocument || context : document,
 31                         true
 32                     ) );
 33 
 34                     // HANDLE: $(html, props)
 35                     if ( rsingleTag.test( match[1] ) && jQuery.isPlainObject( context ) ) {
 36                         for ( match in context ) {
 37                             // Properties of context are called as methods if possible
 38                             if ( jQuery.isFunction( this[ match ] ) ) {
 39                                 this[ match ]( context[ match ] );
 40 
 41                             // ...and otherwise set as attributes
 42                             } else {
 43                                 this.attr( match, context[ match ] );
 44                             }
 45                         }
 46                     }
 47 
 48                     return this;
 49 
 50                 // HANDLE: $(#id)
 51                 } else {
 52                     elem = document.getElementById( match[2] );
 53 
 54                     // Check parentNode to catch when Blackberry 4.6 returns
 55                     // nodes that are no longer in the document #6963
 56                     if ( elem && elem.parentNode ) {
 57                         // Handle the case where IE and Opera return items
 58                         // by name instead of ID
 59                         if ( elem.id !== match[2] ) {
 60                             return rootjQuery.find( selector );
 61                         }
 62 
 63                         // Otherwise, we inject the element directly into the jQuery object
 64                         this.length = 1;
 65                         this[0] = elem;
 66                     }
 67 
 68                     this.context = document;
 69                     this.selector = selector;
 70                     return this;
 71                 }
 72 
 73             // HANDLE: $(expr, $(...))
 74             } else if ( !context || context.jquery ) {
 75                 return ( context || rootjQuery ).find( selector );
 76 
 77             // HANDLE: $(expr, context)
 78             // (which is just equivalent to: $(context).find(expr)
 79             } else {
 80                 return this.constructor( context ).find( selector );
 81             }
 82 
 83         // HANDLE: $(DOMElement)
 84         } else if ( selector.nodeType ) {
 85             this.context = this[0] = selector;
 86             this.length = 1;
 87             return this;
 88 
 89         // HANDLE: $(function)
 90         // Shortcut for document ready
 91         } else if ( jQuery.isFunction( selector ) ) {
 92             return typeof rootjQuery.ready !== "undefined" ?
 93                 rootjQuery.ready( selector ) :
 94                 // Execute immediately if ready is not present
 95                 selector( jQuery );
 96         }
 97 
 98         if ( selector.selector !== undefined ) {
 99             this.selector = selector.selector;
100             this.context = selector.context;
101         }
102 
103         return jQuery.makeArray( selector, this );
104     }

基于jQuery(1.11.3) 2776行處，該方法比較長，我就來大概說一下我對這個方法的了解：這里主要就是做了先對selector的判斷，在判斷完后，查找context如果存在就繼續做對有context存在情況的處理，沒有則進行沒有context情況的處理，而方式1和方式3：

1. $('.parent .child');

3. $('.child','.parent');

他們都要進入相同的判斷步驟，即上面簡要說明的判斷流程，等到1和3判斷完后所花費的時間基本差不多，但是1內部的選擇器還需要花費時間去查找，得出

方式1. $('.parent .child');  走完流程花費的時間：a;

方式3. $('.child','.parent');  走完流程花費的時間：a; 幾乎已經找到dom節點

方式1. $('.parent .child');  查找選擇器.parent .child花費的時間：b;

所以得出初步結論：方式3. $('.child','.parent');花費的時間：a;    方式1. $('.parent .child');花費的時間：a + b; 方式3優于方式1

接下來我們來看實際的運行結果：

以百度頁面為例，我們隨便找出一組滿足的范圍來查找，博主進行多次測試，方式3的查找效率均快于方式1，且方式3的查找速度基本為方式1的3倍左右，即：

接下來我們我們加入jQuery的find方法進行比較，即為：

方式1. $('.parent .child');

方式2. $('.parent').find('.child');

方式3. $('.child','.parent');

由于我們已有了之前的判斷，基于他們三者都要進行jQuery()的查找，所以三者都在此花費a的查找時間，此時方式3已經基本找到了：

方式3. $('.child','.parent'); 花費時間:a;

接下來方式1進行 '.parent .child'選擇器的查找，方式2進行jQuery的find方法查找，在此列出find的具體內容：

 1 find: function( selector ) {
 2         var i,
 3             ret = [],
 4             self = this,
 5             len = self.length;
 6 
 7         if ( typeof selector !== "string" ) {
 8             return this.pushStack( jQuery( selector ).filter(function() {
 9                 for ( i = 0; i < len; i++ ) {
10                     if ( jQuery.contains( self[ i ], this ) ) {
11                         return true;
12                     }
13                 }
14             }) );
15         }
16 
17         for ( i = 0; i < len; i++ ) {
18             jQuery.find( selector, self[ i ], ret );
19         }
20 
21         // Needed because $( selector, context ) becomes $( context ).find( selector )
22         ret = this.pushStack( len > 1 ? jQuery.unique( ret ) : ret );
23         ret.selector = this.selector ? this.selector + " " + selector : selector;
24         return ret;
25     }

基于jQuery(1.11.3) 2716行處，在此我們可以看出find的過程比較簡單，相較于方式1查找復雜的選擇器(在查找選擇器的過程中需要排除很多的情況，更多的時間花費在處理字符串上，即處理出我們想要表達的選擇器)更高效一點，我們得出方式2優于方式1，下面我們拿三者來進行比較：

我們可以看出， 方式1最慢，方式2和方式3不相上下，方式3略勝一籌 ，基本吻合我們的初衷，即為：

在基于jQuery查找dom的過程中能使用jquery的查找方式就使用，盡量不寫復雜的選擇器來表達我們想要查找的dom，效率極低。相反使用jquery的查找方式我們就能盡量排除復雜選擇器的情況，極大提高查找效率。

由于方式2的使用可能會受限，所以在此我推薦大家使用方式3，即為：

寫到這里，突然感覺好像對自己并沒有什么(luan)用，寫的好像我的編碼能力已經強到了來拼dom查找效率的地步 。。。

原創，轉載請注明。by Scott.