WebKit 渲染过程

时间:2023-03-08 16:05:19
WebKit 渲染过程

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

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

数据:网页内容,DOM树,内部表示,图像

模块:HTML解释器,CSS解释器,JavaScript引擎,布局和绘图模块

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

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

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

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

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

WebKit 渲染过程

从网页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 树 直到 绘图上下文

WebKit 渲染过程

从 CSS 和 DOM 树 到 绘图上下文

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

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

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

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

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

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

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

WebKit 渲染过程

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

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

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

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

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

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

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