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