[译]官方图解：Chrome 快是有缘由的，现代浏览器的多进程架构！（Part 1）

Chrome 是程序员的标配了，而从全球的市场份额来看，它在全球市场的份额已经超过 60%。

在 Chrome 10 周年之际，官方发布了一个系列文章，用图解的方式，很清晰的讲解了现代浏览器的运行原理，Chrome 之因此这么好用，这么快，是有缘由的。

这个系列，一共 4 篇文章，第一篇主要讲解的是 Chrome 的多进程架构，配图颇有意思，也很好理解，算是科普的文章。有兴趣能够看下去，若是反响好的话，后面 3 篇我会持续翻译，以为好就点个赞或者留言分享吧！

---

CPU、GPU、内存和多进程架构

咱们将经过 4 篇博客，来介绍 Chrome 浏览器从高级架构到渲染管道的具体细节。若是你想知道，浏览器是如何将你的代码转换为功能性网站；或者你想肯定，为何可使用特定技术能提升性能，那么本系列适合你。

做为本系列的第 1 部分，咱们将介绍关键技术名词和 Chrome 的多进程架构。

1. CPU（中央处理器）

CPU(Central Procession Unit) 能够被认为是你计算机的大脑。CPU 核心，就像办公室工做人员，能够逐个处理交代给他们的许多不一样的任务。它能够处理从数学到艺术的全部事情，并把处理结果返回出去。曾经大多数 CPU 都是单核，但在现代硬件中，你一般会操做的是多核 CPU，多核 CPU 为你的手机和计算机提供更强的计算能力。

2. GPU

GPU（Graphics Processing Unit）是计算机的另外一部分。与 CPU 不一样，GPU 更擅长处理简单任务，同时能够跨多个核心。顾名思义，它最初是为处理图形而诞生的。这就是为何在图形处理中，当咱们说到 “使用 GPU” 或者 “GPU 支持” 的时候，一般就在说快速渲染和平滑交互。近年来，随着 GPU 加速发展，仅在 GPU 上就能够实现愈来愈多的计算任务。

如上图所示，三层计算机体系结构中，硬件位于底部，操做系统位于中间，应用程序则在最上层。

当你在计算机或手机上启动应用程序时，CPU 和 GPU 就是为应用程序提供有力的支持。一般，应用程序使用操做系统提供的机制在 CPU 和 GPU 上运行。

Process 和 Thread 上执行的程序

在深刻浏览器架构以前，要掌握的另外一个概念是 Process（进程） 和 Thread（线程）。

进程能够理解是应用程序的执行程序，线程则是存在于进程内部，并执行其进程程序的部分功能。

进程做为线程的边界，而线程就像游动在进程中的鱼。

进程能够经过操做系统，启动另外一个进程来执行不一样的任务。此时，系统将为新进程分配不一样的内存。若是两个进程间须要通讯，他们能够利用 IPC（Inter Process Communication）的方式进行通讯。许多应用程序都是以这种方式执行的，所以若是某个工做进程（例如一个选项卡）无响应，重启它，并不会影响相同应用程序的其余进程。

浏览器架构

那么如何使用进程和线程构建 Web 浏览器？

它多是一个具备多个线程的独立进程，或者存在多个进程可是只有部分进程之间会进行 IPC 通讯的结构。

这里有个很是重要的点须要注意，这些不一样的架构是实现细节。关于如何构建 Web 浏览器没有标准规范，不一样浏览器的架构可能彻底不一样。

最重要的是浏览器进程，如何与负责应用程序不一样部分的其余进程协调。对于渲染器进程，将建立多个进程，并将其分配给每一个选项卡。直到最近，Chrome 才为每一个标签提供了一个执行进程，如今它尝试为每一个站点提供本身的进程，包括 iframe。

如图所示，Chrome 的多进程架构，渲染进程会显示多个图层，表示 Chrome 为每一个选项卡运行多个渲染器进程。

这些进程控制什么？

下面介绍了每一个 Chrome 进程以及其控制的范围：

• 浏览器（Browser）：控制 “Chrome” 应用程序，包括地址栏、书签、后退和前进按钮等。还须要处理 Web 浏览器的权限管理，例如网络请求和文件访问。
• 渲染器（Renderer）：控制选项卡内，网站里显示的全部内容。
• 插件（Plugin）：控制网站使用的插件，例如：Flash。
• GPU：独立于其余进程，专用于处理 GPU 任务，它被分红不一样的进程，由于 GPU 会处理来自多个进程的请求，并将它们绘制在相同的 Surface 中。

不一样的进程，用于处理 Chrome 的不一样部分。

