HTML网页和结构

HTML网页是利用HTML语言编写的文档，是一种半结构化的数据表现方式，结构特征可以归纳为三种：树状结构，层次结构和框结构。

网页构成

目前市面上大多数的网页为动态网页，在这样的动态网页中，JavaScript代码用来控制网页内部的逻辑，CSS用来描述网页的显示信息。JavaScript是一种解释型的脚本语言，主要目的是控制用户端逻辑，同用户交互，本身可以修改HTML元素及其内容，CSS是一种样式表语言，用来描述元素的显示信息，html元素组成一个树状结构，在webkit中会被构建成一个DOM树。

网页结构

框结构：用来对网页的布局进行分割，将网页分成几个框，在html中”frameset”,”frame”,”iframe”可以用来在当前网页中嵌入新的框结构，在框中还可以在嵌入框。



层次结构：网页文档的层次结构，根层在后，子层在前，对于需要复杂变换和处理的元素创建新层，webkit创建新层主要目的是为了渲染引擎在处理上的方便和高效。

渲染过程

渲染过程主要分成三个阶段，第一个阶段从网页的URL到构建完DOM树，第二阶段从DOM树到构建完webkit的绘图上下文，第三个阶段从绘图上下文到生成最终的图像。

第一阶段：


DOM树" title="">

① webkit调用资源加载器加载URL对应的网页；

② 加载器依赖网络模块发送请求并接收回复；

③ webkit接收网页或资源的数据，获取的方式又分为同步和异步；

④ 网页交给HTML解释器转变成一系列的词语（Token）；

⑤ 解释器根据词语构建成节点（Node），形成DOM树；

⑥ 若节点是JavaScript的话要调用JavaScript引擎解释并执行；

⑦ JavaScript代码可能会修改DOM树的结构；

⑧ 若节点需要依赖其他资源，如图片、CSS、视频等，调用资源加载器来加载它们，此操作为异步，不会阻碍当前DOM树的继续创建；若是JavaScript资源URL（未标记为异步方式），需要停止当前DOM树的创建，直到JavaScript资源加载并被JavaScript引擎执行完后才继续DOM树的创建；

第二阶段:

webkit利用CSS和DOM树构建RenderObject树直到绘图上下文。



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

2 CSS解释器工作完之后在DOM树上附加解释后的样式信息，构成RenderObject树；

3 创建RenderObject节点的同时，webkit根据网页的层次结构创建RenderLayer树，同时构建一个虚拟的绘图上下文；

注：RenderObject树的建立不表示DOM树会被销毁，实际上上图的四个内部表示结构一直存在，直至网页销毁，它们对网页的渲染有很大的作用

第三阶段：

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


最终图像" title="">

① 绘图上下文是一个与平台无关的抽象类，会将每个绘图操作桥接到不同的具体实现类（绘图具体实现类）；

② 绘图实现类可能简单也可能复杂，chromium中需要chromium合成器来完成多进程和GPU加速机制；

③ 绘图实现类将2D/3D图形库绘制结果保存，交给游览器显示；