1.3.3 浏览器渲染Web页面的过程

大多数显示设备的刷新频率是60Hz，也就是浏览器对每一帧画面的渲染工作要在16ms内完成。超出这个时间，页面就会出现卡顿现象，影响用户的体验。浏览器通常主要由界面控件、浏览器引擎、渲染引擎、网络、UI（User Interface，用户界面）后端、JavaScript解释器、数据存储持久层等组成。

用户请求的HTML文档通过浏览器的网络层到达渲染引擎后，渲染工作开始进行。浏览器在渲染的过程中以8KB为单位进行渲染，渲染的过程主要包括生成DOM树、构建Render（渲染）树、布局Render树和绘制Render树4个阶段，如图1-3所示。

图1-3 Web页面的渲染过程

1.生成DOM树

浏览器渲染引擎，在渲染时，首先解析HTML文档，生成DOM树。DOM树的构建过程是深度遍历的过程。如果遇到JavaScript代码则将其交给JavaScript引擎处理，在JavaScript引擎运行脚本期间，GUI渲染线程（负责渲染浏览器界面的HTML元素）会被保存在一个队列中，处于挂起状态，直到JavaScript引擎运行脚本的任务完成，才会接着执行。如果网页中包含CSS代码，则将其交给CSS解释器解析，没有被定义CSS的HTML元素，渲染引擎将默认样式应用到HTML元素上，最后解析生成CSSOM（CSS Object Model，CSS对象模型）树。

DOM树的生成可能会被CSS和JavaScript加载执行阻塞。当HTML文档解析完毕后，浏览器继续进行deferred模式的脚本加载，整个解析过程结束后触发DOMContentLoaded事件，并在async文档执行完之后触发load事件。

2.构建Render树

在生成DOM树的同时会生成样式结构体CSSOM树，然后根据CSSOM树和DOM树构造Render树。Render树包含有颜色、尺寸等显示属性的盒子，这些盒子的排列顺序与显示顺序基本一致。

可以说，没有DOM树就没有Render树，但是它们之间不是简单的一对一的关系。Render树用于显示内容，不可见元素不会在其中出现。

3.布局Render树

布局（Layout）阶段是确定Render树上的每个节点在屏幕上的显示位置和大小信息的过程。

浏览器进行页面布局以浏览器可见区域为画布，以左上角（0,0）为坐标原点，从左到右、从上到下，从DOM的根节点开始绘制。首先确定显示元素的大小和位置，此过程是通过浏览器计算实现的，用户在CSS中定义的量未必就是浏览器实际计算采用的量。如果显示元素有子元素，得先确定子元素的显示信息。布局阶段输出的结果称为盒模型，盒模型精确表示了每一个元素的位置和大小，并且所有相对度量单位都转化为了绝对单位。

4.绘制Render树

在绘制（Paint）阶段，渲染引擎会遍历Render树，并调用渲染对象的paint()方法，将渲染对象的内容显示在屏幕上，绘制工作是使用UI后端组件完成的。