说明
浏览器工作原理与实践专栏学习笔记
前言
在默认情况下，如果打开一个标签页，那么浏览器会默认为其创建一个渲染进程。
如果从一个标签页中打开了另一个新标签页，当新标签页和当前标签页属于同一站点（相同协议、相同根域名）的话，那么新标签页会复用当前标签页的渲染进程。
多个标签页运行在同一个渲染进程：从标签页中打开新的标签页
多个标签页运行在不同的渲染进程中：新建一个标签页打开
标签页之间的连接
可以通过 window.opener 操作
1.通过标签<a>来和新标签建立连接
<a href="https://time.geekbang.org/" target="_blank" class="">极客时间</a>
2.通过 window.open 方法来和新标签页建立连接
new_window = window.open("http://time.geekbang.org")
在 WhatWG 规范中，把这一类具有相互连接关系的标签页称为浏览上下文组 ( browsing context group)。
一个标签页所包含的内容，诸如 window 对象，历史记录，滚动条位置等信息称为浏览上下文。通过脚本相互连接起来的浏览上下文就是浏览上下文组。
规范文档
Chrome 浏览器会将浏览上下文组中属于同一站点的标签分配到同一个渲染进程中。
为什么它们必须运行在同一渲染进程中？
因为如果一组标签页，既在同一个浏览上下文组中，又属于同一站点，那么它们可能需要在对方的标签页中执行脚本。
计算标签页使用的渲染进程数目：
noopener 与 noreferrer
Chrome 浏览器为标签页分配渲染进程的策略：
如果两个标签页都位于同一个浏览上下文组，且属于同一站点，那么这两个标签页会被浏览器分配到同一个渲染进程中。
如果这两个条件不能同时满足，那么这两个标签页会分别使用不同的渲染进程来渲染。
例子：首先打开 linkmarket.aliyun.com 这个标签页，再在这个标签页中随便点击两个链接，然后就打开了两个新的标签页了，如下图所示：
A、B、C 三个标签页都属于同一站点，正常情况下，它们应该共用同一个渲染进程，不过通过上图我们可以看出来，A、B、C 三个标签页分别使用了三个不同的渲染进程。
说明这三个标签页不在同一个浏览上下文组中。
怎么验证？
可以通过控制台，来看看 B 标签页和 C 标签标签页的 opener 的值都是 null，说明 B、C 标签页和 A 标签页没有连接关系，不属于同一浏览上下文组。
实现的原理是什么？
链接使用了 rel = noopener：
- noopener：告诉浏览器，通过这个链接打开的标签页中的 opener 值设置为 null
- noreferrer：告诉浏览器，新打开的标签页不要有引用关系。
阿里为什么要把同一站点的tab签做成无连接的，会避免什么安全隐患啊？
如果多个标签在同一个进程中，那么一个标签沦陷了，其它标签都会沦陷的
更多可以参考：nofollow、noopener和noreferrer标签的区别
什么是 noreferrer 标签？
简而言之，noreferrer 标记在单击链接时隐藏引用者信息。如果有人从使用此标记的链接到达您的网站，您的分析将不会显示谁提到该链接。相反，它会错误地显示为您的统计流量报告中的直接流量。
这个 noreferrer 标签在 WordPress 早些版本中是自动添加到 A 标签中，但实际上这并不是 WordPress 本身所做的改变，而是由 WordPress 使用的富文本编辑器 TinyMCE（WordPress 默认编辑器）造成的。目的就是防止网络钓鱼攻击，垃圾邮件发送者劫持您的网页，可能会访问您的网站或访问机密信息。不过现在 TinyMCE 只强制插入 noopener 标签，已经不会强制插入“noopener noreferrer”标签。
什么是 noopener 标签？
rel =“noopener” 在新标签中打开链接时基本上不会打开它的开启者。这意味着，它的 window.opener 属性将是在新标签中打开一个链接时，而不是从那里的链接打开同一个页面为空。
rel =“noopener” 一般都是搭配 target="_blank"同时使用，因为 target="_blank" 也是一个安全漏洞：新的页面可以通过 window.opener 访问您的窗口对象，并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。新页面将与您的页面在同一个进程上运行，如果新页面正在执行开销极大的 JavaScript，您的页面性能可能会受影响。
什么是 nofollow 标签？
nofollow 标签就是告诉百度、Google 等搜索引擎不要通过使用此标记的链接传递任何值。大多数情况下，nofollow 标签用于阻止“PageRank”传递到网站上的管理页面（例如，您不需要排名的登录页面），或者根据 Google 的付费使用广告客户的 URL 链接政策。除了用于付费和管理链接之外，nofollow 标记通常用于限制 PageRank 通过博客评论或留言簿条目中的链接传递。在链接到信誉或可信度可能成为问题的网站时，您也可以使用 nofollow。
noopener 和 noreferrer 标签如何提高安全性？
noopener 和 noreferrer 标签是阻止漏洞利用的主动权，该漏洞利用在新标签中打开的链接。很少有成员知道这个漏洞，因此 WordPress 采取这一举措来提高用户的安全性。反向 Tabnabbing 是一种网络钓鱼攻击，攻击者用恶意文档替换合法且可信的页面选项卡。
当有人打开新选项卡时，网络钓鱼者会通过 window.opener 检测引荐网址，并使用 window.opener.location = newURL 推送新的网址。
这样，没有人会有陷入网络钓鱼攻击的线索，因为他们已经从可靠的来源（WordPress 建立的网站）到达网站。而使用 rel =“noopener”会阻止网络钓鱼者获取有关链接源和与 referrer 链接相关的任何数据的信息。
nofollow、noopener 和 noreferrer 标签对SEO 有什么影响？
这是许多博主站长们关心的问题，因为大家都知道 nofollow 标签会影响 Google 等搜索引擎的抓取和索引链接以及传递 PageRank 的能力，所以大家都比较担心 noopener 标签和 noreferrer 标签也会这样做。
其实，noopener 标签和 noreferrer 标签对 SEO 没有任何影响。简而言之，它们运行在分析/浏览器级别，而不是搜索引擎级别。虽然在监控反馈流量方面存在严重问题，但它不会影响站点内容的索引、抓取或排名方式。
站点隔离
目前 Chrome 浏览器已经默认实现了站点隔离的功能，这意味着标签页中的 iframe 也会遵守同一站点的分配原则。如果 iframe 和标签页不属于同一站点，那么 iframe 会运行在单独的渲染进程中。
例子：
<!DOCTYPE html> <html lang="en"> <head> <title>站点隔离:demo</title> <style> iframe { width: 800px; height: 300px; } </style> </head> <body> <div><iframe src="iframe.html"></iframe></div> <div><iframe src="https://www.infoq.cn/"></iframe></div> <div><iframe src="https://geekbang.org/"></iframe></div> <div><iframe src="https://meiqia.com/"></iframe></div> </body> </html>
iframe 使用单独的渲染进程：
计算 iframe 所使用的渲染进程数目：
- InfoQ、极客邦两个 iframe 与父标签页不属于同一站点，所以它们会被分配到不同的渲染进程中
- iframe.html 和源标签页属于同一站点，所以它会和源标签页运行在同一个渲染进程中
