本文翻译自Insidelookatmodernwebbrowser(part1)原作者：MarikoKosaka翻译：GomiCPU、GPU、内存和多进程架构在这个系列中，我们将从高层架构的角度深入到Chrome浏览器渲染过程的具体细节。如果您想知道浏览器如何将您的代码变成一个可用的网站，或者如果您不确定为什么推荐一种特定技术来提高您网站的性能，那么本系列适合您。在本系列的第1部分中，我们将了解核心计算术语和Chrome的多进程架构。如果对CPU/GPU和进程/线程比较熟悉的可以跳到浏览器架构1.计算机的心脏：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：三层计算机体系结构。机器硬件在底部，操作系统在中间，应用在顶部II.在进程和线程上执行程序在深入研究浏览器体系结构之前要掌握的另一个概念是进程和线程。进程可以描述为应用程序的执行程序。线程是存在于进程内部并执行其进程程序的任何部分的线程。当您启动应用程序时，计算机会创建一个进程。程序可能会创建线程来帮助它完成工作，但这是可选的。操作系统提供了一个内存“slab”供进程使用，所有的应用程序状态都保存在这个私有内存空间中。当您关闭应用程序时，该进程也会消失并且操作系统会释放内存。图4：作为边界框的进程和在进程中游动的抽象鱼的线程图5：使用内存空间和存储应用程序数据的进程图一个进程可以要求操作系统启动另一个进程来运行不同的任务。发生这种情况时，会为新进程分配不同的内存部分。如果两个进程需要通信，它们可以使用进程间通信(IPC)来实现。许多应用程序都设计为以这种方式工作，因此如果一个进程变得无响应，它不会影响在不同应用程序上运行的其他进程，然后这些进程会重新启动。图6：通过IPCIII进行通信的独立进程示意图。浏览器架构那么如何使用进程和线程来构建网络浏览器呢？好吧，它可以是一个具有许多不同线程的进程，也可以是具有多个通过IPC通信的线程的许多不同进程。图7：进程/线程图中的不同浏览器架构。这里需要注意的是，图中这些不同的架构是实现细节，并没有关于如何构建Web浏览器的标准规范。一个浏览器可能与另一个浏览器完全不同。接下来我们将使用Chrome的最新架构，如下图所示。最上面是浏览器进程，它与处理应用程序不同部分的其他进程进行协调。对于渲染器进程，创建多个进程并将其分配给每个网页。直到最近，Chrome在可能的情况下为每个网页提供了一个进程；现在Chrome试图给每个站点自己的进程，包括iframe（[站点隔离].(https://developers.google.com...)）图8：Chrome的多进程架构图。renderer进程下显示了多层，表示Chrome为每个选项卡运行多个renderer进程4.每个进程控制的部分下表描述了每个Chrome进程及其控制的内容：Browser该进程控制“chrome”应用程序的部分，包括地址栏、书签、后退和前进按钮。还处理在浏览器中不可见的特权部分，例如网络请求和文件访问Renderer进程控制显示网页内的任何显示内容Plugin进程控制网站使用的任何插件，例如FlashGPUGPU任务。它被分成不同的进程，因为GPU处理来自多个应用程序的请求并将它们绘制在同一表面上。浏览器插件（Extension）进程控制浏览器插件，如油猴、VueDevtools等实用进程控制一些其他实用进程，如V8代理分析工具、音频服务等进程5.多进程的好处Chrome中的进程架构早些时候，我提到Chrome使用多个渲染器进程。在最简单的情况下，您可以想象每个网页都有自己的渲染器进程。假设您打开了3个网页，每个网页都由一个单独的渲染器进程运行。如果网页变得无响应，那么您可以关闭无响应的网页并继续下一步，同时保持其他网页处于活动状态。如果所有网页都运行在一个进程上，当一个网页无响应时，所有网页都无响应，这是悲剧的。图10：显示每个选项卡运行多个进程的图表将浏览器的工作划分为多个进程的另一个好处是安全性和隔离性。浏览器可以通过某些功能将某些进程沙盒化，因为操作系统提供了一种限制进程权限的方法。例如，Chrome浏览器将文件访问限制为处理用户输入的进程，例如渲染器进程。因为进程有自己的私有内存空间，所以它们通常包含公共基础设施的副本（例如V8，它是Chrome的JavaScript引擎）。这意味着更多的内存使用，因为它们不能像同一进程中的线程一样共享。为了节省内存，Chrome限制了它可以启动的进程数。此限制取决于您的设备有多少内存和CPU处理能力，但当Chrome达到其限制时，它会开始在一个进程中运行来自同一站点的多个网页选项卡。6.节省更多内存——在Chrome中提供服务同样的方法也适用于浏览器进程。Chrome正在进行架构更改，以将浏览器程序的每个部分作为一项服务运行，这些服务可以很容易地拆分为不同的进程或聚合为一个。一般的想法是，当Chrome在强大的硬件上运行时，它可能会将每个服务拆分到一个不同的进程中以提供更高的稳定性，但如果它在资源受限的设备上，Chrome会将服务合并到一个进程中以节省内存使用。在此更改之前，已在Android等平台上使用类似的整合流程方法来减少内存使用。图11：Chrome的服务图将不同的服务移动到多个进程和单个浏览器进程中7.FrameRendererProcess-SiteIsolationSiteIsolation是Chrome中最近引入的一项功能，它提供iframe运行一个单独的渲染器进程。我们一直在谈论每个网页选项卡一个渲染器进程，它允许跨站点iframe在单个渲染器进程中运行并在不同站点之间共享内存空间。在同一个渲染器进程中运行a.com和b.com似乎没问题。同源策略是网络的核心安全模型；它确保一个站点在未经他们同意的情况下无法访问另一个站点的数据。绕过此策略是安全攻击的主要目标。进程隔离是分隔站点的最有效方法。由于Meltdown和Spectre（安全漏洞），我们需要使用不同的进程来隔离站点。自Chrome67以来，桌面上默认启用站点隔离，网页中的每个跨站点iframe都有一个单独的渲染器进程。图12：站点隔离示意图；多个渲染器进程指向站点内的iframe启用站点隔离是一项多年的工程工作。站点隔离不像分叉不同的渲染器进程那么简单；它从根本上改变了iframe之间的通信方式。从不同的进程运行iframe的页面，打开devtools，意味着devtools必须执行后台任务以使其看起来无缝集成。即使运行简单的Ctrl+F来在页面中查找单词，也意味着在不同的呈现器进程中进行搜索。这就是为什么浏览器工程师将站点隔离的发布称为一个重要的里程碑！8.总结在这篇文章中，我们从更高的角度介绍了浏览器架构，介绍了多进程架构的好处。我们还介绍了Chrome中的服务器化和站点隔离，这些与多进程架构密切相关。在下一篇文章中，我们将开始深入研究这些进程和线程之间发生了什么，以便成功显示网站。
