css解析逆序匹配

1.css解析什么时候开始

1. HTML 经过解析生成 DOM Tree
2. 而在 CSS 解析完毕后，需要将解析的结果与 DOM Tree 一起进行分析建立一棵 Render Tree，最终用来进行绘图
3. 在建立 Render Tree 时，浏览器就要为每个 DOM Tree 中的元素根据 CSS 的解析结果来确定生成怎样的 renderer
4. 选择器的「解析」实际是在这里执行的，在遍历 DOM Tree 时，从 Style Rules 中去寻找对应的 selector

2.css解析为什么是逆序

正序解析的弊端：
1. 因为所有样式规则可能数量很大，而且绝大多数不会匹配到当前的 DOM 元素
2. 因为数量很大所以一般会建立规则索引树，所以有一个快速的方法来判断就是极其重要的
3. 如果正向解析，例如「div div p em」，我们首先就要检查当前元素到 html 的整条路径
4. 先找到最上层的 div 再往下找，如果遇到不匹配就回溯到 div，往下再去匹配选择器中的第一个 div，回溯若干次才能确定匹配与否，效率很低

css为什么逆序解析的好处：
1. 逆向匹配则不同，如果当前的 DOM 元素是 div，而不是 selector 最后的 em，那只要一步就能排除
2. 只有在匹配时，才会不断向上找父节点进行验证。
3. 在选择器结尾加上「*」就大大降低了这种优势，这也就是很多优化原则提到的尽量避免在选择器末尾添加通配符的原因。

本文地址：https://blog.csdn.net/qq_44818085/article/details/109366123