谷歌官方博客：深入了解现代浏览器系列（其一）

给前端以福利，给编程以复利。大家好，我是大家的林语冰。

00. 写在前面

最近本人在学习异步编程时，发现了谷歌官方博客有关于 现代浏览器架构 系列的博客，配图可爱又直观，于是翻译存档，辅助记忆，今天共享给大家。

本系列博客一共有四大篇章，我们将从高级架构到渲染管道的细节，深入了解 Chrome 浏览器。如果你想知道浏览器如何将代码转换为功能性网站，或者你不确定为什么采用特定技术可以提高性能，那么本系列博客适合果断收藏。

今天共享的是 现代浏览器架构 系列的第 1 部分，我们将了解 CPU/GPU、进程/线程等核心计算术语，以及 Chrome 的多进程架构。

免责声明 本文属于是语冰的直男翻译了属于是，略有删改，仅供粉丝参考。英文原味版请传送 Inside look at modern web browser (part 1)。

01. 计算机的核心是 CPU 和 GPU

要了解浏览器运行的环境，我们需要了解一些计算机组成部分及其功能。

01-1. CPU（中央处理器）

首先是 CPU，即 Central Processing Unit（中央处理器）的首字母缩写。CPU 可以视为计算机的大脑。CPU 内核可以逐一处理许多不同的任务。过去大多数 CPU 都是单芯片。

内核就像同一芯片中的另一个 CPU。在现代硬件中，你通常会获得多个内核，为你的手机和笔记本电脑提供更多计算能力。

01-2. GPU（图形处理器）

GPU 是计算机的另一重要部分，即 Graphics Processing Unit（图形处理器）的首字母缩写。

与 CPU 不同，GPU 擅长同时处理多核的简单任务。顾名思义，它最初是为了处理图形而开发的。这就是为什么在图形上下文中“使用 GPU”或“GPU 支持”与快速渲染和流畅交互相关。

近年来，随着 GPU 加速计算的发展，越来越多的计算仅依靠 GPU 也成为可能。当你在计算机或手机上启动应用程序时，CPU 和 GPU 为应用程序提供动力。通常，应用程序使用操作系统提供的机制在 CPU 和 GPU 上运行。

02. 在进程和线程上执行程序

在深入浏览器架构之前，要掌握的另一个概念是进程和线程。

进程可以被描述为应用程序的执行程序。线程存在于进程内部，用于执行其所在进程程序的任意部分。当你启动应用程序时，就会创建一个进程。程序可能会创建线程来辅助它完成工作，但这是可选的。

操作系统为进程提供了一块可供使用的内存“板”，所有应用程序状态都保存在该私有内存空间中。当您关闭应用程序时，该进程也会消失，操作系统就会释放内存。

一个进程可以要求操作系统启动另一个进程来运行不同的任务。发生这种情况时，操作系统会为新进程分配不同的内存。

如果两个进程需要通信，它们可以通过使用进程间通信（IPC）来实现。许多应用程序都设计为这种工作方式，以便如果工作进程没有响应，可以重启，而无需停止正在运行应用程序其他部分的不同进程。

03. 现代浏览器架构

那么现代浏览器是如何使用进程和线程构建的呢？

它可能是一个进程有许多不同的线程，也可能是许多不同的进程，其中有若干线程通过 IPC 进行通信。

粉丝请注意，不同的浏览器架构取决于实现细节。实际上，没有关于如何构建现代浏览器的统一标准规范。一种浏览器的方案可能与另一种浏览器一龙一猪。

在本系列博客中，我们使用 Chrome 的架构来举个栗子。Chrome 架构的顶层是浏览器进程，与负责应用程序不同部分的其他进程进行协调。对于渲染器进程，会创建多个进程，并将其分配给每个选项卡（标签页）。

直到最近，Chrome 还尽可能为每个选项卡提供一个进程。现在，它尝试为每个站点甚至是 iframe 提供专属进程。

04. 每个进程的职责

每个 Chrome 进程都有其控制的内容：

• 浏览器进程：控制应用程序的“chrome”部分，包括地址栏、书签、后退和前进按钮等。它还处理浏览器的不可见的特权功能，比如网络请求和文件访问。
• 渲染器进程：控制显示网站的选项卡内的任何内容。
• 插件进程：控制网站使用的任何插件，比如已过气的 flash。
• GPU 进程：独立于其他进程处理 GPU 任务。它被分成不同的进程，因为 GPU 处理来自多个应用程序的请求，并将它们绘制在同一个表面上。

