CSS 语法解析过程
1.在浏览器系列文章中，今天终点讲下CSS解析这块内容.我们已知浏览器的渲染流程中HTML Parser会生成 DOM树，而 CSS Parser会将解析结果附加到 DOM 树上，如下图：
解析分为词法分析 和 语法分析。
词法分析，也是编译原理中的术语，从左到右一个字符一个字符的读入源程序，对字符流进行扫描，根据构词规则识别单词。这一过程可以使用lex等工具自动生成。
语法分析，主要任务是在词法分析的基础上，将单词序列组合成各类语法短语，如“程序”， “语句”，“表达式”
解析工作通常会被拆分为两个组件：
- 词法分析器，负责将输入流分解成有效的字符。
- 解析器，负责根据不同语言的语法规则来分析文档结构，最后构造出解析树。
词法分析器知道如何去除不相关的字符，比如空格和换行
具体到css解析，因为它是上下文无关的语法，可以利用各种解析器进行解析。webkit 使用Flex 和 Bison 解析器生成器，通过css 语法文件自动创建解析器。解析器将CSS文件解析成StyleSheet对象，且每个对象都包含CSS规则。CSS规则包含选择器和声明对象。
2.CSS 有自己的规则，一般如下：
WebKit 使用 Flex 和 Bison 解析器生成器，通过 CSS 语法文件自动创建解析器。Bison 会创建自下而上的移位归约解析器。Firefox 使用的是人工编写的自上而下的解析器。
这两种解析器都会将 CSS 文件解析成 StyleSheet 对象，且每个对象都包含 CSS 规则。CSS 规则对象则包含选择器和声明对象，以及其他与 CSS 语法对应的对象。
3.CSS 解析过程会按照 Rule，Declaration 来操作：
4.那么他是如何解析的呢，我们不妨打印一下 CSS Rules：
控制台输入：
document.styleSheets[0].cssRules
打印出来的结果大致分为几类：
- cssText：存储当前节点规则字符串
- parentRule：父节点的规则
- parentStyleSheet：包含 cssRules，ownerNode，rules 规则
- …
规则貌似有点看不懂，不用着急，我们接着往下看。
打印出来的结果大致分为几类：
5.CSS 解析和 Webkit 有什么关系？
CSS 依赖 WebCore 来解析，而 WebCore 又是 Webkit 非常重要的一个模块。
要了解 WebCore 是如何解析的，我们需要查看相关源码：
CSSRule* CSSParser::createStyleRule(CSSSelector* selector)
{
CSSStyleRule* rule = 0;
if (selector) {
rule = new CSSStyleRule(styleElement);
m_parsedStyleObjects.append(rule);
rule->setSelector(sinkFloatingSelector(selector));
rule->setDeclaration(new CSSMutableStyleDeclaration(rule, parsedProperties, numParsedProperties));
}
clearProperties();
return rule;
}
从该函数的实现可以很清楚的看到，解析器达到某条件需要创建一个 CSSStyleRule 的时候将调用该函数，该函数的功能是创建一个 CSSStyleRule，并将其添加已解析的样式对象列表 m_parsedStyleObjects 中去，这里的对象就是指的 Rule。
注意：源码是为了参考理解，不需要逐行阅读！
Webkit 使用了自动代码生成工具生成了相应的代码，也就是说词法分析和语法分析这部分代码是自动生成的，而 Webkit 中实现的 CallBack 函数就是在 CSSParser 中。
CSS 选择器执行顺序
渲染引擎解析 CSS 选择器时是从右往左解析，这是为什么呢？举个例子：
<div>
<div class="jartto">
<p><span> 111 </span></p>
<p><span> 222 </span></p>
<p><span> 333 </span></p>
<p><span class='yellow'> 444 </span></p>
</div>
</div>
<style>
div > div.jartto p span.yellow {
color: yellow;
}
</style>
我们按照「从左到右」的方式进行分析：
- 先找到所有
div节点。 - 在
div节点内找到所有的子div，并且是class = “jartto”。 - 然后再依次匹配
p span.yellow等情况。 - 遇到不匹配的情况，就必须回溯到一开始搜索的
div或者p节点，然后去搜索下个节点，重复这样的过程。
这样的搜索过程对于一个只是匹配很少节点的选择器来说，效率是极低的，因为我们花费了大量的时间在回溯匹配不符合规则的节点。
我们按照「从右向左」的方式进行分析：
- 首先就查找到
class=“yellow”的span元素。 - 接着检测父节点是否为
p元素，如果不是则进入同级其他节点的遍历，如果是则继续匹配父节点满足class=“jartto”的div容器。 - 这样就又减少了集合的元素，只有符合当前的子规则才会匹配再上一条子规则。
综上所述，我们可以得出结论：
浏览器 CSS 匹配核心算法的规则是以从右向左方式匹配节点的。
这样做是为了减少无效匹配次数，从而匹配快、性能更优。
所以，我们在书写 CSS Selector 时，从右向左的 Selector Term 匹配节点越少越好。
不同 CSS 解析器对 CSS Rules 解析速度差异也很大，感兴趣的童鞋可以看看 CSS 解析引擎，这里不再赘述。
参考文档：
https://segmentfault.com/a/1190000018759693
https://segmentfault.com/a/1190000021073560
