加载与渲染
浏览器的主要作用是将用户输入的“URL”转变为可视化图像。按照某文档的分析，这其中包含两个过程，其一是网页加载过程，就是从“URL”到构建DOM树；其二就是网页渲染过程，从DOM生成可视化图像。
网页渲染有一个特性，通常视图比屏幕可视化面积大。所以在渲染时一般加入滚动条，就用户体验来说，垂直方向的滚动条效果好过水平页面的滚动条效果。
WebKit的渲染过程
根据数据的流向，可以把过程分为三个阶段，第一个阶段就是从网页的URL到构建完DOM树，第二个阶段是从DOM树到构建完WebKit的绘图上下文，第三个阶段是从绘图上下文生成最终的图像。
第一阶段
从网页URL到DOM树
具体过程如下：
- 当用户输入网页URL时，WebKit调用资源加载器加载该URL对应的网页。
- 加载器依赖网络建立连接，发送请求并接受答复。
- WebKit接受到各种网页或者资源的链接，其中某些资源通过同步或者异步获取。
- 网页被交给HTML解释器解释为一系列词语。
- 解释器根据词语构建节点（NODE），形成DOM树。
- 如果节点是JavaScript代码就调用JavaScript引擎解释并执行。
- JavaScript代码可能会修改DOM树的结构。
- 如果节点依赖其他资源，则调用资源加载器加载，但他们是异步的，不会阻碍当前DOM树的继续构建；如果是JavaScript资源URL（没有标志异步方式），则需要停止当前DOM树构建，直到JavaScript资源加载完毕并被JavaScript引擎执行后才继续DOM树构建。
上述过程中，网页会发出“DOMConent”和DOM“onload”事件，分别在DOM树构建完之后，以及DOM树捡完并且网页所以来的资源都加载完之后发生，因为某些资源的加载并不会阻碍DOM树的创建，所以这两个事件多数时候不是同时发生的。
第二阶段
从CSS到DOM树到绘图上下文
具体过程如下：
- CSS文件被CSS解释器解释成内部表示结构。
- CSS解释器工作完之后，从DOM树上附加解释后的样式信息，这就是RenderObject树。
- RenderObject树节点在创建时，WebKit会根据网页的层次结构创建RenderLayer树，同时创建一个虚拟上下文。
上述过程中，RenderObject树的建立并不代表DOM树会被销毁，直到网页被销毁，这四个内部结构将一直存在。
第三阶段
从绘图上下文生成最终的图像
具体过程如下：
- 绘图上下文是一个与平台无关的抽象类，它将每个绘图操作桥街道不同的具体实现类，也就是绘图具体实现类。
- 绘图实现类也可能相当容易的实现，也有可能相当复杂的实现。在Chromium中，它需要合成器来实现复杂的多进程和GPU加速机制。
- 绘图实现类将2D图形库和3D图形库绘制结果保存下来，交给浏览器来同浏览器界面一起显示。
上述过程实际上可能不会那么简单，现在浏览器为了高效性和安全性，可能会引入复杂的机制。而且绘图不像以前只有单纯的软件渲染，还有现在的GPU硬件渲染、混合渲染模型等方式。
总结
上面介绍的是一个完整的渲染过程。现代网页很多是动态网页，渲染完成之后，由于网站动画和或者与用户的交互。浏览器会一直不断重复渲染过程。
网友评论