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

程序员文章站 2023-10-29 17:57:04

前言关于这个问题的产生由于我们前端组每个人的编码习惯的差异，最主要的还是因为代码的维护性问题。在此基础上，我对jquery源码(1.11.3)查找dom节点相关的内容进...

前言

关于这个问题的产生由于我们前端组每个人的编码习惯的差异，最主要的还是因为代码的维护性问题。在此基础上，我对jquery源码(1.11.3)查找dom节点相关的内容进行了仔细的查阅，虽然并不能理解的很深入。。同时基于对浏览器console对象的了解产生了一系列之后的问题和分析，对jquery最常用的三种dom查找方式进行了一个查找效率和性能方面的比较分析。

首先我们要用到的是console.time()和console.timeend()这两个成对出现的console对象的方法，该方法的用法是将他们两者之间的代码段执行并输出所消耗的执行时间，并且两者内传入的字符串命名须统一才能生效，例如：

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行处，为该方法的入口，他做的所有事情就是创建了一个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如果存在就继续做对有context存在情况的处理，没有则进行没有context情况的处理，而方式1和方式3：

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

接下来我们来看实际的运行结果：

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

以百度页面为例，我们随便找出一组满足的范围来查找，博主进行多次测试，方式3的查找效率均快于方式1，且方式3的查找速度基本为方式1的3倍左右，即：

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

接下来我们我们加入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，下面我们拿三者来进行比较：

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