今天还是主要看别人对Sizzle的分析。
1、Sizzle拿到css选择器,通过tokenize方法,将选择器转化成一个数组,数组内部使用下面格式的对象存储分解后的选择器
{
"type" : "CLASS",
"value" : ".red",
"matchs" : " "
}
2、开始从右向左,也就是从第一步生成的数组的最后开始扫描。由于性能的需要,Sizzle优先使用浏览器自带的api:
getElementById,getElementsByName,getElementsByTagName,getElementsByClassName(IE9+),以及高端浏览器支持的querySelector ,querySelectorAll 。
所以Sizzle并不一定是从最后一个选择器开始查找,而是从最右边找到第一个可以使用原生api方法查找DOM的选择器开始的。
Sizzle会在这一步生成一个查询集。
同时从第一步生成的数组中剔除刚刚使用过的那个选择器。(此时,如果剔除之后数组为空了,则说明刚刚得到的查询集就是需要得到的最终结果。
3、Sizzle最复杂和优化效率最高的就是接下来如何从第二步得到的结果集中最终得到需要的结果。
涉及到的方法或属性有:
Expr.relative
Expr.find
select()
...