前言

关于这个问题的产生由于我们前端组每个人的编码习惯的差异，最主要的还是因为代码的维护性问题。在此基础上，我对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

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

以百度页面为例，我们随便找出一组满足的范围来查找，博主进行多次测试，方式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查找效率的地步 。希望能对有需要的朋友们有一定的帮助吧。

# jquery  # dom  # dom对象  # 获取dom对象  # jquery根据属性和index来查找属性值并操作  # jquery 输入框查找关键字并提亮颜色的实例代码  # jQuery查找和过滤_动力节点节点Java学院整理  # JQuery查找子元素find()和遍历集合each的方法总结  # jquery的父、子、兄弟节点查找  # 节点的子节点循环方法  # jQuery查找节点方法完整实例  # jQuery查找节点并获取节点属性的方法  # jQuery选择器总结之常用元素查找方法  # JQuery元素快速查找与操作  # 选择器  # 在此  # 即为  # 都要  # 我对  # 可以看出  # 完后  # 最常用  # 进行了  # 走完  # 的是  # 都是  # 有什么  # 好了  # 就能  # 才是  # 每个人  # 执行时间  # 这个问题  # 有一定 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： ai格式如何转html_将AI设计稿转换为HTML页面流程【页面】  bing浏览器学术搜索入口_bing学术文献检索地址  在线ppt制作网站有哪些软件,如何把网页的内容做成ppt？  零基础网站服务器架设实战：轻量应用与域名解析配置指南  Laravel如何使用Eloquent ORM进行数据库操作？（CRUD示例）  如何在阿里云完成域名注册与建站？  手机软键盘弹出时影响布局的解决方法  如何快速生成高效建站系统源代码？  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  如何挑选高效建站主机与优质域名？  如何在IIS管理器中快速创建并配置网站？  使用豆包 AI 辅助进行简单网页 HTML 结构设计  lovemo网页版地址 lovemo官网手机登录  如何用5美元大硬盘VPS安全高效搭建个人网站？  网站制作大概多少钱一个,做一个平台网站大概多少钱？  如何在建站宝盒中设置产品搜索功能？  如何在不使用负向后查找的情况下匹配特定条件前的换行符  C语言设计一个闪闪的圣诞树  原生JS实现图片轮播切换效果  如何用虚拟主机快速搭建网站？详细步骤解析  为什么php本地部署后css不生效_静态资源加载失败修复技巧【技巧】  edge浏览器无法安装扩展 edge浏览器插件安装失败【解决方法】  焦点电影公司作品,电影焦点结局是什么？  Laravel如何实现模型的全局作用域？（Global Scope示例）  如何在新浪SAE免费搭建个人博客？  阿里云高弹*务器配置方案｜支持分布式架构与多节点部署  HTML5空格和nbsp有啥关系_nbsp的作用及使用场景【说明】  香港服务器WordPress建站指南：SEO优化与高效部署策略  如何彻底删除建站之星生成的Banner？  详解ASP.NET 生成二维码实例（采用ThoughtWorks.QRCode和QrCode.Net两种方式）  如何生成腾讯云建站专用兑换码？  Windows家庭版如何开启组策略(gpedit.msc)？（安装方法）  教你用AI润色文章，让你的文字表达更专业  ,怎么在广州志愿者网站注册？  python中快速进行多个字符替换的方法小结  如何解决hover在ie6中的兼容性问题  深圳网站制作培训,深圳哪些招聘网站比较好？  如何基于云服务器快速搭建个人网站？  html5如何实现懒加载图片_ intersectionobserver api用法【教程】  Laravel如何配置Horizon来管理队列？（安装和使用）  制作旅游网站html,怎样注册旅游网站？  郑州企业网站制作公司,郑州招聘网站有哪些？  Python自然语言搜索引擎项目教程_倒排索引查询优化案例  如何在 Pandas 中基于一列条件计算另一列的分组均值  如何选择PHP开源工具快速搭建网站？  html5的keygen标签为什么废弃_替代方案说明【解答】  Laravel如何将应用部署到生产服务器_Laravel生产环境部署流程  Laravel如何使用集合（Collections）进行数据处理_Laravel Collection常用方法与技巧  在线教育网站制作平台,山西立德教育官网？  Python数据仓库与ETL构建实战_Airflow调度流程详解