jquery 选择器引擎sizzle浅析


Posted in Javascript onFebruary 06, 2013

I'm sorry!我用jquery的大概有一年了,只知道$(selector),其内部选择器的流程走向完全不清晰!于是看了jquery的源码,jquery用的选择器的引擎是sizzle,是jquery的作者另一开源项目,在github上面有,号称最快的dom选择器!不到2000行代码。

上面说了不是很精彩的开场白,我么来个 for example: $('.test') 在jquery的流程是怎么走的呢?
1.首先会做如下的判断

/** 
*关于 querySelectorAll函数 
*返回当前文档中匹配一个特定选择器的所有的元素 
*var nodelist = element.querySelectorAll("div.test"); 
*支持浏览器 ie8+,Chrome,Firefox(3.5) 
* 如果你不清楚可以google 一下 
*/ 
if ( document.querySelectorAll ) { 
(function(){ 
var oldSizzle = Sizzle, 
div = document.createElement("div"), 
id = "__sizzle__"; 
div.innerHTML = "<p class='TEST'></p>"; 
// Safari can't handle uppercase or unicode characters when 
// in quirks mode. 
if ( div.querySelectorAll && div.querySelectorAll(".TEST").length === 0 ) { 
return; 
} 
Sizzle = function( query, context, extra, seed ) { 
//使用querySelectorAll 来查询 
} 
}

如果你的浏览器是ie8+ 或者 谷歌,直接通过内置的querySelectorAll(".test")返回dom结构。 如果你使用是ie6,那么下面事情发生了
2. 不支持querySelectorAll 就会启动内部 sizzle。下面是流程
/** 
.sizzle 通过 
chunker = /((?:\((?:\([^()]+\)|[^()]+)+\)|\[(?:\[[^\[\]]*\]|['"][^'"]*['"]|[^\[\]'"]+)+\]|\\.|[^ >+~,(\[\\]+)+|[>+~])(\s*,\s*)?((?:.|\r|\n)*)/g 
这个正则进行匹配, 
.把我们传来的参数'.test',匹配成'.test' 放到数组 
.检测浏览器是否支持getElementsByClassName 如果支持,则通过此函数返回dom,如果不支持此函数则 context.getElementsByTagName( "*" ) ,通过上下文把所有的元素选出来,在通过循环,选择className = 'test' 的元素,放入数组返回dom。 
*/

ok,以上是$('.test')的流程,如果你很迷惑,你可以看看源码,调试一下。
关于sizzle的选择器
个人认为,sizzle选择器是增强版的querySelectorAll 函数, 因为querySelectorAll 不支持 'div.test :eq(1)' 这样的selector 和css3选择!
当你的selector里面不出现nth|eq|gt|lt|first|last|even|odd 这样的字符时候, 从右向左,所谓的从右向左,比如 $('div img') 首先会把所有的img 选出来,通过parent 是div 进行过滤 。 这样很高效的原因是只进行一次dom的查询!
当你selector 出现了'eq(1)' 这样的字符的时候,就变正常了,从左向右!这是因为要对结果集进行过滤。
思考
$('div img:eq(0)') 与 $('div img').first() 哪个效率高? 个人认为 后一个高一些,因为 第一从左向右效率低下!没有测试过!理论推导!

今天大致看了下流程,具体的代码没怎么细研究!这里面好的思想值得学习和吸收
欢迎拍砖

Javascript 相关文章推荐
Javascript客户端将指定区域导出到Word、Excel的代码
Oct 22 Javascript
JQquery的一些使用心得分享
Aug 01 Javascript
jsPDF生成pdf后在网页展示实例
Jan 16 Javascript
jQuery获取和设置表单元素的方法
Feb 14 Javascript
javascript使用Promise对象实现异步编程
Mar 01 Javascript
微信小程序 在线支付功能的实现
Mar 14 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
Preload基础使用方法详解
Feb 03 Javascript
JavaScript实现简单的图片切换功能(实例代码)
Apr 10 Javascript
JavaScript逻辑运算符相关总结
Sep 04 Javascript
利用 Chrome Dev Tools 进行页面性能分析的步骤说明(前端性能优化)
Feb 24 Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
js汉字转拼音实现代码
Feb 06 #Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 #Javascript
JavaScript去除空格的三种方法(正则/传参函数/trim)
Feb 06 #Javascript
js中top/parent/frame概述及案例应用
Feb 06 #Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
Feb 06 #Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 #Javascript
You might like
PHP mail 通过Windows的SMTP发送邮件失败的解决方案
2009/05/27 PHP
php微信公众平台开发类实例
2015/04/01 PHP
如何正确配置Nginx + PHP
2016/07/15 PHP
php实现基于openssl的加密解密方法
2016/09/30 PHP
PHP分页显示的方法分析【附PHP通用分页类】
2018/05/10 PHP
用JS判别浏览器种类以及IE版本的几种方法小结
2011/08/02 Javascript
javascript实现TreeView 无刷新展开的实例代码
2013/07/13 Javascript
网页运行时提示对象不支持abigimage属性或方法
2014/08/10 Javascript
JS实现鼠标箭头变成一个燃烧烛光效果的方法
2015/02/28 Javascript
jQuery解析json数据实例分析
2015/11/24 Javascript
基于jquery animate操作css样式属性小结
2015/11/27 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
2017/06/12 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
2018/09/10 Javascript
Vue移动端右滑屏幕返回上一页附源码下载
2019/06/26 Javascript
Vue组件间数据传递的方式(3种)
2020/07/13 Javascript
[53:03]Optic vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[46:44]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第二场 3月7日
2021/03/11 DOTA
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
python如何将图片转换为字符图片
2020/08/19 Python
Python中__slots__属性介绍与基本使用方法
2018/09/05 Python
浅谈python下tiff图像的读取和保存方法
2018/12/04 Python
python分块读取大数据,避免内存不足的方法
2018/12/10 Python
pip安装py_zipkin时提示的SSL问题对应
2018/12/29 Python
对python模块中多个类的用法详解
2019/01/10 Python
python 实现图片旋转 上下左右 180度旋转的示例
2019/01/24 Python
Django和Flask框架优缺点对比
2019/10/24 Python
Python谱减法语音降噪实例
2019/12/18 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
东芝官网商城:还原日式美学,打造美好生活
2018/12/27 全球购物
女士和男士时尚鞋在线购物:Shoespie
2019/02/28 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
创建学习型党组织实施方案
2014/03/29 职场文书
购房意向书
2014/04/01 职场文书
教师师德承诺书2016
2016/03/25 职场文书
汽车销售合同文本
2019/08/08 职场文书