jQuery选择器的工作原理和优化分析

每次申明一个jQuery对象的时候，返回的是jQuery.prototype.init 对象，很多人就会不明白，init明明是jQuery.fn的方法啊，实际上这里不是方法，而是init的构造函数，因为js的prototype对象可 以实现继承，加上js的对象只是引用不会是拷贝，new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的，只是有没有执行到init的不同，这里就不讲原因了，等下一篇再讲为什么会是这样。
当我们使用选择器的时候$(selector,content)，就会执行 init(selectot,content)，我们看看inti中是怎样执行的：


代码如下:

if ( typeof selector == "string" ) {
//正则匹配，看是不是HTML代码或者是#id
var match = quickExpr.exec( selector );
//没有作为待查找的 DOM 元素集、文档或 jQuery 对象。
//selector是#id的形式
if ( match && (match[1] || !context) ) {
// HANDLE: $(html) -> $(array)
//HTML代码,调用clean补全HTML代码
if ( match[1] ){
selector = jQuery.clean( [ match[1] ], context );
}
// 是: $("#id")
else {
//判断id的Dom是不是加载完成
var elem = document.getElementById( match[3] );
if ( elem ){
if ( elem.id != match[3] )
return jQuery().find( selector );
return jQuery( elem );//执行完毕return
}
selector = [];
}
//非id的形式.在context中或者是全文查找
} else{
return jQuery( context ).find( selector );
}
}

