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

4,029 阅读9分钟

原文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 GPUGPU-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中与多进程架构密切相关的服务化和站点隔离。在下一篇文章中,我们将开始深入研究这些进程和线程之间发生的事情,以及如何显示一个网站。