第二章 HTML网页和结构

网页构成

1. 基本元素和树状结构

2. HTML5新特性

进入HTML5时代后，多媒体和2D/3D图形变成了“第一等公民”，浏览器原生支持它们。

网页结构

1. 框结构

在HTML中“frameset”、“frame”、“iframe”可以用来在当前网页中嵌入新的框结构。

2. 层次结构

对于需要复杂变换和处理的元素，它们需要新层，所以，webkit为它们创建新层其实是为了渲染引擎在处理上的方便和高效。

WebKit网页渲染过程

1. 加载和渲染

浏览器主要的作用是：将用户输入的“URL”转变成可视化的图像。按照某些文档的分析这包括两个过程：其一是网页加载过程，就是从“URL”到构建DOM树；其二是网页渲染过程，从DOM树到生成可视化的图像。其实，这两个过程也会交叉，很难给与明确的区分。

2. WebKit的渲染过程

浏览器渲染过程中的数据和模块：
数据：网页内容、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构建完成并且网页所以来的资源都加载完之后发生。

---

从CSS和DOM树到绘图上下文

WebKit利用DOM树和CSS构建RenderObject树知道绘图上下文：

1. CSS文件被CSS解释器解释成内部表示结构。
2. CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树。
3. RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。

---

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

---

从绘图上下文到最终的图像

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

1. 绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。
2. 绘图实现类也可能有简单的实现，也可能有复杂的实现。
3. 绘图实现类将2D图形库或3D图形库绘制的结果保存下来，交给浏览器，来同浏览器界面一同显示。