logo头像

求知若渴,虚心若愚

jQuery源码学习 - Sizzle选择器

Sizzle选择器(877行-2856行)

sizzle是一个纯粹的javascript css选择器引擎,可以轻松的插入主机库

为什么有Sizzle

  • 其实对现代浏览器来说,document.querySelectorAll就可以解决一切。
  • 比如zeptoJs就是用querySelectorAll进行选择器解析的,因为移动端所有浏览器都支撑querySelectorAll。
  • 但是对于低版本的IE(<=8)浏览器,不仅不支持querySelectorAll,连getElementById都有bug,因此自己用浏览器原生API解析选择器简直难上加难。好在sizzle引擎帮我们处理了一切。
  • 参考资料:http://foio.github.io/sizzle-research/

Sizzle特点

  • 完全独立
  • 最常用选择器的竞争性能
  • 大小只有4KB
  • 高拓展性和简单易用的api
  • 有最佳性能的事件委托

Sizzle选择符的实现

  • 在把选择符表达式传递给$()函数的时候,jquery的sizzle引擎会解析这个表达式,并确定如何收集该表达式。
  • 在最本质的层次上,sizzle会应用浏览器支持的最高效的原生的DOM方法取得nodeList,这个节点列表是一个包含DOM元素的类似数组的对象,jquery会把这个对象转换成真正的数组。
  • 如果没有现成的DOM方法可以拿来处理这个选择符表达式,sizzle就会使用document.getElementsByTagName(“*”);来去文档中的全部元素,然后在遍历并测试每一个元素。

Sizzle选择符的速度

  • 如果选择器可以使用原生的js选择函数那一定比jquery的速度要快。
  • 浏览器是有检测代码消耗时间的功能的,chrome的是在timeline里面
支付宝打赏 微信打赏

赞赏是对我们的肯定!