共计 3402 个字符，预计需要花费 9 分钟才能阅读完成。
本文翻译自 Inside look at modern web browser (part 1)
原文作者：Mariko Kosaka
翻译：Gomi
CPU，GPU，内存以及多过程架构
在这个系列中，咱们将会从高层架构的角度深刻到 Chrome 浏览器渲染流程的具体细节。如果你想晓得浏览器是如何将你的代码变成一个可用的网站，亦或者你不分明为何会倡议你应用特定的技术来进步网站的性能，那么本系列适宜你。
作为本系列的第 1 局部，咱们将理解外围计算术语和 Chrome 的多过程架构。
如果你相熟 CPU/GPU 和过程 / 线程，你能够跳到浏览器架构
一、计算机的外围：CPU 和 GPU
为了理解浏览器的运行环境，咱们须要理解一些计算机部件以及它们的作用。
CPU
首先是 中央处理器 （CPU）。CPU 能够看作是计算机的大脑。一颗 CPU 内核，在此图中被描绘成一个办公室员工，当工作呈现时，它能一个一个地解决许多不同的工作。它能够解决从数学到艺术的所有事件，同时晓得如何回复客户的电话。在过来，大多数 CPU 都是单芯片的。内核就像另一个 CPU 生存在同一个芯片中。在古代硬件中，你通常会失去多个内核，从而为你的手机和笔记本电脑提供更强的计算能力。
图 1：4 个 CPU 内核作为办公室工作人员坐在每张办公桌前解决进来的工作
GPU
图形处理器 （GPU）是计算机的另一部分。与 CPU 不同，GPU 善于解决简略的工作，但能够同时跨多个内核。顾名思义，它最后是为解决图形而开发的。这就是为什么在图形上下文（可能是指电脑的 GPU 选项）中“应用 GPU”或“GPU 反对”与疾速渲染和晦涩交互无关。近年来，随着 GPU 减速图像处理技术的倒退，越来越多的计算在 GPU 上成为了可能。
图 2：许多带有扳手的 GPU 内核表明它们只能解决无限的工作
当你在计算机或手机上启动应用程序时，CPU 和 GPU 是驱动程序的外围。大部分状况下，应用程序会依据操作系统提供的机制运行在 CPU 和 GPU 上。
图 3：三层计算机架构。机器硬件在底层，操作系统在两头，应用程序在顶层
二、在过程和线程上执行程序
在深入研究浏览器架构之前要把握的另一个概念是过程和线程。过程能够形容为应用程序的执行程序。线程是存在于过程外部并执行其过程程序的任何局部的线程。
当你启动应用程序时，计算机会创立一个过程。该程序可能会创立线程来帮忙它工作，但这是可选的。操作系统为过程提供了一块可应用的内存“平板”，所有应用程序状态都保留在该公有内存空间中。当你敞开应用程序时，该过程也会隐没，并且操作系统会开释内存。
图 4：过程作为边界框，线程作为形象的鱼在过程内游动
图 5：应用内存空间和存储应用程序数据的过程图
一个过程能够要求操作系统启动另一个过程来运行不同的工作。产生这种状况时，将为新过程分配内存的不同局部。如果两个过程须要通信，它们能够应用过程间通信 (IPC) 来实现。许多应用程序被设计为以这种形式工作，因而，如果一个过程没有响应，它不会影响其余运行在不同应用程序上的过程，而后重新启动。
图 6：通过 IPC 进行通信的独立过程示意图
三、浏览器架构
那么如何应用过程和线程构建 Web 浏览器呢？好吧，它可能是一个具备许多不同线程的过程，也可能是许多不同的过程，其中有几个线程通过 IPC 进行通信。
图 7：过程 / 线程图中的不同浏览器架构
这里要着重留神的是，图中这些不同的架构是实现细节，并没有对于如何构建 Web 浏览器的标准规范，一种浏览器的构建可能与另一种齐全不同。
接下来咱们将应用下图中形容的 Chrome 的最新架构。
顶部是浏览器过程与解决应用程序不同局部的其余过程协调。对于渲染器过程，会创立多个过程并将其调配给每个网页。直到最近，Chrome 还在可能的状况下为每个网页提供了一个过程；当初 Chrome 尝试为每个站点提供本人的过程，包含 iframes（[站点隔离]。(https://developers.google.com…)）
图 8：Chrome 的多过程架构图。渲染器过程下显示了多个图层，以示意 Chrome 为每个选项卡运行多个渲染器过程
四、每个过程对应管制的局部
下表形容了每个 Chrome 过程及其管制的内容：
| 浏览器过程 | 管制“chrome”应用程序局部，包含地址栏、书签、后退和后退按钮。还解决浏览器中不可见的特权局部，例如网络申请和文件拜访 |
| 渲染器过程 | 管制显示网页内的任何显示的内容 |
| 插件（plugin）过程 | 管制网站应用的任何插件，例如 Flash |
| GPU 过程 | 独立于其余过程，解决 GPU 工作。它被分成不同的过程，因为 GPU 解决来自多个应用程序的申请并将它们绘制在同一个外表上。 |
| 浏览器插件（Extension）过程 | 管制浏览器插件，比方油猴、Vue Devtools 等 |
| 实用程序过程 | 管制一些其余实用程序的过程，比方 V8 代理解析工具，音频服务等 |
图 9：指向浏览器 UI 不同局部的不同过程
五、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（安全漏洞）的呈现，咱们更加须要应用不同的过程来隔离站点。自 Chrome 67 起，默认状况下在桌面上启用站点隔离，网页中的每个跨站点 iframe 都会取得一个独自的渲染器过程。
图 12：站点隔离示意图；指向站点内 iframe 的多个渲染器过程
启用站点隔离是一项多年的工程工作。站点隔离并不像调配不同的渲染器过程那么简略；它从根本上扭转了 iframe 互相通信的形式。从不同过程上运行 iframe 的页面，关上 devtools，意味着 devtools 必须执行后台任务以使其看起来无缝集成。即便运行一个简略的 Ctrl+ F 在页面中查找单词，也意味着在不同的渲染器过程中进行搜寻。这就是为什么浏览器工程师会将“站点隔离”的公布称为重要里程碑的起因！
八、总结
在这篇文章中，咱们从一个更高的视角介绍了浏览器架构，并介绍了多过程架构的益处。咱们还介绍了与多过程架构密切相关的 Chrome 中的服务化和站点隔离。在下一篇文章中，咱们将开始深入研究，为了胜利展现一个网站，这些过程和线程之间产生了哪些事件。