还有其他更多的进程，比如扩展进程和实用程序进程。

如果你想偷看 Chrome 正在运行的进程数量，请点击右上角的选项菜单图标，选择“更多工具”，然后选择“任务管理器”。这会打开一个窗口，其中就包含当前正在运行的进程列表，以及它们正在使用的 CPU/内存占用。

05. Chrome 多进程架构的优势

Chrome 使用多个渲染器进程。在最简单的情况下，你可以想象每个选项卡都有自己的渲染器进程。

假设你打开了 3 个选项卡，每个选项卡都由独立的渲染器进程运行。如果一个选项卡失去响应，那么你可以关闭无响应的选项卡并继续操作，同时保持其他选项卡处于活动状态。

如果所有选项卡都在一个进程上运行，那么当一个选项卡无响应时，所有选项卡均无响应，一损俱损。

将浏览器的工作分离到多个进程的另一个优势是安全性和沙箱。由于操作系统提供了一种限制进程权限的方法，因此浏览器可以通过某些功能对某些进程进行沙箱处理。

举个栗子，Chrome 浏览器限制处理任意用户输入的进程（比如渲染器进程）的任意文件访问。由于进程有自己的私有内存空间，因此它们通常包含公共基建的副本，比如 Chrome 的 JavaScript 引擎 V8。这意味着更多的内存占用，因为它们不能像同一进程内的线程那样共享。

为了节省内存，Chrome 限制了它可以启动的进程数量。该限制取决于你的设备拥有多少内存和 CPU 功率，但当 Chrome 达到限制时，它会开始在一个进程中运行同一站点的多个选项卡。

06. 节省更多内存：Chrome 的服务化

同样的方案也适用于浏览器进程。Chrome 正在进行架构改革，以将浏览器程序的每个部分作为一项服务运行，从而允许拆分为不同的进程，或聚合为一个进程。

一般的想法是，当 Chrome 在强大的硬件上运行时，它可能会将每个服务拆分为不同的进程，提供更高的稳定性；但如果它在资源受限的设备上，Chrome 会将服务整合到一个进程中，节省内存占用。

在此改革之前，类似的整合进程减少内存占用的方案已经在 Android 等平台上使用。

07. 逐帧渲染器进程：站点隔离

站点隔离是 Chrome 引入的一项功能，它为每个跨站点 iframe 运行单独的渲染器进程。

每个选项卡对应一个渲染器进程的模型，它允许跨站点 iframe 在单个渲染器进程中运行，并在不同站点之间共享内存空间。在同一个渲染器进程中运行 a.com 和 b.com 似乎问题不大。

同源策略是网络的核心安全模型；它确保一个站点在未经同意的情况下，无法访问其他站点的数据。绕过此策略是安全攻击的主要目标。

进程隔离是分离站点的最有效方案，我们需要使用进程来分离站点。自 Chrome 67 起，桌面上默认启用站点隔离，选项卡中的每个跨站点 iframe 都会获得一个单独的渲染器进程。

启用站点隔离是一项多年的工程工作。站点隔离并不像分配不同的渲染器进程那么简单；它从根本上改变了 iframe 相互通信的方式。

在具有在不同进程上运行的 iframe 的页面上打开 devtools（开发工具），意味着 devtools 必须实现幕后工作使其看起来无缝。

即使运行简单的 Ctrl+F 在页面中查找单词，也意味着在不同的渲染器进程中进行搜索。

高潮总结

在本文中，我们从宏观视角科普了浏览器架构，并介绍了多进程架构的好处。我们还介绍了 Chrome 中与多进程架构密切相关的服务化和站点隔离。

在本系列的下一篇博客中，我们将开始深入研究为了展示网站，这些进程和线程之间的幕后技术细节。

参考文献

• Blog：developer.chrome.com/blog/inside…
• MDN：developer.mozilla.org/en-US/docs/…
• V8：github.com/v8/v8

粉丝互动

本期话题是：如何理解单进程多线程 vs 多进程多线程的模型差异？你可以在本文下方自由言论，文明科普。

欢迎持续关注“前端俱乐部”，给前端以福利，给编程以复利。

坚持阅读的小伙伴可以给自己点赞！谢谢大家的点赞，掰掰~