rel=noopener 的性能优势

如果你的链接指向其他站点，那么应该使用rel="noopener"，尤其是点击后会在新标签页/窗口中打开的链接。

<a href="http://example.com" target="_blank" rel="noopener">
   Example site
</a>

如果没有这个属性，新页面就可以通过window.opener来访问你的window对象。幸好Web的源安全模型会阻止它读取你的页面，不幸的是利用某些陈旧的API可以把你的页面导航到不同的URL：window.opener.location = newURL。

Web大侠Mathias Bynens曾详细写过这个问题( mathiasbynens.github io/rel-noopener/)，但我发现其实它还能提升性能。

（原文这里是一个Demo，有一个“Generate random numbers”按钮，点击可生成随机数。——译者注）

这里的随机数类似当前页面的生命体征。如果并不是每一帧都能生成随机数，说明有东西阻塞了线程。

单击下面的一个链接，打开一个需要大量JavaScript计算的页面（以下并非链接，请参见原文——译者注）：

• <a target="_blank">
• <a target="_blank" rel="noopener">

没有rel="noopener"，随机数会被新打开页面中的JavaScript阻断。不仅如此，所有主线程活动也会被阻塞，试试选择页面中的文本。但加了rel="noopener"之后，随机数生成一直保持在60fps。当然，是在Chrome或Opera中。

更新：Edge对点击任何链接都会中招儿。下面我们会详细说。

那为什么会这样？

Windows & processes

大多数浏览器都是多进程的，除了Firefox（他们正在改( developer.mozilla 组织网/en-US/Firefox/Multiprocess_Firefox)）。每个进程包含多个线程，包括我们常说的“主”线程。解析、样式计算、布局、绘制和非worker的JavaScript都在主线程里执行。就是说，一个域中的JavaScript与另一个标签页或窗口中的域中的JavaScript在不同的线程里。

然而，由于我们可以通过window.opener同步跨窗口地访问DOM，因此通过target="_blank"启动的窗口还在同一个进程（线程）中。通过window.open打开的iframe和窗口也一样。

rel="noopener"会阻止window.opener，因此不存在跨窗口访问。Chromium浏览器为此做过优化，会在独立的进程中打开新页面。

站点隔离

在Chrome总部，我们见证了把跨源iframe和新窗口迁移到新进程( www.chromium 组织网/developers/design-documents/site-isolation)，无论是否有rel="noopener"。这意味着受限的跨窗口访问会变成异步的，这样一来的好处就是提升了安全性和性能。

与此同时，rel="noopener" 能在今天为你提供性能和安全的双重好处！

rel=noopener 的性能优势主要体现在防止新窗口阻塞主线程，提升页面响应速度和计算稳定性‌。

防止主线程阻塞

当使用 target="_blank" 打开新窗口时，若未添加 rel=noopener，新页面的 JavaScript 可能阻塞原页面的主线程（如随机数生成、文本选择等操作）。添加该属性后，新窗口会在独立进程中运行，避免阻塞原页面的主线程任务。 ‌12

优化多进程资源分配

现代浏览器（如 Chrome、Edge）采用多进程架构，rel=noopener 促使新窗口独立运行，减少原页面进程的资源占用，提升整体性能表现。 ‌12

适用场景

建议所有使用 target="_blank" 的外部链接均添加 rel=noopener，尤其需避免新页面执行高计算量脚本时对原页面的性能影响。

rel="noopener" 属性是 HTML 中 <a> 标签的一个安全属性，用于防止新打开的页面通过 window.opener 访问原始页面的 window 对象。 这主要用于保护原始页面免受恶意攻击。

具体来说，当你在一个页面上点击一个链接，并且该链接的目标属性设置为 _blank (在新标签页或窗口中打开链接) 时，新打开的页面可以通过 window.opener 访问原始页面的 window 对象。 这意味着新页面可以：

• 修改原始页面的内容： 例如，恶意网站可以替换原始页面的内容，进行网络钓鱼攻击。
• 重定向原始页面： 恶意网站可以将原始页面重定向到另一个网站。
• 窃取原始页面的信息： 如果原始页面包含敏感信息 (例如，登录凭据)，恶意网站可以访问并窃取这些信息。

通过添加 rel="noopener" 属性，你就可以切断新打开的页面与原始页面之间的这种连接，从而防止上述攻击。 当 rel="noopener" 存在时，新打开的页面中的 window.opener 将被设置为 null。

总结:

• 安全性: rel="noopener" 增强了安全性，防止恶意网站通过 window.opener 操纵原始页面。
• 适用场景: 任何使用 target="_blank" 打开外部链接的 <a> 标签都应该添加 rel="noopener" 属性。
• 最佳实践: 为了更全面的保护，建议同时使用 rel="noopener noreferrer"。 rel="noreferrer" 会阻止 Referer 头信息发送到新打开的页面，进一步保护用户的隐私。

示例：

<a href="https://www.example.com" target="_blank" rel="noopener">安全链接</a>
<a href="https://www.example.com" target="_blank" rel="noopener noreferrer">更安全的链接 (推荐)</a>

总而言之，rel="noopener" 是一个简单但重要的安全属性，可以有效地保护你的网站免受潜在的攻击。 强烈建议在所有使用 target="_blank" 的链接中使用它。