这篇主要讲的是 Webkit 的网页渲染过程,所以和网上那个比较流行的面试题(输入url到页面展示有哪些过程)有点不同啦。

这里说的网页渲染过程其实包含两个过程一个是网页加载过程，从url到构建 DOM 树，第二个就是网页渲染过程，从 DOM 树到生成可视化图像，因为两个过程有交叉，所以直接叫做 网页渲染过程了。

上一篇大致讲了页面的基本渲染流程，这里再详细记录一下 webkit 的网页渲染过程。 主要大致分三个过程：第一阶段是从URL到构建完 DOM树，第二阶段是 DOM 树到构建完 webkit 的绘图上下文，第三个阶段是从绘图上下文到最终生成的图像。

我们还是分别看图来理解三个阶段

这里分别解释一下1-8每步的作用：

1.表示当用户输入 URL时，Webkit调用其资源加载器，加载该url对应的资源

2.加载器依赖网络模块建立链接，发生请求，并接受答复。

3.webkit接收到各种网页请求或者资源的数据，其中某些资源可能同步或异步。

4.网页交给 HTML 解释器转变成一系列的词语(Token)

5.解释器根据词语构建 DOM 节点，形成 DOM 树

6 如果节点有 js 代码，调用 javaScript 引擎

7.其中 js 有可能修改 DOM 树结构

8.如果节点还需要加载其他资源(视频图片之类的)，就会调用加载器加载他们，但这个过程是异步的，不会阻碍当前 DOM 树的创建。

上面就是第一阶段的过程了，下面再说第二阶段

这个具体过程大概是：

1.css文件被 css解释器解释内部表示结构

2.css解释器工作完成之后，在 DOM 树上附加解释后的样式信息，这就是 RenderObject

3.RenderObject 节点在创建的同时，ｗebkit 根据网页的层次结构创建 RenderLayer 树，同时构建一个虚拟的绘图上下文。

上面图中的四个内部表示结构是一直存在的，除非网页被销毁。

最后一个就是第三阶段，根据绘图上下文生成最后的图像。还是画个图来看：

以上三个阶段基本介绍完了一个完成的网页渲染过程。由于现在的网页有动态交互等，所以浏览器其实一直在不停的重复执行渲染过程。

下面举个例子在浏览器里来看看实际的情况吧。

我把的我demo在 chrome 浏览器里打开，(demo是个html文件只有一张图)。

然后打开chrome 的开发者工具，在　network 里发现如下所示的结果

可以发现最终加载了两个资源，一个html页面，一个图片。我们还可以发现右边两条竖线，第一条表示 DOM 已经加载完成，第二条表示资源全部加载完成。你仔细观察会发现第二条线出现在图片加载完成之后(这不废话吗，呵呵)。 第二条线出现之后表明第一阶段完成了，下面再看看第二，三阶段。

同样在 chrome 里的开发者工具里点击 TimeLine，然后点击那个红圆点，刷新页面，重新渲染网页。网页加载完之后再点击那个红圆点。应该会出现如下所示的情况:

这个 TimeLine 是根据时间来获取网页渲染的动作过程的。 从图中我们可以看出蓝色部分表示的是第一阶段加载 DOM资源的，紫色的虽然只显示了 Layout布局，但他表示的是第二阶段。绿色的表示的是第三阶段绘图阶段(paint绘制节点和composite Layers合成网页的层次)。

好了，至此这个webkit网页渲染过程就介绍完了。期待下文...