第二章 HTML网页和结构
2018-02-02 本文已影响0人
小胡萝卜秧
网页构成
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树
具体过程如下：
- 当用户输入网页URL的时候，WebKit调用资源加载器加载改URL对应的网页。
- 加载器依赖网络模块建立连接，发送请求并接收答复。
- WebKit接收到各种网页或资源的数据，其中某些资源可能是同步或异步获取的。
- 网页被交给HTML解释器转变成一系列的词语（Token）。
- 解释器根据词语构建节点（Node），形成DOM树。
- 如果节点是JavaScript代码的话，调用JavaScript引擎解释并执行。
- JavaScript代码可能会修改DOM树的结构。
- 如果节点需要依赖其它资源，例如图片、CSS、视频等，调用资源加载器来加载它们，但是它们是异步的，不会阻碍当前DOM树的继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树的创建，知道JavaScript的资源被加载并被JavaScript引擎执行之后，才继续DOM树的创建。
在网页加载和渲染过程中，会发出“DOMContent”事件和DOM的“onload”事件，分别在DOM树构建完成之后，以及DOM构建完成并且网页所以来的资源都加载完之后发生。
从CSS和DOM树到绘图上下文
WebKit利用DOM树和CSS构建RenderObject树知道绘图上下文：
- CSS文件被CSS解释器解释成内部表示结构。
- CSS解释器工作完之后，在DOM树上附加解释后的样式信息，这就是RenderObject树。
- RenderObject节点在创建的同时，WebKit会根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文。
注意：RenderObject树的建立并不意味着DOM树会被销毁，事实上，上述图中的四个内部表示结构一直存在，直到网页被销毁，因为它们对于网页的渲染起到了非常大的作用。
从绘图上下文到最终的图像
根据绘图上下文来生成最终的图像，这一过程需要依赖2D和3D图形库。
- 绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类。
- 绘图实现类也可能有简单的实现，也可能有复杂的实现。
- 绘图实现类将2D图形库或3D图形库绘制的结果保存下来，交给浏览器，来同浏览器界面一同显示。
