众所周知，浏览器是世界上用途最广泛的软件了，它们展现着网络资源，但达成这个目标的过程是复杂并且遵循着很多不同的标准。里面的运行机制是具有迷惑性和反常规的，理解浏览器的运行机制给了我们提升网络性能和网络应用效率的洞察力。
接下来，就让我们来简单认识下浏览器渲染的基本原理。
一、首先，让我们认识几个基本概念
- DOM：（Document Object Model），浏览器将HTML解析成树形的数据结构，简称DOM。DOM 是文档对象模型 (Document Object Model) 的缩写。它是 HTML 文档的对象表示，同时也是外部内容（例如 JavaScript）与 HTML 元素之间的接口。 解析树的根节点是Document对象。
- CSSOM：（CSS Object Model），浏览器将CSS代码解析成树形的数据结构。
-
渲染引擎 ：渲染引擎就是在浏览器的屏幕上显示请求的内容。
默认情况下，呈现引擎可显示 HTML 和 XML 文档与图片。通过插件（或浏览器扩展程序），还可以显示其他类型的内容；例如，使用 PDF 查看器插件就能显示 PDF 文档。但是在本章中，我们将集中介绍其主要用途：显示使用 CSS 格式化的 HTML 内容和图片。Firefox、Chrome和Safari是基于两种渲染引擎构建的，Firefox使用Geoko——Mozilla自主研发的渲染引擎，Safari和Chrome都使用webkit。Webkit是一款开源渲染引擎，它本来是为Linux平台研发的，后来由Apple移植到Mac及Windows上
二、渲染的主流程
渲染引擎首先通过网络获得所请求文档的内容，通常以8K分块的方式完成。
下面是渲染引擎在取得内容之后的基本流程：
1. 解析html为dom树，解析css为cssom。
渲染引擎开始解析html，并将标签转化为内容树中的dom节点。
2. 把dom和cssom结合起来生成渲染树(render)
接着，它解析外部CSS文件及style标签中的样式信息。这些样式信息以及html中的可见性指令将被用来构建另一棵树——render树。Render树由一些包含有颜色和大小等属性的矩形组成，它们将被按照正确的顺序显示到屏幕上。
3. 布局渲染树，计算几何形状
Render树构建好了之后，将会执行布局过程，它将确定每个节点在屏幕上的确切坐标。
4. 把渲染树展示到屏幕上
再下一步就是绘制，即遍历render树，并使用UI后端层绘制每个节点。
解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树
2011110316263715.png
render-tree-construction.png
优化这个严格的过程让我们可以以最快的速度向用户展示我们的网页内容。
值得注意的是，关键的点在于上述的4个过程并不是以严格顺序执行的。渲染引擎会以最快的速度展示内容，所以第二阶段不会等到第一阶段结束才开始，而是在第一阶段有输出的时候就开始执行。其它阶段也是如此。由于浏览器会尝试尽快展示内容，所以内容有时会在样式还没有加载的时候展示出来。
这就是经常发生的FOCU(flash of unstyled content)或白屏问题。
主流程示例
webkitflow.png
图：WebKit 主流程
image008.jpg
图：Mozilla 的 Gecko 呈现引擎主流程
从上图我们可以看出，虽然 WebKit 和 Gecko 使用的术语略有不同，但整体流程是基本相同的。
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。WebKit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，WebKit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，WebKit 使用的术语是“附加”。有一个细微的非语义差别，就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容模块（Content Model）”的层，用于生成 DOM 元素.
网友评论