WebKit技术内部（一）WebKit的网页渲染过程

加载和渲染

概念：

     加载：从“URL”到构建DOM树。

     渲染：从DOM树到生成可视化图像。

实际上，这两个过程会交叉，很难明确区分。

 

视图（viewport）：网页通常比我们屏幕可视面积大，当前可见区域称为视图。

 

DOM树构建过程：

 

1. DOM解释器由上到下解析HTML，构造DOM树

2. 解析构造DOM树过程中，如果有节点依赖其他资源，如图片、CSS、视频等，调用资源加载器来加载它们。

    注：这些资源的加载不会阻碍当前DOM树的继续创建，它们是异步的。

3. 如果有节点是JavaScript代码，调用JavaScript引擎解释并执行。

    注：若该JavaScript资源未标记异步方式，当前DOM树的创建将会停止。

 

DOM树构建完发生事件DOMConent

DOM树构建完且资源都加载完发生DOM的onload事件

 

RenderObject树构建到绘图上下文过程：

 

1. CSS解释器解析CSS，构造CSS树

2. CSS树往DOM树上附加解释后的样式信息，构建RenderObject。

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

4. 绘图上下文通过调用2D和3D图形库，生成最终图像

 

重点：

DOM树到RenderObject，到最终图像的渲染过程并非是一步接下一步的，而是在不断重复这些过程，画面一点点渲染出来的。