本文为译文，内容尽可能保持和原文的一致性，如果翻译有误，欢迎批评指正。
原文作者：Mariko Kosaka
原文标题：Inside look at modern web browser (part 1)
原文链接：https://developers.google.com/web/updates/2018/09/inside-browser-part1
CPU，GPU，内存和多进程架构
在这个由4部分组成的博客系列中，我们将从高级架构到渲染管道的细节中深入了解Chrome浏览器。如果你想知道浏览器是如何将你的代码转换为功能性网站，或者你不确定为什么建议使用特定技术来提高性能，那么本系列适合你。
作为本系列的第一部分，我们将了解计算术语和Chrome的多进程架构。
注意：如果你熟悉CPU/GPU和进程/线程的概念，你可以跳到浏览器架构。
计算机的核心是CPU和GPU
为了了解浏览器运行的环境，我们需要了解一些计算机部件以及它们的作用。
CPU
首先是中央处理单元或者CPU，它可以被认为是你计算机的大脑，一个CPU内核，正如图中的办公室人员，可以一一处理许多不同任务。它可以处理从数学到艺术的所有事情，同时知道如何回复客户电话。过去大多数CPU都是单芯片，一个内核就像是同一个芯片中的另一个CPU。而现在硬件中，你通常可以拥有多个核心，从而给你的手机和电脑提供更多计算能力。
图1：4个CPU内核作为办公室工作人员坐在每个办公室桌前处理他们进来的任务
GPU
图形处理单元-或GPU是计算机的另一个部分。和CPU不同，GPU更加擅长处理简单的任务，但是同时跨多个内核。顾名思义，它最初就是为了处理图形而开发的。这就是为什么图像上下文中“使用GPU”或“GPU支持”与快速渲染和流畅交互相关联。近些年来，随着GPU加速计算，越来越多的计算将有可能直接单独使用GPU。
图2：许多带有扳手的GPU内核表明它们处理的任务有限
当你在手机或电脑上启动应用程序时，CPU和GPU为应用程序提供动力的部分，应用程序是在使用操作系统提供的机制里的CPU和GPU上运行的。
图3：3层计算机架构图，底层是计算机硬件，中间是操作系统，顶层是应用程序
在进程和线程上执行程序
在深入研究浏览器架构之前要掌握另一个概念是进程和线程。一个进程可以被描述为一个应用程序的执行程序。线程是存在于进程内部并执行其进程程序的任何部分的线程。
图4：进程作为边界框，线程就好比是在进程内游动的抽象鱼儿
当你启动一个应用时，就会创建一个进程。程序可能会创建线程来帮它工作，但是这个是可选的。操作系统为进程提供了一块“内存块”以供使用，并且所有的应用程序状态都保存在该私有内存空间中。当你关闭应用程序时，相应的进程也会消失，操作系统也会释放相应内存。
图5：使用内存空间和存储应用程序数据的进程图
一个进程可以要求操作系统启动另一个进程来运行不同的任务。发生这种请求时，会为新进程分配内存的不同部分。如果两个进程需要通信，它们可以使用进程间通信(IPC)来实现。许多应用程序都设计为以这种方式工作，因此如果工作进程没有相应，他可以重新启动，而无需停止运行应用程序不同部分的其他进程。
图6：通过IPC通信的独立进程图
浏览器架构
那么如何使用进程和线程构建web浏览器呢？嗯，它可能是一个拥有许多不同线程的进程或者是通过IPC通信的多个进程，每个进程都拥有几个线程。
图7：进程/线程图中的不同浏览器架构
这里需要注意的重要一点是，这些不同的架构是实现细节。没有任何标准规范关于如何构建web浏览器，一种浏览器的实现方法可能和另一种完全不一样。
在本系列博客中，我们将使用下图描述的Chrome最新架构。
顶部是浏览器进程配合其他处理应用程序不同部分的进程。对于渲染器进程，会创建多个进程并将它分配给每个选项卡，直到最近，当存在可能的情况下Chrome会为每个选项卡提供一个进程。现在它尝试为每个站点提供自己的进程，包括iframe（请参考站点隔离）。
图8：Chrome的多进程架构图。多层显示在渲染器进程下，代表Chrome为每一个选项卡运行多个渲染器进程。
哪个进程控制什么呢？
下表描述了每个Chrome进程及其控制的内容：
| 进程及其控制的内容 | |
|---|---|
| 浏览器进程 | 控制应用程序的“Chrome”部分，包括地址栏、书签、后退和前进按钮。还处理Web浏览器的不可见的特权部分，例如网络请求和文件访问。 |
| 渲染器进程 | 控制显示网站的选项卡内的任何内容。 |
| 插件进程 | 控制网站任何插件，比如flash。 |
| GPU进程 | 独立于其他进程处理GPU任务。它被分成不同的进程，因为GPU处理来自多个应用程序的请求并将它们绘制在同一个表面上。 |
图9：不同进程指向浏览器UI的不同部分
还有更多的进程，比如扩展进程和使用程序进程。如果你想查看Chrome中正在运行的进程数，请单击右上角的选项菜单图标，选择更多工具，然后选择任务管理器。这将打开一个窗口，其中包含当前正在运行的进程列表以及它们使用的CPU/内存量。
Chrome中多进程架构的好处
之前，我提到Chrome使用多个渲染器进程。在最简单的情况下，你可以想象每个选项卡都有自己的渲染器进程。假设你打开了3个选项卡，每个选项卡都由一个独立的渲染器进程运行。如果一个选项卡崩溃时，那么你可以直接关闭崩溃的选项卡并继续操作，同时保持其他选项卡的活动。如果所有选项卡都在一个进程上运行，当一个选项卡崩溃时，所有选项卡都无法响应，这很可悲。
图10：显示运行每个选项卡的多个进程的图表
将浏览器的工作分成多个进程的另一个好处是安全性和沙盒。由于操作系统提供了一种限制进程权限的方法，因此浏览器可以从某些功能中对某些进程进行沙箱处理。例如，Chrome浏览器限制对处理任意用户输入的进程（如渲染器进程）的任意文件访问。
因为进程有自己的私有内存空间，所以它们通常包含公共基础设施的副本（比如V8，它是Chrome的JavaScript引擎）。这意味着更多的内存使用量，因为如果它们是同一进程内的线程，它们就不能像它们那样共享。为了节省内存，Chrome限制了它可以启动的进程数，这限制取决于你的设备的内存和CPU能力，但是当Chrome达到限制时，它会开始在一个进程中运行来自同一站点的多个选项卡。
节省更多内存-Chrome中的服务化
同样的方法应用于浏览器进程，Chrome正在经历架构更改，以将浏览器程序的每个部分作为一项服务运行，从而可以轻松地拆分为不同的进程或聚合为一个进程。
一般的想法是当Chrome在强大的硬件上运行时，它可能会将每个服务拆分为不同的进程以提供更高的稳定性，但是如果它位于资源受限的设备上，Chrome会将服务合并到一个进程中以节省内存占用。在此更改之前，已经在Android等平台上使用了类似的方法来合并进程以减少内存使用量。
图11：Chrome服务化将不同服务移入多个进程和单个浏览器进程的示意图
每帧渲染器进程 - 站点隔离
站点隔离是Chrome中最近引入的一项功能，它为每个跨站点iframe运行单独的渲染器进程。我们一直在讨论每个选项卡模型一个渲染器进程，它允许跨站点iframe在单个渲染器进程中运行，并在不同站点之间共享内存空间。在同一个渲染器进程中运行a.com和b.com似乎没有问题。同源策略是网络的核心安全模型，它确保一个站点在未经同意的情况下无法访问其他站点的数据。绕过此策略是安全攻击的主要目标，进程隔离是分离站点的最有效方法。结合Meltdown和Spectre，我们需要使用流程来分离站点变得更加明显。自Chrome67以来，桌面默认启用站点隔离，选项卡中每个跨站点iframe都有一个单独的渲染器进程。
图12：站点隔离示意图；多个渲染器进程指向站点内的iframe
启用站点隔离是一项多年的努力工程，站点隔离并不像分配不同的渲染器进程那么简单，它从根本上改变了iframe相互通信的方式。在不同进程上运行iframe的页面上打开devtools意味着devtools必须实施幕后工作以使其看起来无缝。即使运行简单的Ctrl+F在页面中查找单词也意味着在不同的渲染器进程中进行搜索。你可以看到浏览器工程师将站点隔离的发布称为重大里程碑的原因。
总结
在这篇文章中，我们涵盖了浏览器架构的高级视图，并涵盖了多进程架构的好处。我们还介绍了与多进程架构密切相关的Chrome中的服务化和站点隔离。在下一篇文章中，我们将深入探讨这些进程和线程之间为了显示网站而发生的事情。
