假设最后一个css元素是html标签,selector从左到右解析proposal
时间:2023-03-30 23:21:06
CSS
现状目前浏览器css匹配核心算法规则匹配节点是从右到左的。如.root.subspan{...},浏览器渲染方式为span->.sub->.root其读取顺序变为:先找到所有的span,然后沿着span的父元素找到.sub,再次寻找.root,中途找到符合匹配规则的节点,加入到结果集中;如果一直到根元素html都没有匹配到,则不遍历这条路径,从下一个span开始重复这个过程。比如整个html只有一个span标签,那么从右到左的方式确实是最快的,但是往往大部分网页并不是只有一个span标签,多个span标签会有很多无效匹配.从左到右会好一点。示例:1
3
4.root.subspan{}先从右到左解析找到所有最右边的节点span,一共有4个。对于每个span,查找节点发现不是.sub,再向上查找节点,直到找到html,发现没有匹配。从下一个跨度开始重复该过程。在上面的例子中,有4个span至少有4个分支用于向上遍历。如果有1000个span不在.sub中,就会有1000次分支遍历,只有一个符合条件,会损失很多性能。从左到右的分析从.root开始,遍历所有子节点。如果没有找到.sub,则回到上一个节点遍历,直到找到.sub,再遍历.sub下的子节点,找到span。在上面的例子中,一次就可以找到满足条件的span。在上面的例子中,很明显,从左到右的解析比从右到左的解析更有效。当然也有一些情况,如果.root下的子节点比较复杂,需要多次遍历回溯,而.root外的span不多,从右到左的解析效率更高。proposal的写法大多不想给每个html标签加上cla??ss名,可以选择不同的html标签。像这样:
...
#subspan{}#sublabel{}#sub>div{}如果先找#sub再找html标签,css解析效率会更高。那么从左到右的解析比从右到左的解析更有效。所以提议如下:假设最后一个css元素是一个html标签,当父元素有ID或者Class选择器时,选择器是从左到右解析的,其他情况还是从右到左解析.ps:这里说一下这位妹子的一个想法,欢迎各位小伙伴一起讨论,如果大部分人觉得有道理,我想尝试给w3c组织提建议。其他链接原文地址:https://raoenhui.github.io/css/2019/03/30/left-to-rightHappycoding..:)