第一章 浏览器和浏览器内核

webkit技术内幕

1. 技术内幕

1. 渲染：根据描述或定义构建数学模型，通过模型生成图像的过程。

浏览器的渲染引擎就是将HTML/CSS/JavaScript文本及其相应的资源文件转换成图像结果的模块。

2. 主流的渲染引擎包括Trident、Gecko和WebKit，它们分别是IE、火狐和Chrome的内核。

	Trident	Gecko	WebKit
基于渲染引擎的浏览器或者Web平台	IE	Firefox	Safari,Chromium/Chrome,Android浏览器，ChromeOS，webOS

3. 渲染引擎提供的功能包括：

• HTML解释器

将HTML文本解释成DOM树。

• CSS解释器

为DOM中的各个元素对象计算出样式信息，从而为计算最后网页的布局提供基础设施。

• 布局（layout）

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

• JavaScript引擎

JavaScript引擎能够解释JavaScript代码并通过DOM接口和CSSOM接口来修改网页内容和样式信息，从而改变渲染的结果。

• 绘图

使用图形库将布局计算后的各个网页的节点绘制成图像结果。

4. 浏览器渲染网页过程

   
   
   渲染过程.png

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

---

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

---

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