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

原文：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的发布做为一个重要里程碑的缘由！

总结

本文，咱们已经从一个高层次上讲了浏览器的架构，也讲了多进程架构的好处。咱们还提到了和多进程架构密切相关的服务（Servicification ）和站点隔离（Site Isolation）。在下篇推文中，咱们会深刻了解这些进程和线程为了展现一个网页作了些什么。

你喜欢这篇文章吗？若是你有任何的疑惑和对之后的推文的建议我很期待你能在下面的评论或个人推特（@kosamari）上告诉我。

next：导航中发生了什么