理解WebKit和Chromium: 网页渲染的基本过程

转载请注明原文地址:http://blog.csdn.net/milado_nju

## 概述

前面介绍了一些渲染引擎的功能,包括网络,资源加载,DOM树,RenderObject树等等,但是,给人以零乱的感觉,因为没有一个整体的过程描述它们在这个过程中的位置,它们只是整个渲染引擎工作的一个或者多个步骤而已。

渲染引擎的主要目的就是从一个网页的URL开始,经过一系列的复杂处理过程之后,变成一个可视化的结果,这一过程就是这里所说的页面渲染的基本过程。

所谓的渲染,就是根据描述或者定义构建数学模型,通过模型生成图像的过程。浏览器的渲染引擎就是能够将HTML/CSS/JavaScript转换成图像结果的模块,如下图所示,输入是URL对应的各种资源,输出是可视化的图像。从这里看,非常的简单和容易理解。

理解WebKit和Chromium: 网页渲染的基本过程

## 渲染模块

那么渲染引擎提供了哪些功能模块来支持页面渲染的呢?下图是一个渲染引擎所包含的基本功能和它们依赖的一些第三方库。

理解WebKit和Chromium: 网页渲染的基本过程

从图中大致可以看出,一个渲染引擎大致包括HTML解释器,CSS解释器,布局和JavaScript引擎。下面依次来描述它们:

HTML解释器:解释HTML语言的解释器,本质是将HTML文本解释成DOM(文档对象模型)树。

CSS解释器:解释样式表的解释器,其作用是将DOM中的各个元素对象加上样式信息,从而为计算最后结果的布局提供依据。

布局:DOM之后,需要将其中的元素对象同样式信息结合起来,计算它们的大小位置等布局信息,形成一个能够表示这所有信息的内部表示模型。

JavaScript引擎:JavaScript可以修改网页的内容,也能修改CSS的信息,JavaScript引擎解释JavaScript代码并把代码的逻辑和对DOM和CSS的改动信息应用到布局中去,从而改变渲染的结果。

这些模块依赖很多其他的基础模块,这其中包括网络,存储,2D/3D图形,音频视频和图片解码器等。实际上,渲染引擎中还应该包括如何使用这些依赖模块的部分,这部分的工作其实并不少,因为需要使用它们来高效的渲染网页。例如,利用2D/3D图形库来实现高性能的网页绘制和网页的3D渲染,这个实现非常非常的复杂。最后,当然,在最下面,依然少不了操作系统的支持,例如线程支持,文件支持等等。

## 基本过程

了解模块之后,下面就是这些模块如何组织以达成渲染过程的。一般地,一个典型的渲染过程下图所示,这是渲染引擎的核心过程,一切都是围绕着它来的。

理解WebKit和Chromium: 网页渲染的基本过程

下面逐个从左至右来解释上图中的这一过程。这一过程的先后关系由图中的实线箭头表示。左上角开始,首先是网页内容,送到HTML解释器。HTML解释器在解释它后形成DOM树,中间如果遇到JavaScript代码则交给JavaScript引擎去处理。如果页面包含CSS,则交给CSS解释器去解析。当DOM建立的时候,接受来自CSS解释的样式信息,构建一个新的内部绘图模型。该模型由布局模块计算模型内部的各个元素的位置和大小信息,最后由绘图模块完成从该模型到图像的绘制。

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

在渲染完成之后,用户可能需要跟渲染的结果进行交互,或者网页自身有动画,一般而言,这会持续的重新渲染过程。这个过程跟上面类似,不再赘述。

## 参考资料

1.      http://www.paulirish.com/2013/webkit-for-developers/

by yongsheng@chromium.org

上一篇:loj#2531. 「CQOI2018」破解 D-H 协议(BSGS)


下一篇:正则取页面图片URL和TABLE BackGround