背景

去年下半年，我在微信书架里加入了许多技术书籍，各种类别的都有，断断续续的读了一部分。

没有计划的阅读，收效甚微。

新年伊始，我准备尝试一下其他方式，比如阅读周。每月抽出1~2个非连续周，完整阅读一本书籍。

这个“玩法”虽然常见且板正，但是有效，已经坚持阅读五个月。

已读完书籍：《架构简洁之道》、《深入浅出的Node.js》、《你不知道的JavaScript（上卷）》、《你不知道的JavaScript（中卷）》、《你不知道的JavaScript（下卷）》、《数据结构与算法JavaScript描述》。

当前阅读周书籍：《WebKit技术内幕》。

HTML网页和结构

网页构成

基本元素和树状结构

简单来讲，HTML网页就是一种使用HTML语言撰写的文档。但是，现在的网页基本上都是动态网页(Dynamic HTML)，也就是网页可以出现动画，可以与用户交互，这就需要CSS样式语言和JavaScript语言。在这样的动态网页中，JavaScript代码用来控制网页内部的逻辑，CSS用来描述网页的显示信息。

整个网页可以看成一种树状结构，其树根是“html”，这是网页的根元素（或称节点）。根下面也包含两个子节点“head”和“body”。“head”的子女“style”包含的就是一段CSS代码，用来定义元素的样式信息。

CSS是一种样式表语言，用来描述元素的显示信息。在HTML的早期，内容和显示是混在一起的，最典型的例子莫过于使用table元素来展示数据。这对网页的代码结构非常不利。因为，如果Web开发者想修改数据的显示方式，也要修改数据本身，会很麻烦。有鉴于此，借鉴数据和显示分离的原理，规范设计者们可以将有关显示的信息例如颜色、大小、字体等抽取出来，使用CSS语言编写代码来描述它们，与HTML元素的内容分离开来。

JavaScript是一种解释型的脚本语言，主要目的是控制用户端逻辑、同用户交互等，它可以修改HTML元素及其内容。该语言是由网景发明，后被微软采用，虽然只是EMCAScript标准的一种实现，但是绝大多数浏览器都支持它。现在，JavaScript语言越来越重要，不仅被广泛使用，更是把工作领域拓展到了服务器端。

一个完整的网页组成包括HTML文本、JavaScript代码、CSS代码以及各种各样的资源文件。网络上的每个资源都是由URL(Unified Resource Locator)标记的，它是URI(Unified Resource Identifier)的一种实现。这表明对于浏览器来讲，区分两个资源是否相同的唯一标准就是它们的URL是否一致。

HTML5新特性

HTML5引入的最让人惊讶的最新能力之一是对2D和3D图形以及多媒体方面的支持，这将彻底改变网页的渲染方式和复杂度。这里包括但是不限于HTML5视频、Canvas 2D、WebGL（也就是Canvas 3D），以及CSS3 3D变换(transform)和转换(transition)。HTML5视频引入了一个新的“video”元素，支持在网页中播放视频。Canvas2D通过定义一个新的“canvas”元素，网页开发者利用该元素的2D绘图上下文(graphics context)调用标准定义的接口，绘制常见的2D图形，例如点、线、矩形、多边形等。WebGL则是使用“canvas”元素，网页开发者可以利用该元素的3D绘图上下文调用标准定义的接口，绘制3D图形，这些接口类似于OpenGL ES的接口。CSS 3D的变换和转换则可以作用于HTML的任意可视元素，制造出各种炫丽的3D效果。

网页结构

框结构

框结构很早就被引入网页中，它可以用来对网页的布局进行分割，将网页分成几个框。同时，网页开发者也可以让网页嵌入其他的网页。在HTML的语法中，“frameset”、“frame”和“iframe”可以用来在当前网页中嵌入新的框结构。

每一个框结构包含一个HTML文档，最简单的框结构网页就是单一的框，其文档没有包含任何其他的框。

层次结构

网页的层次结构是指网页中的元素可能分布在不同的层次中，也就是说某些元素可能不同于它的父元素所在的层次，因为某些原因，WebKit需要为该元素和它的子女建立一个新层。

WebKit的网页渲染过程

加载和渲染

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

网页渲染还有一个特性，那就是网页通常比我们的屏幕可视面积要大（在移动设备上尤其明显），而当前可见的区域，我们称为视图(viewport)，这一概念后面会详细介绍和频繁使用到。因为网页比可视区域大，所以浏览器在渲染网页的时候，一般会加入滚动条以帮助翻滚网页。就用户体验来说，垂直方向滚动效果好于水平方向。

WebKit的渲染过程

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

具体的过程如下：

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

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

接下来就是WebKit利用CSS和DOM树构建RenderObject树直到绘图上下文，这一阶段的具体过程如下：

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

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

3.RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。其实这中间还有复杂的内部过程，具体在后面专门的章节做详细介绍。

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

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

总结

HTML网页是利用HTML语言编写的文档，它是一种半结构化的数据表现方式。它的结构特征可以归纳为三种：树状结构、层次结构和框结构，这些都是分析WebKit引擎渲染网页的基础。

作者介绍
非职业「传道授业解惑」的开发者叶一一。
《趣学前端》、《CSS畅想》等系列作者。华夏美食、国漫、古风重度爱好者，刑侦、无限流小说初级玩家。
如果看完文章有所收获，欢迎点赞👍 | 收藏⭐️ | 留言📝。