[译]深入了解现代web浏览器（一）

本文是根据Mariko Kosaka在谷歌开发者网站上的系列文章https://developer.chrome.com/blog/inside-browser-part1/ 翻译而来，共有四篇，该篇是第一篇。对于其中一些直译出来不太好理解的句子，笔者做了加工处理和提炼。

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

在这四篇博客系列中，我们将从高层架构到渲染管线来深入了解Chrome浏览器。如果你想知道浏览器是如何将你的代码转换为一个功能性网站、又或者不太确定为什么一些技术点能用来提高性能，那么这个系列正适合你。
在这个系列的第一篇中，我们将了解到计算机核心计算模块的术语以及Chrome浏览器的多进程架构。

计算机的核心——CPU和GPU

为了理解浏览器的运行环境，我们需要先理解一些计算机部件以及它们是如何运作的。

CPU

首先是中央处理器 - 也被称为CPU。CPU就如同计算机的大脑。在下图中，一个CPU内核就像是一个工作人员，可以处理一个接一个过来的各种任务，从数学计算到艺术工作都能胜任，并且还知道如何回复给客户。在过去，绝大部分CPU都是单芯片的；内核就像另一个CPU驻留在同一芯片中。在现代硬件中，为了让你的手机和电脑拥有更强的算力，通常都是多核的。

GPU

图形处理器——GPU是计算机的另一个重要组成部件。不同于CPU，GPU擅长处理简单的任务但是能同时跨越多个核。顾名思义，它最初是被设计来处理图形任务的，为了能够更快速地渲染和更流畅地交互。近些年来，随着GPU加速计算的发展，使得越来越多的计算任务能够放到GPU上处理。

当你启动计算机或者手机上的应用程序时，CPU和GPU就会驱动你的程序运行。通俗地说，应用程序是使用操作系统提供的各种机制从而才能运行在CPU和GPU上：

三层架构：底部是硬件，中间是操作系统，最上层是应用程序

在进程和线程上执行程序

在深入了解浏览器架构前需要掌握的另一个重要概念是进程和线程。进程可以被描述为一个应用的执行程序，一个线程是位于进程之中的并且会执行进程中的某部分程序。

把进程比作一个密封的盒子，线程就像是抽象的鱼在其中游动

当你启动一个应用程序的时候，一个进程也会被创建出来。该进程可能会创建一个或多个线程来帮助完成工作。操作系统会给进程分配“一整块”的内存来让其工作并将应用程序的状态都存储在该私有的内存空间中。当你关闭应用时，进程就会消失，之后操作系统就会将该块内存释放掉。示意动画：

进程可以请求操作系统启动另一个进程来运行不同的任务；这种情况下，新启动的进程会被分配新的一块内存。如果两个进程想要通信，可以使用一项被称为“进程间通信”（IPC）的技术手段。有许多应用程序都是这么设计的，因此当其中一个工作进程无响应时，可以依靠其他的进程来进行重启。

不同进程通过IPC进行通信

浏览器架构

那么浏览器是如果通过进程和线程构建起来的呢？如下图所示，它可能是仅有一个进程和多个线程构建的，也可以是通过多个进程且进程之中还都有多个线程的方式构建，进程之间通过IPC来通信：

需要注意的一点是，上述不同架构是实现上的细节；并没有所谓的规范规定浏览器应该如何构建。不同浏览器之间的实现差异可能很大。

在本系列的文章中，我们将使用下图中描述的Chrome浏览器的最新架构。（这里注意下 原文是2018年发布的了）
顶部的浏览器进程是专门用来与其他处理应用程序不同部分的进程做协调的。对于渲染进程，会创建出多个并分配给每个tab页。在最近Chrome打算在可能的情况下给每个站点分配一个进程，包括iframe。

Chrome的多进程架构。在渲染进程之下显示有多个层，表示Chrome为每个tab页都运行有一个渲染进程

各个进程都分别控制什么内容？

下方的表格展示了Chrome中各个进程和其控制的内容：

