Chrome浏览器进程分析

上一篇《浏览器进程线程、任务队列和 async/await》按照自己的理解分析了下浏览器的进程和线程。最近在极客时间发现一个挺不错的课程——浏览器工作原理与实践，根据老师的课程在进程的层面上做一个笔记和实践分析。

当前多进程架构

课程中大概介绍了单进程浏览器、早期多进程架构、当前多进程架构和未来面向服务的架构。本篇主要分析下当前的多进程浏览器架构，如下图所示：

从图中可以看出，最新的 Chrome 浏览器包括：1 个浏览器（Browser）主进程、1 个 GPU 进程、1 个网络（NetWork）进程、多个渲染进程和多个插件进程。

几个进程的功能如下所示：

浏览器进程。主要负责界面显示、用户交互、子进程管理，同时提供存储等功能。
渲染进程。核心任务是将 HTML、CSS 和 JavaScript 转换为用户可以与之交互的网页，排版引擎 Blink 和 JavaScript 引擎 V8 都是运行在该进程中，默认情况下，Chrome 会为每个 Tab 标签创建一个渲染进程。出于安全考虑，渲染进程都是运行在沙箱模式下。
GPU 进程。GPU 进程的使用初衷是为了实现 3D CSS 的效果，只是随后网页、Chrome 的 UI 界面都选择采用 GPU 来绘制，这使得 GPU 成为浏览器普遍的需求。最后，Chrome 在其多进程架构上也引入了 GPU 进程。
网络进程。主要负责页面的网络资源加载。
插件进程。主要是负责插件的运行，因插件易崩溃，所以需要通过插件进程来隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

进程分析

现在提出一个问题，当前的 Chrome 浏览器打开 2 个页面后会有几个进程？下面分不同情况逐步进行分析。

普通情况

不加载任何插件，普通情况下打开谷歌和百度的首页，结果如下图所示：

可以发现会有浏览器进程、GPU 进程、网络进程和两个标签页的渲染进程，1+1+1+2=5 个进程。每个标签页放在不同的进程中，有效避免了单进程架构下某一页面崩溃则整个浏览器崩溃的窘境。

加载两个扩展

在普通情况的基础上随意加载两个扩展，结果如下图所示：

可以发现多出了两个扩展程序的进程，1+1+1+2+2=7 个进程。与标签页原因相似，把插件进程单独隔离，以保证插件进程崩溃不会对浏览器和页面造成影响。

打开两个同一站点页面

现在关闭所有插件，并且打开两个同一站点（same-site）的页面。

同一站点的定义与同源是有区别的，“同一站点”定义为根域名（例如 linjingyi.cn）加上协议（例如，https:// 或者http://），包含了该根域名下的所有子域名和不同的端口，比如下面这三个：

https://test.linjingyi.cn

https://www.linjingyi.cn

https://www.linjingyi.cn:8080

都是属于同一站点，因为它们的协议都是 https，而根域名也都是 linjingyi.cn。

可以发现，百度搜索 github 和百度搜索 javascript 这两个标签页被合并成了同一个进程，共用一个进程 ID，1+1+1+1=4 个进程。这里的主要原因是 Chrome 默认的进程策略为“process-per-site-instance”，解释下就是每个标签对应一个渲染进程。但是如果从一个页面打开了新页面，而新页面和当前页面属于同一站点时，那么新页面会复用父页面的渲染进程。总结下就是同一个 site-instance 使用一个进程。

一个页面内嵌套两个 iframe

关闭所有插件，写一个 html 文件并打开，内容如下所示：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>iframe</title>
  </head>
  <body>
    <iframe src="https://linjingyi.cn" width="300" height="400"></iframe>
    <iframe src="https://baidu.com" width="300" height="400"></iframe>
  </body>
</html>