这里就说明只有选择器写成$(‘#id')的时候最快，相当于执行了一次 getElementById，后边的程序就不用再执行了。当然往往我们需要的选择器并不是这么简单，比如我们需要id下的CSS为className， 有这样的写法$(‘#id.className')和$(‘#id').find(‘.className');这两种写法的执行结果都是一样的，比 如<div id=”id”><span class=”className”></span></div>，返回的肯定都是<span class=”className”></span>，但是执行的效率是完全不一样的。
在分析一下上边的代码，如果不是$(‘#id')这样的简单选择器的话，都会执行find函 数，那我们再看看find到底是做用的：


代码如下:

find: function( selector ) {
//在当前的对象中查找
var elems = jQuery.map(this, function(elem){
return jQuery.find( selector, elem );
});
//下边的代码可以忽略，只是做一些处理
//这里应用了js的正则对象的静态方法test
//indexOf("..")需要了解一下xpath的语法,就是判断selector中包含父节点的写法
//本意就是过滤数组的重复元素
return this.pushStack( /[^+>] [^+>]/.test( selector ) || selector.indexOf("..") > -1 ?
jQuery.unique( elems ) :
elems );
}

如果这样写$(‘#id .className')，就会执行到扩展的find(‘#id .className',document)，因为当前的this是document的jQuery数组，那我们在看看扩展的find他的实现，代码比较 多，就不列出来，总之就是从第二个参数传递进行的dom第一个子节点开始找，遇见#比对id，遇见.比对ClassName，还有：<+-等处理。 那我们要优化，是不是就要想办法让第二个参数context的范围最小，那样遍历是不是就很少了？
如果我们这样写$(‘#id').find(‘.className')，那程序只这样执行 的，第一次init的时候执行一步getElementById，就return了，接着执行 find(‘.className',divDocument)，divDocument就是我们第一次选择的是div标签，如果document下有很 多dom对象的时候，这次只遍历divDocument是不是少了很多次，而且在第一次选择id的速度也要比遍历快的多。
现在大家应该是明白了吧。就是说第一层选择最好是ID，而是简单选择器，目的就是定义范围， 提高速度，这次就说这些，选择写法的优化，其他的优化，下次再说。

赞 (0)

相关推荐

  • Jquery选择器 $实现原理

    但由于工作的原因,很久不曾做过网站项目了,也没有时间去好好研究Jquery的源码,这个疑问也一直没有得到解决了, 今天,空闲之余,打开Jquery的源码看看,才明天它实现的原理,原来在加入jquery的js这个文件时,实际上是执行了一个函数,在这个函数里己经初始化了$和JQuery变量, 实现这个功能源码如下(代码已删减和更改,并不影响说明实现原理): 复制代码 代码如下: (function() { var // Will speed up references to window, and

  • jquery选择器原理介绍($()使用方法)

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同. 当我们使用选择器的时候$(selector,content),就会执行init(sel

  • jQuery源码分析-04 选择器-Sizzle-工作原理分析

    作者:nuysoft/高云 QQ:47214707 EMail:nuysoft@gmail.com 声明:本文为原创文章,如需转载,请注明来源并保留原文链接. 在分析Sizzle源码之前,先整理一下选择器的工作原理 先明确一些选择器中用到的名词,后边阅读时不会有歧义: 选择器表达式: "div > p" 块表达式: "div" "p" 并列选择器表达式: "div, p" 块分割器: Sizzle中的chunker正则,

  • 详解jquery选择器的原理

    详解jquery选择器的原理 html部分 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <script src="js/minijquery.js"></script> </head> <body>

  • jQuery原理系列-css选择器的简单实现

    jQuery最强大的功能在于它可以通过css选择器查找元素,它的源码中有一半是sizzle css选择器引擎的代码,在html5规范出来之后,增加了document.querySelector和document.querySelectorAll直接查找元素,如果是做移动端开发的,使用jQuery的必要性大大降低. 用js代码实现css选择器,必然是用正则表达式来识别字符串了,当然浏览器提供的原生api 效率更高,以下代码只做原理性展示,并未优先性能, 例如 1)查找id显然是用document.

  • jQuery选择器的工作原理和优化分析

    每次申明一个jQuery对象的时候,返回的是jQuery.prototype.init 对象,很多人就会不明白,init明明是jQuery.fn的方法啊,实际上这里不是方法,而是init的构造函数,因为js的prototype对象可 以实现继承,加上js的对象只是引用不会是拷贝,new jQuery,new jQuery.fn和new jQuery.fn.init的子对象是一样的,只是有没有执行到init的不同,这里就不讲原因了,等下一篇再讲为什么会是这样. 当我们使用选择器的时候$(selec

  • 高效jQuery选择器的5个技巧实例分析

    本文实例讲述了高效jQuery选择器的5个技巧.分享给大家供大家参考,具体如下: 顾名思义,jQuery专注于查询(queries).库的核心允许你使用CSS选择器语法,以及通过在集合上执行函数,来查找DOM元素. jQuery使用浏览器原生API方法获取DOM集合.现代浏览器支持getElementsByClassName, querySelector以及querySelectorAll(可以解析CSS语法).然而,老版本的浏览器可能只提供getElementById以及getElementB

  • Yii中srbac权限扩展模块工作原理与用法分析

    本文实例讲述了Yii中srbac权限扩展模块工作原理与用法.分享给大家供大家参考,具体如下: 1. 设置权限规则表:可放在module模块配置文件里面 public function init() { //操作权限表,必须存在以下字段: //itemname角色名/ID, //type授权项目类型/1(任务)或者2(角色), //bizrule权限/逻辑运算表达式为false是有权限操作, //data数据/YII暂无利用 Yii::app()->authManager->itemTable

  • Java NIO工作原理的全面分析

    ◆  输入/输出:概念性描述I/O 简介I/O ? 或者输入/输出 ? 指的是计算机与外部世界或者一个程序与计算机的其余部分的之间的接口.它对于任何计算机系统都非常关键,因而所有 I/O 的主体实际上是内置在操作系统中的.单独的程序一般是让系统为它们完成大部分的工作.在 Java 编程中,直到最近一直使用 流 的方式完成 I/O.所有 I/O 都被视为单个的字节的移动,通过一个称为 Stream 的对象一次移动一个字节.流 I/O 用于与外部世界接触.它也在内部使用,用于将对象转换为字节,然后再

  • 深入了解MySQL中索引优化器的工作原理

    深入了解MySQL中索引优化器的工作原理

    目录 本文导读 一.MySQL 优化器是如何选择索引的 1.MySQL数据库组成 2.MySQL数据库成本计算 二.MySQL查询成本 三.SELECT 执行过程 总结 本文导读 本文将解读MySQL数据库查询优化器(CBO)的工作原理.简单介绍了MySQL Server的组成,MySQL优化器选择索引额原理以及SQL成本分析,最后通过 select 查询总结整个查询过程. 一.MySQL 优化器是如何选择索引的 下面我们来看这张表,SUB_ODR_ID字段创建了相关的 2 个索引,根据我们前面

  • 分析Tomcat的工作原理

    SpringBoot 就像一条巨蟒,慢慢缠绕着我们,使我们麻痹.不得不承认,使用了 SpringBoot 确实提高了工作效率,但同时也让我们遗忘了很多技能.刚入社会的时候,我还是通过 Tomcat 手动部署 JavaWeb 项目,还经常对 Tomcat 进行性能调优.除此之外,还需要自己理清楚各 Jar 之间的关系,以避免 Jar 丢失和各版本冲突导致服务启动异常的问题.到如今,这些繁琐而又重复的工作已经统统交给 SpringBoot 处理,我们可以把更多的精力放在业务逻辑上.但是,清楚 Tom

  • jQuery 选择器项目实例分析及实现代码

    jQuery 选择器项目实例分析及实现代码

    首先废话一句,jQuery选择器真心很强大! 在项目中遇到这么一个问题easyui的问题  如图所示,当前页面显示的是"原始报文查询"的页面,当时左侧导航栏却选中的是"重发报文查询".如何让右侧的菜单和左侧的导航实现联动即:左侧点击"原始报文查询",那么右侧的"补发运抵报文"展开,并选中"原始报文查询","后台管理"关闭? 实现方式如下: 1.右侧的"原始报文查询"等

  • 代码分析Spring MVC的工作原理

    代码分析Spring MVC的工作原理

    遗留问题 在关于利用maven搭建ssm的博客,我们一起来探讨下问的最多的问题中,我遗留了一个问题:Spring mvc是何时.何地.如何将Model中的属性绑定到哪个作用域,这里的作用域指的是Servlet的四大作用域:不了解问题背景的可以回过头去看看我的上篇博文. 明确的解答我会放到最后,在解答问题之前,我先和大家一起来捋一捋Spring mvc的工作原理.废话不多说,开始我们神秘的探险之旅! 应用示例 在讲工作原理之前,我们先看一个简单的spring mvc(ssm)示例,以及实现的效果

随机推荐