现代浏览器的组成和页面渲染步骤

现代浏览器组成

目前，常用的浏览器主要有：Chrome、IE（Edge）、Safari、Firefox等。不同的浏览器在结构方面虽然有所差异，但是整体的设计理念是相似的。因此，可以抽象得到如下图所示的参考结构：

浏览器的抽象分层结构图中将浏览器分成了以下8个子系统：

用户界面（User Interface）

用户界面主要包括工具栏、地址栏、前进/后退按钮、书签菜单、可视化页面加载进度、智能下载处理、首选项、打印等。除了浏览器主窗口显示请求的页面之外，其他显示的部分都属于用户界面。

浏览器引擎（Browser Engine）

可以在用户界面和渲染引擎之间传送指令或在客户端本地缓存中读写数据等，是浏览器中各个部分之间相互通信的核心。

渲染引擎（Rendering Engine）【重要】

也叫排版引擎，就是我们常说浏览器内核，主要负责 HTML、CSS 的解析、嵌入式内容（如图片）、页面布局、渲染与复合层合成，可视化内容生成。

渲染引擎内部包含HTML解析器（HTMLParser）。HTML解析器最终会在内存中生成DOM，DOM是html文档的对象表示，作为html元素的外部接口供js等调用。

网络（Networking）

网络系统实现HTTP和FTP等文件传输协议。 网络系统可以在不同的字符集之间进行转换，为文件解析MIME媒体类型。 网络系统可以实现最近检索资源的缓存功能。通俗来说就是用来完成网络调用或资源下载的模块。

JavaScript解释器（JavaScript Interpreter）【重要】

JavaScript解释器能够解释并执行嵌入在网页中的JavaScript（又称ECMAScript）代码。并通过DOM接口和CSSOM接口来修改网页内容、样式规则，从而改变渲染结果。为了安全起见，浏览器引擎或渲染引擎可能会禁用某些JavaScript功能，如弹出窗口的打开。

XML解析器（XML Parser）

XML解析器可以将XML文档解析成文档对象模型（Document Object Model，DOM）树。一般HTML解析器调用的是XML解析器。

显示后端（Display Backend）

用来绘制基本的浏览器窗口内控件，如输入框、按钮、单选按钮等，不同浏览器绘制的视觉效果也略有不同

数据持久层（Data Persistence）

数据持久层将与浏览会话相关联的各种数据存储在硬盘上。 这些数据可能是诸如：书签、工具栏设置等这样的高级数据，也可能是诸如：Cookie，安全证书、缓存等这样的低级数据。

这里可能会产生一个疑问：功能相似的HTML解析器和XML解析器为什么前者划分在渲染引擎中，后者作为独立的系统？

原因：XML解析器对于系统来说，其功能并不是关键性的，但是从复用角度来说，XML解析器是一个通用的，可重用的组件，具有标准的，定义明确的接口。相比之下，HTML解析器通常与渲染引擎紧耦合。

常见浏览器的渲染引擎和JS引擎：

浏览器	渲染引擎	JS引擎
IE	Trident（2015年后edge）	JScript（IE9后 Chakra）
Firefox	Gecko	SpiderMonkey
Chrome	Webkit（2013年后改用Blink）	V8
Safri	Webkit	JavaScriptCore
Opera	Presto（2013年后改用Blink）	Carakan

渲染引擎工作流程

翻译解释一下流程就是：

1. 解析HTML构建DOM树

   渲染引擎使用HTML解析器（调用XML解析器）解析HTML（XML）文档，将各个HTML（XML）元素逐个转化成DOM节点，从而生成DOM树。

   接着渲染引擎使用CSS解析器解析外部CSS文件及style标签中的样式信息，构建出CSSOM 树。

2. 构建渲染树

   渲染引擎使用上一步CSS解析器解析得到的样式规则，将其附着到DOM树上，从而构成渲染树，其实就是讲DOM树和CSSOM树合并成渲染树。

3. 布局渲染树

   渲染树构建完毕之后，进入布局阶段，也就是为每个节点分配一个应出现在屏幕上的确切坐标。

4. 绘制render树

   渲染引擎将遍历渲染树，并调用显示后端将每个节点绘制出来。

整体来说就是下图的流程：