WebKit的一些笔记2（基础篇）

WebKit渲染网页

WebKit内核

我们可以通过下图了解这个过程是如何完成的：

1. 首先通过网络把网页内容载入到本地存储；
2. HTML解析器把它解释为DMO树，CSS解析器解析CSS部分，JS代码交给JS引擎去处理。几部分共同构成新的内部绘制模型；
3. 接着计算布局，也就是各个元素的大小和位置信息，最后由绘图模块完成图像的绘制。

网页渲染过程

主要分为三个过程：

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

第一阶段：从URL到构建DOM树

具体过程是：

1. 用户输入URL时，WebKit调用资源加载器，加载URL对应的资源；
2. 加载器依赖网络模块，建立连接，发出请求，并接受答复；
3. WebKit接受到各种网页请求或者资源，其中某些资源可能是同步或者异步；（优先载入JS脚本，因为JS脚本会改变DOM树，如果有比较大的数据，需要另开一个线程）
4. 网页交给HTML解释器，转变为一系列的Token；
5. 解释器根据Token构建DOM树；
6. 如果节点有JS代码则调用JS引擎；
7. JS有可能会改变DOM树的结构；
8. 如果节点还需要加载其他资源（视频或者图片之类的），就会再次调用加载器加载它们，但这个过程是异步的，不会阻碍DOM树的创建。

第二阶段：从DOM树到构架Webkit的绘图上下文

1. CSS文件被CSS解释器解释内部表示结构；
2. CSS解释器完成之后，在DOM树加上附加解释信息之后，就是RenderObject；
3. RenderObject创建的同时，WebKit根据网页层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

上图的四个内部表示结构（图右边的那四个）一直存在，除非网页被销毁。

第三阶段：根据绘图上下文生成最后的图像