jQuery Selector 源码剖析

分析jQuery Selector的执行流程以及书写性能--圈圈36期

Transcript

1. JQuery Selector Author: 骆仲军（ICBU – 前端）
2. Agenda ¡  为什么选这个主题 ¡  JQuery和Sizzle的关系 ¡  旧版Sizzle是如何工作的 ¡  新版Sizzle的改进 ¡  对Seajs模块加载的思考
3. 为什么选这个主题 ¡  对各框架在各种设备上的选择性能探讨。 ¡  提到JQuery马上想到的是它的选择器。 ¡  了解选择器对我们有什么好处？ ¡  是否也能应用在Seajs模块加载？
4. JQuery和Sizzle的关系 Sizzle原先是JQuery的模块，后期独立出去作为单独的项目。 JQuery 1.3 版本总代码行数3000多行，Sizzle占有1300多行。 Jquery 1.9 版本总代码行数9000多行，Sizzle占有1600多行。
5. JQuery和Sizzle的关系 Jquery 1.3中： jQuery.find = Sizzle; jQuery.filter = Sizzle.filter; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.filters;
6. JQuery和Sizzle的关系 Jquery 1.9中： jQuery.find = Sizzle; jQuery.expr = Sizzle.selectors; jQuery.expr[":"] = jQuery.expr.pseudos; jQuery.unique = Sizzle.uniqueSort; jQuery.text = Sizzle.getText; jQuery.isXMLDoc = Sizzle.isXML; jQuery.contains = Sizzle.contains;
7. 旧版Sizzle如何工作
8. Sizzle是什么 ¡  Sizzle是一个纯javascript CSS选择器引擎 ¡  基于css3标准 ¡  独立于JQuery的开源项目
9. 各框架selector性能比较
10. JQuery 1.3和1.2.6不同点 为什么1.3比1.2.6快？如何有以下选择$(“div p”)： body div p p div p p div p p Span P div P p div p
11. $(Seletor)工作原理 ¡  new JQuery（Selector）和JQuery(Selector)有区别吗？ ¡  $(selector, context)和$(context).find(selector)
12. $(Seletor)工作原理 $(selector, context),有以下类 型: ¡  Null ¡  DOMElement ¡  String ¡  Function ¡  JQuery Object ¡  Array selector Array Null DOM String Function Jquery Object
13. $(Seletor)工作原理
14. JQuery和Sizzle连接 ¡  The work flow for $().find and $().filter: $().find: $().filter: For $(“selector”), it will use $().find $().find $.find Sizzle Sizzle.find Sizzle.filter $().filter $.multiFilter Sizzle.matches Sizzle Sizzle.filter
15. Sizzle工作原理 Include below methods: ¡  Sizzle.find: it will be invoke one time. ¡  Sizzle.filter: it may be invoke many times. PS: The sizzle engine is base on regular expression, so we will see various regexp in source code. Sizzle Sizzle.find Sizzle.filter
16. Sizzle工作原理 Excute regular expression chunker 1. It will transfer the selector to simple selectors which is array. 2. Divide the selector with char ‘,’ . For example: $(“div p, span p”) Sizzle Chunke r Span p div p
17. Sizzle工作原理 ¡  origPOS = /:(nth|eq|gt|lt|first|last|even|odd)(?:\((\d*) \))?(?=[^-]|$)/ If selector match origPOS, for example $(“div:eq(1) p”) Sizzle.find Sizzle.filter Sizzle.find div:eq(1) p :eq (1)
18. Sizzle工作原理) For example $ (“div.class1[name=‘name1’]”): Sizzle.find Filter.class Filter.attr div.class1[name=‘name1’] div .class1[name=‘name1’] [name=‘name1’]
19. Sizzle工作原理) ¡  Sizzle.find(expr) ¡  Type: ID, Class, Name, Tag ¡  Regular expression: Function: Expr.find
20. Sizzle工作原理(Sizzle.find) 这里要selector内容分类的概念： 一般selector会按照relative中的符号分组，例如”div.cls p.top”, 会分成两组 “div.cls”和”p.top”
21. Sizzle工作原理(Sizzle.find) ID • Match ID && context.getElementById Class • Match class && context.getElementsByClassName Nam e • Match name && context.getElementsByName Tag • Match tag && context.getElementsByTagName * • Not match above || the results is null in above process How does $(“div.class1”) work in IE and Firefox?
22. Sizzle工作原理(Sizzle.filter) ¡  Sizzle.filter( expr, set ) ¡  Type: PSEUDO, CHILD, ID, TAG, CLASS, ATTR, POS ¡  Regular expression: Expr.match ¡  Pre function: Expr.preFilter ¡  Function: Expr.filter
23. 浏览器自带选择器引擎 如果context是空或者是document，那么$(selector)或者$ (selector, document),如果浏览器支持方法querySelectorAll就 调用document.querySelectorAll。 请试下选择document.querySelectorAll("div p")和 document.querySelectorAll("div:eq(2)")
24. 新版Sizzle的改进
25. 新改进 取代Chunker正则表达式，用词法分析器来分析selector.
26. 新改进 1.  词法分析器 l  解析逗号 l  Token ： >, +, 空格, ~ l  遍历正则数组 2.  Cache功能，selector作为key，解析后的group为value，注 意cache的是词法分析器的结果。
27. 解析流程图
28. 对Seajs模块加载的思考
29. Seajs解析流程 如图的加载过程： Load a1 -> judge a1 status a1 b1 b2 Load a1 Fetch a1 Excute callback Load b1 Load b2
30. 分析相对复杂依赖 假设有如下依赖： a1 b1 c1 c2 d1 d2 c3 b2 b3
31. 几种解析流程 1.  Seajs标准流程 2.  Atom优化流程 3.  尝试另一种思路, 先load叶子节点 Load a1 Load b1 Load b2 Load b3 Load c1 Load c2 Load c3 Load d1 Load d2 Load a1 Load b1, Load b2, Load b3, Load c1, Load c2, Load c3, Load d1, Load d2 Load a1 Load c1, Load d1, Load d2, Load c3 Load c2, Load b1, Load b2, Load b3
32. Thanks