以webkit为例，dom渲染的过程是怎样的呢？
先来看一张图：
dom.png
大概分了这么几个步骤：
第一步：浏览器先下载html文件，html parser会将其解析为dom树；
第二步：下载css文件，css parser会将其解析为cssom树；
第三步：dom和cssom合成为render tree（呈现树）
第四步：布局/回流（layout/reflow）
第五步：绘制（paint）
我们一个一个来讲解。
dom树
dom树长得跟数据结构的二叉树差不多，相当于网页的骨架结构：
dom.png
cssom树
既然有dom树，当然也有cssom树了，全名就是css object model。
这个树可以认为是dom树的修饰文件（或者是配置文件）：
cssom.png
render树
render树，中文一般叫呈现树，不过也有人叫渲染树。
这个呈现树是什么意思呢？我们可以这么理解：
dom树是骨架，骨架构建完后就要读取css文件，每个dom元素会去cssom中查询自己的修饰信息，这就相当于合并dom和cssom的动作。而这个动作完成后，输出来的就是呈现树了。
呈现树的长相跟dom树不太一样，突出的是呈现二字，也就是一定要是肉眼看得到的东西。
比如<head>标签就不会出现在呈现树中，因为不可见，同样的还有display:none的元素，呈现树也不会构建。
呈现树主要是根据每个dom元素的display信息，构建成一个个的方块。
比如display:block的元素，会构建成一个大方块，而display:inline的元素，就构建成一个小方块。
这里我们放一段源码会更清晰：
RenderObject* RenderObject::createObject(Node* node, RenderStyle* style)
{
Document* doc = node->document();
RenderArena* arena = doc->renderArena();
...
RenderObject* o = 0;
switch (style->display()) {
case NONE:
break;
case INLINE:
o = new (arena) RenderInline(node);
break;
case BLOCK:
o = new (arena) RenderBlock(node);
break;
case INLINE_BLOCK:
o = new (arena) RenderBlock(node);
break;
case LIST_ITEM:
o = new (arena) RenderListItem(node);
break;
...
}
return o;
}
也就是说，呈现树是由多个带有视觉属性（比如颜色和尺寸）的方块组成。
这里还需注意：
呈现树的节点和dom树并不是一一对应的。比如select元素，dom树只有一个，而呈现树则会构建出三个：一个是显示区域，一个是下拉列表框，还有一个用于按钮。
最后看一眼呈现树的图。
rendertree.png
布局、回流
构建完呈现树后，我们需要根据每个元素的位置将其都摆放好，也就是为每个节点分配一个应出现在屏幕上的确切坐标，这就是layout布局；
当呈现树发生了变化时（比如js操作dom让某元素的位置发生了改变），那就得重新布局，这就是reflow回流。
绘制
布局动作完成后，GUI渲染线程会遍历呈现树，将每个节点绘制出来，这就是paint绘制。
你可以想象成喷墨打印机开始打印了。
网友评论