原文，Mariko Kosaka

[译]从内部了解现代浏览器(1)

[译]从内部了解现代浏览器(2)

[译]从内部了解现代浏览器(3)

CPU，GPU，内存和多线程架构

在本系列的四篇文章中，我们会从内部了解Chrome架构中渲染流的细节；如果你想知道浏览器是怎么把你的代码变成一个功能站点的话，或者你不清楚为什么建议使用特定的技术来改善性能，这个系列就是为你准备的；

作为本系列的第一篇，我们来看一看一些重要的计算机术语和Chrome的多进程架构；

计算机的核心CPU和GPU

为了理解浏览器的运行环境，我们需要理解一些重要的计算机硬件和它们的作用；

CPU

第一个就是计算机核心处理单元-CPU(Central Processing Unit)，CPU可以被认为是你计算机的大脑。一个CPU内核，可以看做是一个办公室文员，可以一个接着一个处理不同的任务；它可以处理从数学到艺术的所有事情，知道如何回复客户的电话。在过去，大多数CPU只是一个芯片；核心就像是在同一块芯片上的另一个CPU；在现代硬件中，通常有不止一个核心，为你的手机和电脑提供更多的计算能力;

图1：每个核心都可以处理多种任务

GPU

图形处理单元-GPU(Graphics Processing Unit)是另一个计算机的重要部件；与CPU不同，GPU擅长处理简单的任务，但是同时在多个核心之间；正如它的名字，它最初是用来处理图形的；这就是为什么在图形中using GPU和GPU-backed，与快速呈现和平滑交互相关；在近些年，随着GPU加速计算的技术，越来越多的计算在GPU上成为了可能；

图2：每个单元只能处理有限的任务

当你在手机或者电脑上启动应用程序的时候，CPU和GPU会为其运行提供能力，应用程序通过操作系统提供的机制在CPU和GPU上运行；

图3：硬件 - 操作系统 - 应用程序

程序运行在进程和线程中

在深入浏览器架构之前要掌握的另一个概念是进程和线程。一个进程可以被描述为一个应用程序的执行过程；线程存在于进程内部，并可以处理进程的任意部分（线程共享进程的上下文）；

当你启动一个应用程序，一个进程将被创建；这个进程可能会创建线程来帮助其工作(可选的)，操作系统为进程提供了一块内存，并且所有应用程序状态都被保存在该专用内存空间中，当你关闭应用程序时，该进程也会消失，操作系统会释放内存；

图4：进程和线程

图5：进程使用内存空间和存储应用数据

一个进程可以要求操作系统启动另一个进程来运行不同的任务；当这种情况发生时，内存的不同部分将被分配给新进程；如果两个进程间需要对话，它们可以通过使用内部进程通信(IPC)来实现；许多应用程序都是以这种方式工作的，因此如果工作进程没有响应，可以重新启动它而不停止运行应用程序其他部分的进程；

图6：通过IPC进行通信的进程

浏览器架构

那么浏览器是如何使用进程和线程构建的呢？是的，它可能具有许多不同线程或许多不同进程，只有少数进程通过IPC进行通信。

图7：浏览器架构中的进程/线程

这里需要注意的是这些不同的架构是实现细节，并没有关于如何实现一个浏览器的标准，一种浏览器的方式可能和另一个浏览器完全不同；

在本系列文章中，我们将使用下列描述的Chrome最新架构；

最重要的是浏览器进程，它负责协调处理应用中其他部分的进程；对于渲染器进程，会创建多个进程分配给每个选项卡；直到最近，Chrome仍尝试为每个选项卡提供一个进程；而现在，Chrome试图为每个站点提供自己的进程，包括iframe(详见站点隔离)；

图8：Chrome的多进程架构图。渲染器进程下显示多个图层，表示Chrome为每个选项卡运行多个渲染器进程。

每个进程控制什么?

下面的表格描述了每个Chrome的进程和它们负责的部分；

	进程和它们控制的部分
