网页构成
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图形库绘制的结果保存下来,交给浏览器,来同浏览器界面一同显示。
网友评论