jQuery查找dom的几种方法效率详解

console.time('Scott');
console.log('seven');
console.timeEnd('Scott');
seven
Scott: 0.256ms

1.$(‘.parent .child');
2.$(‘.parent').find(‘.child');
3.$(‘.child','.parent');

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 );
}

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 "undefined" "htmlcode">

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


他们都要进入相同的判断步骤，即上面简要说明的判断流程，等到1和3判断完后所花费的时间基本差不多，但是1内部的选择器还需要花费时间去进行sizzle相关查找，得出：

  
方式1. $(‘.parent .child'); 走完流程花费的时间：a;
  
方式3. $(‘.child','.parent'); 走完流程花费的时间：a; 几乎已经找到dom节点
  
方式1. $(‘.parent .child'); sizzle相关查找选择器.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的具体内容：


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 " " + selector : selector;
 return ret;
 }


基于jQuery(1.11.3) 2716行处，在此我们可以看出find的过程比较简单，相较于方式1查找复杂的选择器(在查找选择器的过程中需要排除很多的情况，更多的时间花费在处理字符串上，即处理出我们想要表达的选择器)更高效一点，我们得出方式2优于方式1，下面我们拿三者来进行比较：

我们可以看出，方式1最慢，方式2和方式3不相上下，方式3略胜一筹，基本吻合我们的初衷，即为：
在基于jQuery查找dom的过程中能使用jquery的查找方式就使用，尽量不写复杂的选择器来表达我们想要查找的dom，效率极低。相反使用jquery的查找方式我们就能尽量排除复杂选择器的情况，极大提高查找效率。
由于方式2的使用可能会受限，所以在此我推荐大家使用方式3，即为：



总结
好了，以上就是这篇文文章的全部内容了，写到这里，突然感觉好像对自己并没有什么(luan)用，写的好像我的编码能力已经强到了来拼dom查找效率的地步 。希望能对有需要的朋友们有一定的帮助吧。