网页渲染

aaaaaAndy

2019-04-14

DOM树, 渲染, 网页

渲染引擎：能够将HTML/CSS/JavaScript文本及相应的资源文件转换成图像结果。渲染引擎的主要作用是将资源文件转化为用户可见的结果。在浏览器的发展过程中，不同的厂商开发了不同的渲染引擎，如Tridend(IE)、Gecko(FF)、WebKit(Safari,Chrome,Andriod浏览器)等。WebKit是由苹果2005年发起的一个开源项目，引起了众多公司的重视，几年间被很多公司所采用，在移动端更占据了垄断地位。更有甚者，开发出了基于WebKit的支持HTML5的web操作系统(如：Chrome OS、Web OS)。

1. 网页渲染流程

;

首先是网页内容，输入到HTML解析器，HTML解析器解析，然后构建DOM树，在这期间如果遇到JavaScript代码则交给JavaScript引擎处理；如果来自CSS解析器的样式信息，构建一个内部绘图模型。该模型由布局模块计算模型内部各个元素的位置和大小信息，最后由绘图模块完成从该模型到图像的绘制。在网页渲染的过程中，大致可分为下面3个阶段。

1. 从输入URL到生成DOM树

地址栏输入URL，WebKit调用资源加载器加载相应资源；
加载器依赖网络模块建立连接，发送请求并接收答复；
WebKit接收各种网页或者资源数据，其中某些资源可能同步或异步获取；
网页交给HTML解析器转变为词语；
解释器根据词语构建节点，形成DOM树；
如果节点是JavaScript代码，调用JavaScript引擎解释并执行；
JavaScript代码可能会修改DOM树结构；
如果节点依赖其他资源，如图片\css、视频等，调用资源加载器加载它们，但这些是异步加载的，不会阻碍当前DOM树继续创建；如果是JavaScript资源URL（没有标记异步方式），则需要停止当前DOM树创建，直到JavaScript加载并被JavaScript引擎执行后才继续DOM树的创建。

2. 从DOM树到构建WebKit绘图上下文

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

3. 绘图上下文到最终图像呈现

绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥接到不同的具体实现类，也就是绘图具体实现类；
绘图实现类也可能有简单的实现，也可能有复杂的实现，软件渲染、硬件渲染、合成渲染等；
绘图实现类将2D图形库或者3D图形库绘制结果保存，交给浏览器界面进行展示.