DOM tree 和 CSS tree 是如何合并成 render tree 的？
合并原理
在 DOM tree 构建的同时，浏览器会构建另一个树结构 render tree(Gecko 中称为 frame tree)。这是由可视化元素按照其显示顺序而组成的树，也是文档的可视化表示。它的作用是按照正确的顺序绘制的内容
具体流程
WebKit 的流程展示：
-
DOM: HTML -> HTML Parser -> DOM Tree -> Attachment
-
CSSOM: Style Sheets -> CSS Parser -> Style Rules -> Attachment
-
Attachment -> Render Tree -> Painting -> Display
-
Render Tree <-> Layout
-
1. 解析 HTML 构建 DOM，同时解析样式表构建 CSSOM;
-
2. 对 WebKit：每个 DOM 节点都有一个 attach 方法。attach 是同步进行的，将节点插入 DOM tree 需要调用新的节点 attach 方法；
-
3. 对 Firefox：系统会针对 DOM 更新注册展示层作为侦听器。展示层将 frame 创建工作委托给 FrameConstructor，由该构造器解析样式并创建 frame；
-
4. 处理 html 和 body 标记就会构建 render tree 根节点。这个根节点呈现对象对应于 CSS 规范中所说的容器 block，这是最上层的 block，包含了其他所有 block。它的尺寸就是视口，即浏览器窗口显示区域的尺寸。Firefox 称之为 ViewPortFrame，而 WebKit 称之为 Render View。这就是文档所指向的呈现对象。render tree 的剩余部分以 DOM tree 节点插入的形式来构建。
详细内容可以参考：