进程 控制的内容 浏览器进程 控制Chrome应用程序的部分模块，例如地址栏、书签、前进和后退按钮。同时也web浏览器中一些不可见和需要特定权限的功能，例如网络请求和文件访问 渲染进程 控制展示在网页中的所有内容 插件进程 控制网页所使用的任何插件，例如flash GPU进程 独立于其他的进程。在这种设计下，GPU进程接收来自其他进程的请求并最终都绘制在同一界面上

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

还有一些其他进程例如拓展进程和公用辅助进程。如果你想知道在你的Chrome中运行着哪些进程，可以点击右上角的菜单栏 -> 更多工具 -> 任务管理器。然后会打开一个窗口，展示当前正在运行的进程列表以及它们占用了多少的CPU和内存等资源。

Chrome多进程架构的好处

前面我们提到过Chrome是使用多个渲染进程的。在绝大多数简单的场景下，你可以认为每个tab有自己单独的渲染进程。现在假设你打开了3个tab页并且每个tab页运行着独立的渲染进程。如果其中一个无响应了，你可以关闭无响应的那个tab页，而其他的tabs依然正常运行。但是如果所有tabs都运行在一个进程中的话，当某一个tab页无响应时，所有的tabs都将会无响应，这真的太糟糕了。

把浏览器的工作分发到各个进程中的另一个好处是安全性和沙盒化。因为操作系统提供了限制进程权限的方式，浏览器可以利用沙盒化保护一些特定功能的进程。比如，Chrome限制了各种各种处理用户输入的进程（像渲染进程），不能随意地访问文件。

由于件进程都有各自私有的内存空间，所以它们通常都会包含公共基础设置的副本（例如Chrome的js引擎-V8）。这意味着需要消耗更多的内存，因为它们没法像同一进程中的线程那样共享。为了节省内存，Chrome限制了可以启动的进程数量。这个限制取决于设备的CPU和内存；当Chrome达到限制时，它会开始在一个进程中运行来自同一站点的多个tab页。

节省更多内存——Chrome中的服务化

上节中最后一段的方法也适用于浏览器进程。Chrome正在经历更改，以将浏览器程序的各个部分作为服务运行，从而能够轻松地拆分为不同进程或者聚合为一个。

一般的想法是，当Chrome运行在高性能的硬件上时，它可能会将每个服务拆分为不同的进程以提供更高的稳定性。但在资源受限制的设备上时，Chrome会将服务整合到一个进程中以节省内存占用。在此更改之前，这中整合进程以节省内存使用的方法已经在Android等平台上使用了。

Chrome服务化示意图 将不同的服务移动到多个进程或者单个浏览器进程中

每个frame一个渲染进程——站点隔离

站点隔离是Chrome最近引入的一项功能，它为每个跨站点iframe运行单独的渲染进程。我们前面讨论的模型都是一个tab页运行一个渲染进程，那样便允许跨站点iframe运行在同一渲染进程中，不同站点间就可以共享内存空间。在同一渲染进程中运行a.com和b.com看起来没什么问题。同源策略是网络安全的核心机制；它确保一个站点在未经允许的情况下不能访问其他站点的数据。安全攻击的核心目标就是绕过该策略。随着Meltdown and Spectre问题的出现，使用进程来隔离站点变得更加有必要。自Chrome 67起，在PC端上默认启用站点隔离，tab页中的每个跨站点iframe都会有单独的渲染进程。

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

启用站点隔离是一项持续了多年的大工程。站点隔离并不像分配不同的渲染进程那么简单；它从根本上改变了iframe互相通信的方式。在一个有若干iframe运行在不同进程中的页面上打开devtools，意味着devtools必须做许多幕后工作来使得这一切看起来是无缝相连的。即使是在页面上简单地按下Ctrl + F来查到单词，也需要在多个渲染进程间搜索。这也是为什么浏览器工程师们将站点隔离的发布看做是一项重大的里程碑！

总结

在这篇文章中，我们从高层次的视角介绍了浏览器架构以及多进程架构的好处；还介绍了与多进程架构密切相关的服务化和站点隔离。在下一篇文章中，我们会深入探讨这些进程和线程为了展示一个网页都干了哪些事。