构建CSSOM树的过程和构建DOM的过程时类似的,使用css解析器,不过在将css转换成浏览器能够识别的结构document.styleSheets后,还需要进行一些操作。
一、转换样式表中的属性值,使其标准化
为什么要将样式表中的属性值转换成标准化呢?因为CSSOM的结构浏览器能识别了,但是样式的某些属性值,渲染引擎却不容易识别,比如:color或者background-color值为blue、red等值,font-szie值为2em或者2rem等。
渲染引擎会将代表颜色的值都转换成rgb格式,em、rem转换成px等。
二、计算出每个DOM元素的样式
继承:子元素会继承父元素的属性。
层叠:样式的累加。
渲染引擎根据继承和层叠原则计算出每一个DOM元素的样式,并保存在ComputedStyle结构中。