看看我之前写的笔记还是有所收获的,在jquery这一课中提到了一个Sizzle运行机制。那么什么是sizzle那?
官方解释是:sizzle是一个纯粹的javascript css选择器引擎,可以轻松的插入主机库。
sizzle选择符的实现:
在jQuery的基础教程中有这样的描述,在把选择符表达式传递给$()函数的时候,jquery的sizzle引擎会解析这个表达式,并确定如何收集该表达式。在最本质的层次上,sizzle会应用浏览器支持的最高效的原生的DOM方法取得nodeList,这个节点列表是一个包含DOM元素的类似数组的对象,jquery会把这个对象转换成真正的数组。
假如说,没有现成的DOM方法可以拿来处理这个选择符表达式,sizzle就会使用。document.getElementsByTagName("*");来去文档中的全部元素,然后在遍历并测试每一个元素。
sizzle选择符的速度:
如果选择器可以使用原生的js选择函数那一定比jquery的速度要快。(浏览器是有检测代码消耗时间的功能的,chrome在timeline里面,其他的找找看吧)
他有的特征:
完全独立,最常用选择器的竞争性能,大小只有4KB,高拓展性和简单易用的api,有最佳性能的事件委托....
在jquery中集成了sizzle选择器框架(sizzle也是一个js库,他的官方网站都和jquery的集成了)
在jquery中你可以看到他的源代码:
/*!
* jQuery JavaScript Library v3.2.1
* https://jquery.com/
*
* Includes Sizzle.js
* https://sizzlejs.com/
上面的是jquery.3.2.1版本的前几行描述。上面就已经写到了他是包括sizzle的了。
/*!
* Sizzle CSS Selector Engine v2.3.3
* https://sizzlejs.com/
*
* Copyright jQuery Foundation and other contributors
* Released under the MIT license
* http://jquery.org/license
*
* Date: 2016-08-08
*/
在jquery中sizzle的定义格式是大概这个样子的:
var Sizzle =(function(window){...})(window)
是利用的自运行函数来定义的,在省略号里面写了2243左右行的代码来充实这个自运行函数。
ps:下面是jquery内部使用的几个DOM方法:
getElementById(),getElementsByTagName(),getElementsByClassName(),querySelectorAll();