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 硬件渲染、混合渲染模型等方式，这些一样会以之后加以剖析