【史上最全】前端页面深入浅出浏览器渲染原理

前言
浏览器的核心组件，即通常所说的浏览器内核，是支撑整个浏览器运行的关键性底层软件架构，它由两个关键组成部分构成：一个是负责网页内容解析和渲染的渲染引擎，另一个则是用于执行JavaScript代码的JS引擎。各浏览器厂商在其产品中使用的渲染引擎并不一致，这种差异化构成了不同浏览器间表现差异的基础。

举例来说，在Mozilla Firefox浏览器中，其采用的自主研发的渲染引擎名为Gecko，它负责将HTML、CSS等内容转换为用户可见的网页布局和样式。而在Google Chrome和Apple Safari浏览器中，虽然两者早期均基于开源的WebKit渲染引擎来构建网页渲染功能，但后续发展有所不同：Chrome从某个版本开始，基于WebKit衍生出了自家的Blink渲染引擎；而Safari继续沿用了WebKit及其后续分支作为其核心渲染技术。

本文将重点聚焦于WebKit渲染引擎及其相关的技术细节与常见问题探讨。

浏览器工作流程大体分为如下三部分：
1）浏览器会解析三个东西：
一个是HTML/SVG/XHTML，事实上，Webkit有三个C++的类对应这三类文档。解析这三种文件会产生一个DOM Tree。
CSS，解析CSS会产生CSS规则树。
Javascript，脚本，主要是通过DOM API和CSSOM API来操作DOM Tree和CSS Rule Tree.
2）解析完成后，浏览器引擎会通过DOM Tree 和 CSS Rule Tree 来构造 Rendering Tree。
Rendering Tree 渲染树并不等同于DOM树，因为一些像Header或display:none的东西就没必要放在渲染树中了。
CSS 的 Rule Tree主要是为了完成匹配并把CSS Rule附加上Rendering Tree上的每个Element。也就是DOM结点。也就是所谓的Frame。
然后，计算每个Frame（也就是每个Element）的位置，这又叫layout和reflow过程。
3）最后通过调用操作系统Native GUI的API绘制。
接下来我们针对这其中所经历的重要步骤，一一详细阐述。
构建DOM

浏览器会遵守一套步骤将HTML 文件转换为 DOM 树。宏观上，可以分为几个步骤：

浏览器从磁盘或网络读取HTML的原始字节，并根据文件的指定编码（例如 UTF-8）将它们转换成字符串。
在网络中传输的内容其实都是 0 和 1 这些字节数据。当浏览器接收到这些字节数据以后，它会将这些字节数据转换为字符串，也就是我们写的代码。
将字符串转换成Token，例如：、等。Token中会标识出当前Token是“开始标签”或是“结束标签”亦或是“文本”等信息。
这时候你一定会有疑问，节点与节点之间的关系如何维护？
事实上，这就是Token要标识“起始标签”和“结束标签”等标识的作用。例如“title”Token的起始标签和结束标签之间的节点肯定是属于“head”的子节点。

上图给出了节点之间的关系，例如：“Hello”Token位于“title”开始标签与“title”结束标签之间，表明“Hello”Token是“title”Token的子节点。同理“title”Token是“head”Token的子节点。
生成节点对象并构建DOM
事实上，构建DOM的过程中，不是等所有Token都转换完成后再去生成节点对象，而是一边生成Token一边消耗Token来生成节点对象。换句话说，每个Token被生成后，会立刻消耗这个Token创建出节点对象。注意：带有结束标签标识的Token不会创建节点对象。
接下来我们举个例子，假设有段HTML文本：