还有更多的流程，如：扩展进程（Extension Process）和实用进程（Utility Process）。若是你想查看 Chrome 中正在运行的进程数，请点击右上角的选项，菜单图标→选择更多工具→任务管理器。

这将打开一个窗口，其中包含当前正在运行的进程列表以及它们使用的 CPU/Memory 信息。

Chrome 采用多进程架构的好处

以前，我曾提到 Chrome 使用多个渲染器进程。在最简单的状况下，你能够想象每一个选项卡都有本身的渲染器进程。假设你打开了 3 个选项卡，每一个选项卡都拥有独立的渲染器进程。若是一个选项卡没有响应，则能够关闭无响应的选项卡，并继续使用，同时保持其余选项卡处于活动状态。若是全部选项卡，都在一个进程上运行，则当一个选项卡无响应时，全部选项卡都不会响应。这就很尴尬了。

将浏览器的工做，分红多个进程的另外一个好处是安全性和沙盒。因为操做系统提供了限制进程权限的方法，所以浏览器能够从某些功能中，对某些进程进行沙箱处理。例如，Chrome 浏览器能够对处理用户输入（如渲染器）的进程，限制其文件访问的权限。

每一个进程都有本身的私有内存空间，所以它们一般包含公有基础功能（例如 V8 是 Chrome 的 JavaScript 引擎）。这意味着更多的内存使用，由于若是它们是同一进程内的线程，则没法以它们的方式共享。为了节省内存，Chrome 限制了它能够启动的进程数量。限制会根据设备的内存和 CPU 功率动态调整，但当 Chrome 达到限制时，它会在一个新的进程中打开这个站点。

Chrome 服务化 — 更省内存

一样的方法也适用于浏览器进程。Chrome 正在进行体系结构更改，以便将浏览器程序的每一个部分，做为一项服务运行，从而能够轻松拆分为不一样的流程或汇总为同一个流程。

通常的想法是，当 Chrome 在强大的硬件上运行时，它可能会将每一个服务拆分为不一样的进程，从而提供更高的稳定性，但若是它位于资源约束的设备上，Chrome 会将服务整合到一个进程中，从而节省内存占用。在此更改以前，在相似 Android 的平台上，已经使用相似的方法，来整合流程以减小内存使用。

站点隔离 — 独立渲染进程

站点隔离是 Chrome 中最近推出的一项功能，能够为每一个跨网站 iframe 运行单独的渲染器进程。

咱们一直在讨论，每一个选项卡有一个独立的渲染器进程，它容许跨站点 iframe 在单个渲染器进程中运行，并在不一样站点之间共享内存空间。在同一个渲染器进程中运行 a.com 和 b.com 彷佛没问题。该同源策略是网络的核心安全模型，它确保一个站点在未经赞成的状况下没法访问其余站点的数据，绕过此策略是安全攻击的主要目标。进程隔离是分离站点的最有效方法。由于 Meltdonw 和 Spectre 这两个经典漏洞，咱们须要使用进程分离网站，这是很是重要的。默认状况下，自 Chrome 67 启用桌面隔离功能后，选项卡中的每一个跨站点 iframe 都会得到单独的渲染器进程。

启用站点隔离是一项多年的工程积累。站点隔离并不像分配不一样的渲染器过程那么简单，它从根本上改变了 iframe 彼此通讯的方式。当咱们在运行在不一样进程上的 iframe 页面上，打开 devtools，就意味着 devtools 必须实现这些后台通讯的功能，而且看起来是无缝的。即便使用简单的文字查找（Ctrl+F），来查找页面中的单词，这个操做也是在搜索不一样渲染器进程。正由于如此，浏览器工程师将站点隔离这个功能的发布，当作一个重要里程碑的缘由。

小结

在这篇文章中，咱们介绍了浏览器体系结构的高级视图，并介绍了多进程体系结构的优势。咱们还介绍了 Chrome 中，与多进程架构密切相关的服务化和站点隔离。在下一篇文章中，咱们将开始深刻研究这些进程和线程之间发生的事情，以便显示一个网站。

原文地址：

https://developers.google.com/web/updates/2018/09/inside-browser-part1

---

「联机圆桌」👈推荐个人知识星球，一年 50 个优质问题，上桌联机学习。

推荐阅读：

写做是核心竞争力 | Google 工程师解密“猜画小歌” | 图解：HTTP 范围请求 | Android P 适配经验 | 技术创业选择清单 | HTTP传输编码 | 什么正在消耗你？ | HTTP 内容编码 | 图解 HTTP 缓存 | 聊聊 HTTP 的 Cookie | 辅助模式实战 | Accessibility 辅助模式 | 小程序 Flex 布局 | 好的 PR 让你更靠谱 | 密码管理之道