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 代码会被解析成类似下面的一棵 $\color{#db5a6b}{css 树}$ ：

[
  {
    type: 'element',
    name: 'div', 
    children: [
      type: 'class',
      name: 'b'
      styles: [
        { color: '#fff'},
      ]
    ]
   },
]。

在构建 DOM 树的时候，发现 class 属性时，根据对应的规则解析 class 属性，再拿着解析出来的属性匹配 CSS 树，当满足一段就往 DOM 树的下一层匹配。上面例子的匹配流程：当匹配到标签 div 以后就会向下匹配 b，当然也不能一直向下匹配，还得回退，当遇到第一个 CSS 规则的结束标签</div>的时候就得回退，否则后面的 p 元素也会被选中。

浏览器会根据设置好解析复合解构的规则，去解析 DOM 树里的 class 属性，并使 DOM 树里的节点带上 css 属性生成一颗新的树称为 $\color{#db5a6b}{render 树}$ 。