以百度页面为例，我们随便找出一组满足的范围来查找，博主进行多次测试，方式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，下面我们拿三者来进行比较：
我们可以看出，方式1最慢，方式2和方式3不相上下，方式3略胜一筹，基本吻合我们的初衷，即为：
在基于jQuery查找dom的过程中能使用jquery的查找方式就使用，尽量不写复杂的选择器来表达我们想要查找的dom，效率极低。相反使用jquery的查找方式我们就能尽量排除复杂选择器的情况，极大提高查找效率。
由于方式2的使用可能会受限，所以在此我推荐大家使用方式3，即为：
总结
好了，以上就是这篇文文章的全部内容了，写到这里，突然感觉好像对自己并没有什么(luan)用，写的好像我的编码能力已经强到了来拼dom查找效率的地步 。希望能对有需要的朋友们有一定的帮助吧。
您可能感兴趣的文章: