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

$(‘.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 ? jQuery.unique( ret ) : ret );
 ret.selector = this.selector ? this.selector + " " + selector : selector;
 return ret;
 }

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