前端-剖析浏览器渲染页面的过程

剖析浏览器渲染页面的过程

浏览器的内部结构

从结构上来看，浏览器主要包括8个子系统

1. 用户界面
2. 浏览器引擎
3. 渲染引擎
4. 网络子系统
5. JavaScript解释器
6. XML解释器
7. 显示后端
8. 数据持久化子系统

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

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

Chrome 多进程架构

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

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

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

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

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

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

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

Chrome渲染器进程中的线程

• GUI渲染线程：负责对浏览器界面进行渲染
• JavaScript引擎线程：负责解析和执行JavaScript脚本
• 浏览器定时器触发线程：setTimeout和setInterval方法所在线程
• 浏览器事件触发线程：负责处理浏览器事件，并将事件触发后需要执行的代码放到JavaScript引擎中执行。

Chrome浏览器进程中的线程

• UI线程：用于绘制浏览器的按钮和输入字段
• 网络线程：用于处理网络请求，以及从服务器接收数据
• 存储线程：用于控制对文件的访问

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

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