在构建 DOM 树的时候,里面只有节点的信息没有 css 的信息,浏览器是怎么确定节点的样式的呢?
DOM 树的装饰
浏览器为了使性能最大化,会尽可能地并行式的处理很多事务,给 DOM 树装饰这件事也一样是跟生成 DOM 树并行的,并不需要等 DOM 树生成。
构建 DOM 树的时候就是一个一个节点的处理,浏览器当然可以在一个一个节点挂在到 DOM 树的过程中把节点对应的 CSS 属性计算出来。
CSS 属性的计算
css 中的规则:空格、>、+、~、||等,关于选择器的知识在这默认都是已知的,这里只讲浏览器对这些规则的处理。
要注意一点,选择器是跟着它对应的结点一起出现的,所以能使浏览器在 DOM 树构建当前节点的时候已经可以判断选择器是否能匹配上。
css 代码的解析也离不开词法分析和语法分析。
举一个简单的例子:
// css
div .b {
color: #fff;
}
// html
<div>
<h1>title</h1>
<p class="b">description</p>
</div>
<p class="b">description</p>
与 DOM 树的构建类似,css 的代码也会被浏览器解析成一颗 CSS 树,把 CSS 选择器按照类名和符号拆成一段一段的,上述的 css 代码会被解析成类似下面的一棵 c s s 树 \color{#db5a6b}{css 树} css树:
[
{
type: 'element',
name: 'div',
children: [
type: 'class',
name: 'b'
styles: [
{ color: '#fff'},
]
]
},
]。
在构建 DOM 树的时候,发现 class 属性时,根据对应的规则解析 class 属性,再拿着解析出来的属性匹配 CSS 树,当满足一段就往 DOM 树的下一层匹配。上面例子的匹配流程:当匹配到标签 div 以后就会向下匹配 b,当然也不能一直向下匹配,还得回退,当遇到第一个 CSS 规则的结束标签的时候就得回退,否则后面的 p 元素也会被选中。
浏览器会根据设置好解析复合解构的规则,去解析 DOM 树里的 class 属性,并使 DOM 树里的节点带上 css 属性生成一颗新的树称为 r e n d e r 树 \color{#db5a6b}{render 树} render树。
END…我是个有底线的家伙…END