Chrome Dev Summit 2018 is happening now and streaming live on YouTube. Watch now.

网站使用 rel="noopener" 打开外部锚

为什么说此审查非常重要

当您的页面链接至使用 target="_blank" 的另一个页面时,新页面将与您的页面在同一个进程上运行。 如果新页面正在执行开销极大的 JavaScript,您的页面性能可能会受影响。

此外,target="_blank" 也是一个安全漏洞。新的页面可以通过 window.opener 访问您的窗口对象,并且它可以使用 window.opener.location = newURL 将您的页面导航至不同的网址。

如需了解详细信息,请参阅 rel=noopener 的性能优势

如何通过此审查

rel="noopener" 添加至 Lighthouse 在您的报告中识别的每个链接。 一般情况下,当您在新窗口或标签中打开一个外部链接时,始终添加 rel="noopener"

<a href="https://examplepetstore.com" target="_blank" rel="noopener">...</a>

如何实现此审查

本部分介绍如何实现此审查,以便您可以了解计算此审查得分的方式。

Lighthouse 使用以下算法将链接标记为 rel="noopener" 候选项:

  1. 收集所有包含属性 target="_blank"、但不包含属性 rel="noopener"<a> 节点。
  2. 过滤任何主机相同的链接。

由于 Lighthouse 会过滤主机相同的链接,因此,如果您处理大型网站,则会出现您可能需要注意的边缘情况。 如果您的页面在未使用 rel="noopener" 的情况下打开一个指向网站另一个区域的链接,则此审查的性能影响仍然适用。不过,在您的 Lighthouse 结果中您不会看到这些链接。