WebKit渲染过程----《WebKit技术内幕》读书笔记

       在浏览器中，有一个最重要的模块，它主要作用是将页面转变成可视化的图形结果，这就是浏览器内核。通常，它也被称为渲染引擎。所谓的渲染，就是根据描述或者定义构建数学模型，通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。

     根据渲染引擎所提供的渲染网页的功能，一般而言，它需要包含很多模块，主要分三层，最上层用虚线框住的是渲染引擎所提供的功能。

 

      从图中大致可以看出，一个渲染引擎主要包括HTML解释器、CSS解释器、布局和JavaScript引擎等，其他还有绘图模块、网络等并没有在图中直接表示出来。

      这些模块依赖很多其他的基础模块，这其中包括网络、存储、2D/3D图形、音频视频和图片解码器等。实际上，渲染引擎中还应该包括如何使用这些依赖模块的部分。

     一般的渲染过程：如下图，从左上角开始，首先是网页内容，输入到HTML解释器，HTML解释器在解释它后构建成一棵DOM树，这期间如果遇到JavaScript代码则交给JavaScript引擎去处理；如果网页中包含CSS，则交给CSS解释器去解释。当DOM建立的时候，渲染引擎接收来自CSS解释器的样式信息，构建一个新的内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。

 

      图中虚线表示在渲染过程中，每个阶段可能使用到的其他模块。在网页内容的下载中，需要使用到网络和存储，这点显而易见。但计算布局和绘图的时候，需要使用2D/3D的图形模块，同时因为要生成最后的可视化结果，这时需要开始解码音频、视频和图片，同其他内容一起绘制到最后的图像中。

      在渲染完成之后，用户可能需要跟渲染的结果进行交互，或者网页自身有动画操作，一般而言，这需要持续的重复渲染过程。

 

 

        浏览器的主要作用就是将用户输入的URL转变成可视化的图像。按照某些文档的分析，这其中包含两个过程，其一是网页加载过程，就是从URL到构建DOM树；其二是网页渲染过程，从DOM树到生成可视化图像。其实，这两个过程也会交叉，很难给予明确的区分，所以，为了简单起见，统称网页渲染过程。

    网页渲染还有一个特性，就是网页通常比我们的屏幕可视面积要大，而当前可见的区域，我们称为视图（viewport）。因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页。就用户体验来说，垂直方向滚动效果好于水平方向。

 

     整个渲染的过程中的包含数据和模块是：数据包含网页内容、DOM、内部表示和图像，模块则包括HTML解释器、CSS解释器、JavaScript引擎以及布局和绘图模块。

    根据数据的流向，这里将渲染过程分成三个阶段，第一个阶段是从网页的URL到构建完DOM树，第二个阶段是从DOM树到构建完WebKit的绘图上下文，第三个阶段是从绘图上下文到生成最终的图像。

 

      图中描述的是从网页URL到构建完DOM树的这个过程，数字表示的是基本顺序，当然也不是严格一致，因为这个过程可能重复并且可能交叉。

    具体的过程如下。

    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树的创建。

 

    在上述的过程中，网页在加载和渲染过程中会发出“DOMContent”事件和DOM的"onload"事件，分别在DOM树构建完成之后，以及DOM树建完并且网页所依赖的资源都加载完成之后发生，因为某些资源的加载并不会阻碍DOM树的创建，所以这两个事件多数时候不是同时发生的。

    接下来就是WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文

    

 

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

    1.css文件被css解释器解释成内部表示结构

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

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

 

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

    最后就是根据绘图上下文生成最终的图像，这一过程主要依赖2D和3D图形库，如下图：

 

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

    

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

2.绘图实现类也可能有简单的实现，也可能有复杂的实现。

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

 

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

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