WebKit 渲染过程

webkit笔记，主要来自朱永盛《WebKit技术内幕》学习笔记，转载就注明原著，该书是国内仅有的Webkit内核的书籍，学习的好导师，推荐有兴趣的朋友可以购买

Webkit渲染过程包括很多数据和模块

数据：网页内容，DOM树，内部表示，图像

模块：HTML解释器，CSS解释器，JavaScript引擎，布局和绘图模块

根据数据的方向，渲染分三个阶段

1，网页的URL 到构建完DOM 树

2，DOM树到构建完 Webkit的绘图上下文

3，绘图上下文到最终的图像

下面是详细的对三个步骤的描述（本应该虚线，表示依赖关系）

从网页URL 到 DOM 树

上图描述的是从网页URL 到构建完 DOM树这个过程，数字表示的是基本顺序，也不是严格的一致，因为这个过程可能重复并且交叉

具体过程：

1，当 user 输入网页URL的时候，WebKit 调用其资源加载器加载该 URL对应的网页

2，加载器依赖网络模块建立连接，发送请求并接受答复

3，WebKit接受各种网页或者资源的数据，其中某些资源可能是同步或异步获取的

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

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

6，如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行

7，JavaScript 代码可能会修改　DOM 树的结构

8，如果节点需要依赖其他资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前　DOM 树的创建

如果是JavaScript资源URL（没有标记异步方式），则需要停止当前 DOM 树的创建，直到 JavaScript 的资源加载并被JavaScript引擎执行后才继续DOM树的创建

在上述过程中，网页在加载和渲染过程中会发出 "DOMConent" 事件和 DOM 的 "onload" 事件，分别在 DOM 树构建完之后，以及 DOM 树建完并且网页所依赖的资源都

加载完之后发生，因为某些资源的加载并不会阻碍 DOM 树的创建，所以这两个事件多数时候不是同时发生的

接下来就是 WebKit利用 CSS 和 DOM 树构建 RenderObject 树直到绘图上下文

从 CSS 和 DOM 树到绘图上下文

这一阶段的具体过程如下：

1， CSS 文件被 CSS 解释器解释成内部表示结构

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

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

其实这中间还有复杂的内部过程，具体后面章节中介绍

RenderObject树的建立并不表示 DOM 树会被销毁，事实上，上述图中的四个内部表示结构一直存在，直到网页被销毁，因为它们对于网页的渲染起了非常大的作用

最后就是根据绘图上下文来生成最终的图像，这一过程主要依赖于 2D 和 3D 图像库（都应该是曲线）

从绘图上下文到最终的图像

图中这一阶段对应的具体过程如下：

1，绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类

2，绘图实现类也可能有简单的实现，也有可能有复杂的实现。在Chromium中，它的实现相当复杂，需要Chromium的合成器来完成复杂的多进程和 GPU加速机制。后面详述

3，绘图实现类将 2D 图形库或者 3D 图形库绘制的结果保存下来，交给浏览器来同浏览器界面一起显示

这一过程实际上可能不想图中描述的那么简单，现代浏览器为了绘图上的高效性和安全性，可能会在这一过程中引入复杂的机制。而且，绘图也从之前单纯的软件渲染，

到现在的GPU 硬件渲染、混合渲染模型等方式，这些同样会以以后加以剖析

巴特西