现代浏览器探秘(part 1)：架构

连接：developers.google.com/web/updates…

翻译：疯狂的技术宅

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

在这个由4部分组成的系列文章中，咱们将介绍Chrome浏览器从高级架构到渲染管道的具体细节。 若是你想知道浏览器是如何将你的代码转换为功能性网站的，或者你想知道为何须要使用某些特定技术来提升性能，那么本系列很是适合你。

做为本系列的第1部分，咱们将介绍核心计算术语和Chrome的多进程架构。

注意：若是你熟悉CPU / GPU和进程/线程的概念，则能够跳到本文的浏览器体系结构部分。

计算机的核心是CPU和GPU

为了理解浏览器运行的环境，咱们须要了解一些计算机部件及其功能。

CPU

首先是中央处理单元（Central Processing Unit）—— CPU。 CPU能够被认为是你计算机的大脑。 CPU核心，在这里做为办公室工做人员，能够在他们进来时逐个处理许多不一样的任务。它能够处理从数学到艺术的全部事情，同时知道如何回复客户呼叫。 在过去，大多数CPU都是单芯片。 核心就像生活在同一芯片中的另外一个CPU。 在现代硬件中，你一般会得到多个核心，从而为你的手机和笔记本电脑提供更强的计算能力。

图1：4个CPU核心做为办公室工做人员坐在每一个办公桌处理任务

GPU

图形处理单元（Graphics Processing Unit ）—— GPU是计算机的另外一部分。 与CPU不一样，GPU擅长处理简单任务，但同时跨多个核心。 顾名思义，它最初是为处理图形而开发的。 这就是为何在图形环境中“使用GPU”或“GPU支持”与快速渲染和平滑交互相关联。 近年来，随着GPU加速计算，仅在GPU上就能够实现愈来愈多的计算。

图2：许多带有扳手的GPU核心代表它们能够处理有限的任务

当你在计算机或手机上启动程序时，CPU和GPU用来支持程序的运转。 一般，程序使用操做系统提供的相关机制在CPU和GPU上运行。

图3：三层计算机体系结构。 机器硬件位于底部，操做系统位于中间，应用程序位于顶部。

在进程和线程上执行程序

在深刻浏览器架构以前要掌握的另外一个概念是Process和Thread。 进程能够描述为运行状态中的程序。 线程是存在于进程内部并用来执行其程序任务的某一部分。

图4：过程划定了边界，线程做为在进程内游动的“抽象鱼”

启动程序时，将会建立一个进程。 该程序可能会建立线程来帮助它工做，但这是可选的。 操做系统为进程提供了一“块”内存，而且全部程序状态都保存在该专用内存空间中。 当你关闭程序时，该进程也会消失，操做系统会释放内存。

图5：进程使用内存空间和存储数据的示意图

进程能够要求操做系统启动另外一个进程来执行不一样的任务。 当这种状况发生时，将为新进程分配不一样的内存。 若是两个进程须要通讯，他们能够经过使用进程间通讯（IPC）来实现。 许多程序都是以这种方式工做的，所以若是一个工做进程失去响应，则能够从新启动它，而不会中止运行程序的其余进程。

图6：经过IPC进行通讯的独立进程示意图

浏览器架构

那么如何使用进程和线程构建Web浏览器？ 好吧，它多是一个具备许多不一样线程的进程，或是许多具备少许线程的经过IPC进行通讯的不一样进程。

图7：不一样浏览器体系结构中的进程/线程示意图

在这里有很是重要的一点须要注意，这些不一样的架构是实现细节。关于如何构建Web浏览器并无标准规范。 一种浏览器可能与另外一种浏览器的结构彻底不一样。

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

最重要的部分是浏览器进程怎样与程序的其余工做进程进行协调。 对于渲染器进程，将建立多个进程并将其分配给每一个选项卡。 直到不久前，Chrome才为每一个标签提供了一个进程；如今它尝试为每一个站点提供本身的进程，其中包括iframe（请参阅：站点隔离部分）。

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

每一个进程都作些什么？

下表介绍了每一个Chrome进程及其控制的内容：

进程	作些什么
Browser	控制程序的“chrome”部分，包括地址栏，书签，后退和前进按钮。 还处理Web浏览器的不可见的，和特权部分，例如网络请求和文件访问。
Renderer	负责显示网站的选项卡内的全部内容。
Plugin	控制网站使用的全部插件，例如flash。
GPU	独立于其余进程的GPU处理任务。 它被分红多个不一样的进程，由于GPU处理来自多个程序的请求并将它们绘制在同一个面中。

图9：指向浏览器UI不一样部分的不一样进程

还有更多的进程，如扩展进程和功能进程。 若是你想查看Chrome中正在运行的进程数，请点击右上角的选项菜单图标“more_vert”，选择“更多工具”，而后选择“任务管理器”。 这将打开一个窗口，其中包含当前正在运行的进程列表以及它们使用的CPU/内存量。

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彷佛没问题。 同源策略是Web的核心安全模型，它确保一个站点在未经赞成的状况下没法访问其余站点的数据。 绕过此策略是安全攻击的主要目标。进程隔离是分离站点的最有效方法。 因为Meltdown和Spectre漏洞，咱们更加须要使用进程来隔离站点。 默认状况下，自从Chrome 67启用桌面隔离功能后，选项卡中的每一个跨站点iframe都会获得单独的渲染进程。

图12：站点隔离示意，指向站点内iframe的多个渲染器进程

启用站点隔离是一项须要不少年的工做。 站点隔离并不像分配不一样的渲染进程那么简单；它从根本上改变了iframe彼此的交流方式。 在运行着不一样iframe进程的的页面上打开devtools，意味着devtools必须在背后作大量的工做才能使其看起来无缝。即便经过简单的 Ctrl + F 来查找页面中的单词也意味着须要跨越不一样的渲染进程进行搜索。 这就是浏览器工程师将站点隔离的发布做为一个重要里程碑的缘由！

总结

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