译—现代浏览器内部原理（第一部分）-CSDN博客

原文：https://developers.google.com/web/updates/2018/09/inside-browser-part1

（最近在看底层类的文档，有很多是英文文档。因此我觉得反正都要看的，顺便翻译出来，方便以后查阅）

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

在这个由4部分组成的系列文章里，我们将介绍Chrome浏览器内部从高级架构到渲染管道的细节。如果你想知道浏览器如何将你的代码转换为功能性网站，或者你还很疑惑为什么建议一些特定方法来提高性能，那么本系列很适合你。

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

注意：如果你熟悉CPU / GPU和进程/线程的概念，则可以跳到浏览器体系结构。

计算器的核心是GPU和CPU。

为了了解浏览器运行的环境，我们必须得知道一些电脑部件和它们的功能。

CPU

首先是中央处理器—CPU。你可以将CPU看成电脑的大脑。CPU的核心，在这张图片里看着就像办公室里的工作人员，当他们进来以后可以逐个处理不同的任务。它可以在边回复客户电话的同时处理从数学到艺术等各种事情。在过去，大多数CPU都是单芯片。核心（core）就像住在同一个芯片里的另一个CPU。在现代硬件里，你通常会获得多个核心，给你的手机和笔记本电脑了更强大的计算能力。

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

GPU

图形处理器—GPU是电脑的另一个部分。同CPU不同的是，GPU更擅长在跨多个核心的同时处理一些简单的任务。就像其名字所表明的一样，它最初是被开发来处理图像的。这就是为什么当提到“使用GPU”或“以GPU为支持”时，跟着的就是快速的渲染和流畅的互动。近些年来，随着GPU计算速度的提升，越来越多的计算能利用GPU单独完成。

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

当你在你的电脑或手机上启动一个应用程序时，支持这个程序运行的就是CPU和GPU。通常，应用程序使用操作系统提供的机制在CPU和GPU上运行。

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

在进程和线程上执行程序

在潜入浏览器内部前还要掌握的另一个概念就是进程和线程。（ Process and Thread）一个进程可以看成是一个应用的执行程序。线程是进程里面的执行进程程序的任何部分的。（线程在进程内部，一个程序就是一个进程，进程里面就是一个个线程）。

当你启动一个应用程序时，一个进程就创建好了。进程可能会创建一个线程去帮助它开展工作，但那不是必须的（可选）。操作系统为工作中的进程提供了一个内存块（"slab" of memory），所有的应用状态都保存在那个私密的内存空间里。当你关闭这个应用时，进程也会随之而消失，操作系统会释放这个内存。

图4：作为边界框的进程，线程作为在进程内游动的抽象的鱼

click on the image to see animation（点击上图看动效）

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

一个进程可以让操作系统启动另一个进程来运行不同的任务。当这种情况发生时，内存的另一个部分会被分配给这个新的进程。如果两个进程之间需要对话，他们可以IPC（进程间通信Inter Process Communication）来实现。很多应用程序被设计成以这种方式工作是为了当其中一个进程不响应时，它可以重启并且不会影响运行应用程序的其他部分的进程（其他进程不会因此被停止）。

图6：通过IPC进行通信的独立进程图（点击查看动图）

浏览器架构

那么如何使用进程和线程构建web浏览器呢？好吧，有两种情况—可能是一个拥有不同线程的进程也可能是拥有少量线程的通过IPC通信的多个进程。

图7：流程/线程图中的不同浏览器体系结构

这里的重点是不同的架构是实现的细节性的东西。这里没有一个该如何构建浏览器的特定的标准。一个浏览器用的方式可能和其他浏览器的完全不同。

在我们的这个系列博客中，我们会使用如下图所示的谷歌Chrome最近的架构方式为例。

在顶部的是浏览器进程与负责应用程序的其他部分的进程的协调配合。对于渲染进程，多个进程被创建来分配给每一个标签页。直到最近，谷歌才尽可能地为每一个标签页提供一个进程。现在，谷歌尝试给每个站点一个自己的进程，包括iframes（参阅Site Isolation）

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

