Render tree construction 渲染树构建

1. Render tree的构建

• 从 DOM 树的根节点开始，遍历每个可见的节点。
• 某些节点完全不可见（例如 script 标签、meta 标签等），因为它们不会在渲染结果中反映，所以会被忽略。
• 某些节点通过 CSS 隐藏，因此在渲染树中也会被忽略。比方说，有一个 span 节点，因为该节点有一条显式规则设置了 display:none 属性，所以不会出现在渲染树中。
• 给每个可见节点找到相应匹配的 CSSOM 规则，并应用这些规则。
• 发射可见节点，连带其内容及计算的样式。

2. Render tree和DOM tree的关系

• DOM树和HTML标签一一对应，包括head和隐藏元素。
• 渲染对象和DOM元素相对应，但不是一对一的。不可见的DOM元素不会被插入渲染树，例如head元素，display属性为none的元素（visibility属性为hidden的元素将出现在渲染树中）。
• 还有一些DOM元素对应几个可见对象，它们一般是一些就有复杂结构的元素。
• 一些渲染对象和所对应的DOM节点不在树上相同的位置。例如，浮动和绝对定位的元素在文本流之外，在两棵树上的位置不同，渲染树上标识出真实的结构，并用一个占位结构标识出它们原来的位置。

3. 样式计算

创建渲染树需要计算出每个渲染对象的可视属性，这可以通过计算每个元素的样式属性得到。

但样式的来源多样，计算时存在一些困难：

1. 保存大量样式属性数据会带来内存问题。
2. 在未优化的情况下，找到每个元素匹配的规则需要遍历整个规则表，工作量巨大。
3. 应用规则涉及非常复杂的级联。

于是浏览器进行共享数据样式来处理这些问题。

3.1 共享数据样式

引用样式对象（渲染样式） 在某些情况下，节点可以共享这些对象。这些节点是同级或表亲，并且：

1. 这些元素必须处于相同的鼠标状态
2. 两个元素都不应该有 id
3. 标签名称应匹配
4. 类属性应匹配
5. 映射的属性集必须相同
6. 链接状态必须匹配
7. 焦点状态必须匹配
8. 这两个元素都不应受到属性选择器的影响，其中受影响的元素被定义为具有在选择器内的任何位置使用属性选择器的任何选择器匹配项
9. 元素上不得有内联样式属性
10. 根本不能使用同级选择器

浏览器将创建两个树来简化样式计算实现数据样式共享--规则树和样式上下文树。

3.2 规则树

所有匹配的规则都存储在规则树中，这棵树包含了所找到的所有规则匹配的路径。一条路径中的底层节点拥有最高的优先级。

可计算出的规则树样例：

3.3 样式上下文树

当为一个特定的元素计算样式时，首先计算出规则树中的一条路径，或是使用已经存在的一条，然后使用路径中的规则去填充新的样式上下文，从样式的底层节点开始，它具有最高优先级（通常是最特定的选择器），遍历规则树，直到填满结构。如果在那个规则节点没有定义所需的结构规则，则沿着路径向上，直到找到该结构规则。

3.4 使用规则树计算样式上下文

假设有如下HTML代码：

以及下面这些规则：

结合以上代码生成规则树如下：

生成上下文树如下：

 

3.5 计算过程详解

假设我们解析到了第二个<div>标签。

首先，进行规则匹配。发现<div>的匹配规则时1、2和6，即 .div 、.err 、#div2 。此时树中已经有可以复用的路径1、2，我们只需将6添加进入树中。

接着，进行样式结构填充。从填充margin结构开始，由于最后一个节点F没有margin结构，我们将沿着树向上走，在B节点上找到它，并进行填充。该节点是指定margin规则的最上层节点。

3.6 样式表的级联顺序

根据css2的规范，级联顺序为（从低到高）：

浏览器声明 < 用户声明 < 作者的一般声明 < 作者的important声明 < 用户important声明

​