WebKit渲染过程

WebKit渲染过程

WebKit 是一个开源的浏览器引擎,浏览器渲染的过程就是根据描述或定义构建数据模型，通过模型生成图像的过程, 浏览器的渲染引擎就是将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。
主流的渲染引擎WebKit（对应的平台Safari,Chromium/Chrome,Android浏览器，ChromeOS，webOS）

渲染引擎提供的主要功能包括:

• HTML解释器，将文本解析未DOM树,若解析到Javascript的node结点,则提交个javaScriptCore引擎执行,可能会更新DOM树.

• CSS解析式, 计算DOM的对象样式信息,为网页的布局和绘制提供基础数据模型

• Layout, WebKit将元素对应的布局信息结合起来,计算他们的位置和布局信息,形成element的表示模型

• 绘制,将布局计算后的各网页节点绘制成图像结果

渲染网页过程

graph LR;

网页内容-->HTML解释器
网页内容-.->网络
网页内容-.->存储

HTML解释器-->CSS解释器
HTML解释器--->DOM
HTML解释器--->|<javascript>|JavaScript引擎
JavaScript引擎-->|html字符|HTML解释器

DOM--->|<javascript>|JavaScript引擎
DOM--->内部表示
CSS解释器---内部表示
JavaScript引擎-->内部表示
JavaScript引擎-->|update|DOM
内部表示---布局和绘图

布局和绘图-->图像
布局和绘图-.->2D/3D图形
布局和绘图-.->音视频
布局和绘图-.->图片解码器

1. 首先加载并缓存网页内容,输入到HTML解释器，HTML解释器在解释它后构建成一棵DOM树，

2. 这期间如果遇到JavaScript代码则交给JavaScript引擎去处理；

3. 如果网页中包含CSS，则交给CSS解释器去解释。

4. 当DOM建立的时候，渲染引擎接收来自CSS解释器的样式信息，构建一个新的内部绘图模型。

5. 该模型交给布局模块计算模型内部各个元素的位置和大小信息，最后绘图模块完成从模型到图像的绘制。

6. 在计算布局和绘图的时候，需要使用2D/3D的图形模块，同时因为要生成最后的可视化结果，这时需要开始解码音频、视频和图片，同其他内容一起绘制到最后的图像中。

把html文档解析后的各个Node组成的DOM元素叫做DOM树
各个Node对应的css信息生成对应的RenderObject,最后形成RenderTree
根据RenderTree构建一个LayerTree用于绘制网页内容
绘制上下文会调用系统api(2D/3D)来生成布局,如果有多媒体信息还会调用Meida/Audio

DOM树

1. 用户输入网页URL的时候，WebKit调用资源加载器加载改URL对应的网页。加载器依赖网络模块建立连接，发送请求并接收答复。
2. WebKit接收到各种网页或资源的数据，其中某些资源可能是同步或异步获取的。
3. 网页被交给HTML解释器转变成一系列的词语（Token）。
   解释器根据词语构建节点（Node），形成DOM树。
4. 如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
5. JavaScript代码可能会修改DOM树的结构。如果节点需要依赖其它资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；

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

在网页加载和渲染过程中，会发出“DOMContent”事件和DOM的“onload”事件，分别在DOM树构建完成之后，以及DOM构建完成并且网页所有的资源都加载完之后发生。

参考链接

WebKit技术内幕
WebKit架构
JavaScriptCore wiki
WebKit百度百科