前端进击笔记第十节 深入剖析浏览器中页面的渲染过程

作为前端开发，我们的日常工作中除了编码以外，几乎大多数时间都在跟浏览器打交道。所以我们更加要吃透浏览器，掌握它到底是怎样将我们编写的代码渲染到页面中的。

所以，今天我主要结合浏览器的内部工作原理，深入剖析下浏览器中页面的渲染过程。

第 6 讲我们介绍了一个 HTTP 请求在浏览器中的请求过程，该过程将浏览器作为单独的对象，描述客户端和服务端之间的通信过程。那么，当我们在浏览器的地址栏中输入 URL，按下回车键，到页面在浏览器中渲染完成，这个过程中浏览器的内部发生了什么了呢？

为了了解这个过程，首先我们要了解浏览器的内部结构。

浏览器的内部结构

从结构上来说，浏览器主要包括了八个子系统：用户界面、浏览器引擎、渲染引擎、网络子系统、JavaScript 解释器、XML 解析器、显示后端、数据持久性子系统。

这些子系统组合构成了我们的浏览器。页面的加载和渲染过程，离不开网络子系统、渲染引擎、JavaScript 解释器和浏览器引擎。

以前端开发最常使用的 Chrome 浏览器为例， Chrome 浏览器是使用多进程架构的方式来管理这些子系统。

Chrome 多进程架构

Chrome 浏览器采用的多进程架构，主要包括四个进程：

1. 浏览器进程：选项卡之外的所有内容都由浏览器进程处理，浏览器进程则主要用于控制和处理用户可见的 UI 部分（包括地址栏，书签，后退和前进按钮）和用户不可见的隐藏部分（例如网络请求和文件访问）。

2. GPU 进程：该进程用于完成图像处理任务，同时还支持分解成多个进程进行处理。

3. 渲染器进程：Chrome 浏览器中支持多个选项卡，其中每个选项卡在单独的渲染器进程中运行，渲染器进程主要用于控制和处理选项卡中的网站内容显示。

4. 插件进程：管理 Chrome 浏览器中的各个插件。

对于“在浏览器的地址栏中输入 URL，按下回车键，到浏览器渲染页面”这个过程，浏览器内部会通过浏览器进程和渲染器进程，进行很多交互逻辑，最终才得以将页面内容显示在屏幕上。

其中，浏览器进程和渲染器进程同样支持多线程，包括以下这些线程。

这些线程其实并不陌生，在前面介绍的内容中有提到，比如：

• 在页面的加载过程中，涉及 GUI 渲染线程与 JavaScript 引擎线程间的互斥关系，因此页面中的