每个进程控制什么？

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

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

甚至还有更多的进程比如扩展进程和实用进程（utility processes）。如果你想看看有多少进程在你的Chrome里运行，点击右上角的menu 图标，选择更多工具，然后点击任务管理器。这会开启一个进程表窗口上面是当前运行的程序和他们所占的CPU/内存量。

Chrome多进程架构的优点

先前，我提到了Chrome用多个渲染器进程。在最简单的情况下，你可以想象成每个tab页有一个自己的渲染器进程。假如你打开了3个选项卡，那么每个选项卡都有一个独立的渲染器进程。如果其中一个选项卡不响应了，你可以关闭不响应的那个，其他的选项卡还是可以正常使用的。如果所有的选项卡都在同一个进程中，当一个不响应时所有的都不响应了，那就有点悲惨了。

图10：显示运行每个选项卡的多个进程的图表（点击图片看动图）

把浏览器工作分解为多进程的另一个好处是安全性和沙盒。因为操作系统提供了一种阻止进程的yi一些特权的方法，浏览器可以在某些功能上沙盒某个进程。例如，浏览器可以为处理任意用户输入的进程比如渲染器进程阻止任意的文件访问。

由于进程有自己的私人内存空间，它们通常包含通用基础架构的副本（比如Chrome的JavaScript引擎V8）。这意味着如果它们是同一进程中的线程它们将无法以它们的方式共享，这会占用更多的内存（这句没怎么懂

Because processes have their own private memory space, they often contain copies of common infrastructure (like V8 which is a Chrome's JavaScript engine). This means more memory usage as they can't be shared the way they would be if they were threads inside the same process. ）。为了节约内存，Chrome限制了它可以开启的进程的数量。这个限制取决于你的设备有多少CPU功率和内存。但是，当Chrome达到限制之后，它开始在同一个进程中运行来自同一个网站的多个标签页。

节约更多的内存-Chrome中的Servicification

对浏览器进程应用相同的方法。Chrome正在经历架构变革以将浏览器中的每个部分作为服务来运行以方便轻松地分解成多个不同的进程或是将多个不同的进程合并成一个。

通常的想法是，当Chrome在一个强大的硬件上使用，可能会把每个服务分解成不同的进程以给予更多的稳定性。但是当在一个资源约束的设备上运行时，Chrome将服务合并成一个进程以节省内存占用。在这次变革之前与合并进程以减少内存占用类似的方法已经在安卓平台上有所使用。

图11：Chrome的服务化图表将不同的服务转移到多个流程和单个浏览器流程中

每帧（Per-frame）渲染器进程—站点隔离（Site Isolation）

Site Isolation是Chrome最近推出的一个功能，为每个跨站点的iframe运行一个单独的渲染器进程。我们已经讨论过为每个选项卡提供一个渲染器进程的模式，允许跨站点iframe在单个渲染器进程中运行，并在不同站点之间共享内存空间。在同一个渲染器进程中运行a.com和b.com看起来是可行的。同源策略是web的核心安全模型。它保证了一个站点在未经许可的情况下不能从另一个站点请求数据。绕过此策略是安全攻击的主要目标。进程隔离是分割站点最有效的方法。随着Meltdown and Spectre漏洞的揭开，要通过进程来隔离站点更加显而易见了。自Chrome 67以来在桌面上默认启用了站点隔离，选项卡中的每个跨站点iframe都会获得单独的渲染器进程。

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

使站点隔离成为可能花费了多年的时间去研究。站点隔离不像分配不同的渲染进程那么简单。它从根本上改变了iframes彼此对话的方式。在不同进程上运行iframe的页面上打开devtools意味着devtools必须实现幕后工作才能使其看起来无缝。即使运行简单的Ctrl + F来查找页面中的单词，也意味着在不同的渲染器进程中搜索。这就是浏览器工程师将Site Isolation的发布作为一个重要里程碑的原因！