爲什麼說此審查非常重要
當您的頁面鏈接至使用 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"
候選項:
- 收集所有包含屬性
target="_blank"
、但不包含屬性rel="noopener"
的<a>
節點。 - 過濾任何主機相同的鏈接。
由於 Lighthouse 會過濾主機相同的鏈接,因此,如果您處理大型網站,則會出現您可能需要注意的邊緣情況。
如果您的頁面在未使用 rel="noopener"
的情況下打開一個指向網站另一個區域的鏈接,則此審查的性能影響仍然適用。
不過,在您的 Lighthouse 結果中您不會看到這些鏈接。