sizzle

看看我之前写的笔记还是有所收获的,在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();




 

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值