目前，主要的web浏览器有 Internet Explorer，Firefox，Safari，Chrome和Opera。根据W3C浏览器统计,开源浏览器Firefox，Safari和Chrome的使用率最多，其中Chrome占了70%多。下面主要讲这三种浏览器渲染引擎的渲染过程。
渲染引擎
渲染引擎的作用是在浏览器的窗口上显示所请求的内容。默认情况下，渲染引擎可以显示HTML和XML文档和图像。
Chrome和Safari都是基于webkit渲染引擎构建的；Firefox使用Gecko渲染引擎。
主要流程
渲染引擎将从网络层开始获取所请求文档的内容。渲染引擎的基本流程：
渲染引擎将开始解析HTML文档，并将标签转到称为“内容树”的树中的DOM节点。它将分析外部CSS文件和样式元素中的样式数据。样式信息以及HTML中的视觉指令将用于创建另一个树 - 渲染树。渲染树包含具有颜色和尺寸等视觉属性的矩形。矩形以正确的顺序显示在屏幕上。渲染树的构建之后，通过“ 布局”过程。这意味着给每个节点在屏幕上出现的确切坐标。下一个阶段是绘制- 渲染树将被遍历，每个节点将使用UI后端层进行绘制。
webkit渲染引擎的主流程：
- 解析 HTML 标签, 构建 DOM 树
- 解析 CSS 标签, 构建 CSSOM 树
- 把 DOM 和 CSSOM 组合成 渲染树 (render tree)
- 在渲染树的基础上进行布局, 计算每个节点的几何结构
- 把每个节点绘制到屏幕上 (painting)
Gecko渲染引擎主流程：
Gecko 将视觉格式化元素组成的树称为“框架树”。每个元素都是一个框架。Webkit 使用的术语是“呈现树”，它由“呈现对象”组成。对于元素的放置，Webkit 使用的术语是“布局”，而 Gecko 称之为“重排”。对于连接 DOM 节点和可视化信息从而创建呈现树的过程，Webkit 使用的术语是“附加”。有一个细微的非语义差别，就是 Gecko 在 HTML 与 DOM 树之间还有一个称为“内容槽”的层，用于生成 DOM 元素。
参考文献：
How browsers work
前端文摘：深入解析浏览器的幕后工作原理
网友评论