Chrome 浏览器，多标签页共用一个进程场景

问题描述

• 问题表现：某页面 B 发生规律性卡顿。
• 排查现象：
  1. 新起一个浏览器标签页，独立访问页面 B，无卡顿现象；
  2. 从页面 A 打开新页面 B，B 发生规律性卡顿；
  3. 关闭页面 A ，页面 B 无卡顿现象；
  4. 保持页面 A 开启，手动新增一个浏览器标签页，输入页面 B 的 url，B 无卡顿现象；
• 结论：只有从页面 A 打开的页面 B，才会发生定期卡顿现象。

调试过程及原因

打开 chrome 浏览器的任务管理器。

发现从页面 A 打开页面 B 时（这里用了window.open()），页面 A 与页面 B 共用了一个进程。因页面 A 会定时执行大量页面渲染动作，CPU 陡增，导致页面 B 发生规律性卡顿。

注：下图仅为多标签页共用同一进程的示例图，并非真实的问题网站。

沉淀

一般情况下，每打开一个浏览器标签页，会新开一个独立进程，即使两个标签页打开的是同一个页面。如下图所示。

但，如果是通过一个标签页打开另一个标签页时，Chrome 浏览器，可能会将两个标签页共用一个进程。下面具体展开来说这种情况。

在新窗口中打开页面链接的三种方式：

这部分不配图了，请大家打开自己的 Chrome 任务管理器，随时观察吧。

1. 指定了 target="_blank" 的 a 标签

// 假设当前页面链接为：https://www.baidu.com/
// 通过两个 a 标签，分别打开两个页面，如下：
<a href="https://www.baidu.com/balabala" target="_blank">
	打开一个新百度
a>
<a href="https://www.csdn.net/" target="_blank">
	打开一个新 CSDN
a>

发现，同源的页面会被分配在同一个进程中。而非同源页面会分配一个新的进程。

如果希望同源页面也可以分配一个独立进程，可以为 a 标签，指定 rel 属性。即可切断新页面与当前页面的联系。如下：

// 假设当前页面链接为：https://www.baidu.com/
// 新增 rel 属性，指定 noopener 或 noreferrer
<a href="https://www.baidu.com/balabala" target="_blank" rel="noopener noreferrer">
	打开一个新百度
a>

2. window.open() 方法

// 假设当前页面链接为：https://www.baidu.com/
// 在控制面板分别执行以下命令
window.open('https://www.baidu.com/balabala');
window.open('https://www.csdn.net/');

发现，同源的页面会被分配在同一个进程中。而非同源页面会分配一个新的进程。

如果希望同源页面也可以分配一个独立进程，按照书上说的（红皮书，第 3 版，P201），我做了如下尝试：

有些浏览器（如 IE8 和 Chrome）会在独立的进程中运行每个标签页。当一个标签页打开另一个标签页时，如果两个 window 对象之前需要彼此通信，那么新标签页就不能运行在独立的进程中。在 Chrome 中，将新创建的标签页的 opener 属性设置为 null，即表示在单独的进程中运行新标签页，如下所示。
… …
将 opener 属性设置为 null 就是告诉浏览器新创建的标签页不需要与打开它的标签页通信，因此可以在独立的进程中运行。标签页之间的联系一旦切断，将没有办法恢复。

// 假设当前页面链接为：https://www.baidu.com/
var newWin = window.open('https://www.baidu.com/alala');
newWin.opener = null;

预期这次两个 baidu 会分别起一个独立进程，然而，依然在同一进程中…

3. iframe 内嵌页面

// 假设当前页面链接为：https://www.baidu.com/
<iframe src='https://www.baidu.com/balabala'>iframe>
<iframe src='https://www.csdn.net/'>iframe>

发现，同源的 iframe 没有新起一个任务（一开始还以为自己写错了…）,而非同源 iframe 页面作为一个“辅助框架”新起了一个任务，并且分配了一个独立进程。

写在最后的话：

再强调一下：写这个记录的时候，仅观察了 Chrome 的表现。
附上当前的 Chrome 版本信息：版本 75.0.3770.142（正式版本） （64 位）