【浏览器渲染原理】解析和DOM树构建之CSS解析

一个级联样式表（CSS）是由一系列的规则组成的，每一条规则是由一个选择器和若干条声明组成的。每条声明是一个键值对，由属性和值组成。



CSS是上下文无关的语法，可以使用自上而下解析器或自下而上解析器。

Webkit中的CSS解析

解析器会将CSS文件解析成StyleSheet对象，且每个对象都包含CSS规则。CSS规则对象包含选择器和声明对象，以及其他与CSS语法对应的对象。

解析器先创建一个CSSStyleSheet对象，然后在对样式进行解析时，创建CSSStyleRule，并添加到已解析的样式对象列表中。解析完后，样式表中的所有样式规则都转化成了Webkit的内部模型对象CSSStyleRule对象。所有的CSSStyleRule对象都存储在CSSStyleSheet对象中。然后将CSSStyleSheet对象转换为CSSRuleSet对象。后面就基于这些CSSRuleSet对象来决定每个页面中的元素样式。

【参考资料】

1 http://blog.csdn.net/Li_Jiayu/article/details/5123727
2 htthttp://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/#The_browsers_we_will_talk_about

3 https://developer.mozilla.org/en-US/docs/Style_System_Overview
4 http://coolshell.cn/articles/9666.html