Webkit的网页渲染过程

1.加载和渲染

浏览器的主要作用就是讲用户输入的'URL'转变成可视化的图片.按照某些文档的分析,这其中包含了两个过程,其一是网页加载过程,就是从'URL'到构建DOM树;其二是网页渲染过程,从DOM树到生成可视化图像;
以下统称这两个过程为网页的渲染过程

2.WebKit的渲染过程

根据数据的流向,这里讲渲染过程分为三个阶段:

• 1.从网页的URL到构建完DOM树
• 2.从DOM树到构建完WebKit的绘图上下文
• 3.从绘图上下文到生成最终的图像

从网页URL到构建完DOM树的这个过程

[图片上传失败...(image-14c65e-1528958767644)]
1.当用户输入网页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树的创建,所以这两个事件多数时候不是同时发生的.

从CSS和DOM树到绘图上下文

[图片上传失败...(image-295380-1528958767644)]
1.CSS文件被CSS解释器解释成内部表示结构
2.CSS解释器工作完之后,在DOM树上附加解释后的样式信息,这就是RenderObejct树
3.RenderObject节点在创建的同时,WebKit会根据网页的层次信息创建RenderLayer树,同时构建一个虚拟的绘图上下文

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

从绘图上下文到最终的图像(主要依赖2D和3D图形库)

[图片上传失败...(image-38a1d-1528958767644)]

1.绘图上下文是一个与平台无关的抽象类,也就是绘图具体实现类
2.绘图实现类也可能有简单的实现,也可能有复杂的实现,在Chromium中,它的实现相当复杂,也可能有更复杂的实现,需要Chromium的合成器来完成复杂的多进程和GPU加速机制,这在后面会设计
3.绘图实现类将2D图像库或者3D图像库绘制的结果保存下来,交给浏览器来同浏览器界面一起显示

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

上面介绍的是一个完整的渲染过程.现代网页很多是动态网页,这意味着在渲染完成之后,由于网页的动画或者用户的交互,浏览器其实一直在不同地重复执行渲染过程