浏览器	管理Chrome应用的各个部分，比如地址栏，书签，后退和前进按钮；还负责Chrome中不可见的，受保护的部分，比如网络请求和文件管理等；
渲染	管理任何显示先选项卡中的内容；
插件	管理站点使用的任何插件，比如flash；
GPU	独立于其他进程处理GPU任务。它被分为不同的进程，因为GPU处理来自多个应用程序的请求并将它们绘制在同一表面中。

图9：指向浏览器UI界面的不同部分的不同进程

还有更多的进程，如扩展进程和工具进程。如果您想查看Chrome中正在运行的进程数，请点击右上角的选项菜单图标，选择更多工具，然后选择任务管理器。在打开的弹框中，包含当前正在运行的进程列表以及它们使用的CPU/内存量。

Chrome多进程架构的优点

我在上面提到Chrome使用多个渲染器进程。在最简单的情况下，您可以认为每个选项卡都有自己的渲染器进程。假设您打开了3个选项卡，每个选项卡都由独立的渲染器进程运行。如果一个选项卡没有响应，则可以关闭这个无响应的选项卡，同时保持其他选项卡处于活动状态。如果所有选项卡都在一个进程上运行，则当一个选项卡无响应时，所有选项卡都不会响应。这就糟糕了。

图10：在每一个选项卡上运行一个进程

浏览器运行在多个进程上的另一个好处是安全性和沙盒。由于操作系统提供了限制进程权限的方法，因此浏览器可以在某些功能中对某些进程进行沙盒处理。例如，Chrome浏览器会限制进程的任何文件访问，如在渲染器进程中限制用户输入；

由于进程有自己的私有内存空间，因此它们通常包含公共基础结构的拷贝（例如Chrome的JavaScript引擎V8）。这意味着更多的内存使用，因为如果它们不是处于同一进程内的线程，无法以某种方式共享内存空间。为了节省内存，Chrome限制了它可以启动的进程数量。限制因设备的内存和CPU功率而异，但当Chrome达到限制时，它会在一个进程中在同一站点运行多个选项卡。

节省更多内存 - Chrome中的服务化

同样的方法适用于浏览器进程。 Chrome正在进行架构的调整，以便将浏览器程序的每个部分作为一项服务运行，从而可以轻松拆分为不同的进程或汇总为一个进程。

一般的想法是，当Chrome在性能强大的硬件上运行时，它可能会将每个服务拆分为不同的进程，从而提供更高的稳定性，但如果它位于资源匮乏的设备上，则Chrome会将服务整合到一个进程中，从而节省内存占用。在此调整之前，在类似Android的平台上使用了类似的方法来整合进程以减少内存使用。

图11：Chrome的服务化将不同的服务转移到多个进程和一个浏览器进程中

每个框架单独的渲染器进程 - 站点隔离

站点隔离是Chrome中最近推出的一项功能，可为每个跨站点iframe运行单独的渲染器进程。我们一直在讨论每个选项卡模型的一个渲染器进程，它允许跨站点iframe在单个渲染器进程中运行，并在不同站点之间共享内存空间。在同一个渲染器进程中运行a.com和b.com似乎没问题。同源策略是Web的核心安全模型，它确保一个站点在未经同意的情况下无法访问其他站点的数据。绕过此策略是安全攻击的主要目标。进程隔离是分离站点的最有效方法。随着Meltdown/Spectre(漏洞)的出现，显而易见，我们更加需要使用进程来隔离站点。默认情况下，自Chrome 67启用隔离功能后，选项卡中的每个跨站点iframe都会获得单独的渲染器进程。

图12：多个渲染器进程指向站点内的iframe

启用站点隔离是一项进行多年的工程。站点隔离并不像分配不同的渲染器进程那么简单; 它从根本上改变了iframe彼此交流的方式。在具有在不同进程上运行的iframe的页面上打开devtools意味着devtools必须实现幕后工作以使其看起来无缝连接。即使运行简单的Ctrl + F来查找页面中的单词也意味着搜索不同的渲染器进程。您可以看到浏览器工程师将Site Isolation的发布作为一个重要里程碑的原因！

总结

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