使用 dns-prefetch

DNS-prefetch 嘗試在請求資源之前解析域名。這可能是稍後載入的檔案，也可能是使用者嘗試訪問的連結目標。

為什麼要使用 dns-prefetch？

當瀏覽器從（第三方）伺服器請求資源時，必須將該 跨域 的域名解析為 IP 地址，然後瀏覽器才能發出請求。此過程稱為 DNS 解析。雖然 DNS 快取可以幫助減少這種延遲，但 DNS 解析可能會給請求增加明顯的延遲。對於連線到許多第三方的網站，這種延遲會顯著降低載入效能。

dns-prefetch 幫助開發人員掩蓋 DNS 解析延遲。 HTML <link> 元素 透過 rel 屬性 的 dns-prefetch 值提供了此功能。 跨域 域名隨後在 href 屬性 中指定

語法

html
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />

示例

html
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
    <!-- and all other head elements -->
  </head>
  <body>
    <!-- your page content -->
  </body>
</html>

只要你的網站引用了跨域域名的資源，你都應該將 dns-prefetch 提示放置在 <head> 元素 中，但有一些事項需要注意。

最佳實踐

需要注意 3 個主要事項

首先，dns-prefetch 僅對 跨域 域名的 DNS 查詢有效，因此請避免使用它指向你的網站或域名。這是因為，瀏覽器看到提示時，你網站域名背後的 IP 地址已經解析過了。

其次，還可以透過 HTTP 頭部 指定 dns-prefetch（以及其他資源提示），方法是使用 HTTP Link 欄位

http
Link: <https://fonts.googleapis.com/>; rel=dns-prefetch

第三，雖然 dns-prefetch 僅執行 DNS 查詢，但 preconnect 建立與伺服器的連線。此過程包括 DNS 解析，以及建立 TCP 連線和執行 TLS 握手（如果網站透過 HTTPS 提供服務）。使用 preconnect 提供了進一步減少 跨域請求 感知延遲的機會。你可以透過 HTTP 頭部 使用 HTTP Link 欄位 來使用它

http
Link: <https://fonts.googleapis.com/>; rel=preconnect

或透過 HTML <link> 元素

html
<link rel="preconnect" href="https://fonts.googleapis.com/" crossorigin />

注意：如果頁面需要與多個第三方域名建立連線，則預先連線所有域名會適得其反。 preconnect 提示最適合用於最關鍵的連線。對於其他連線，只需使用 <link rel="dns-prefetch"> 來節省第一步（DNS 查詢）的時間。

將這些提示配對背後的邏輯是，dns-prefetch 的支援比 preconnect 的支援更好。不支援 preconnect 的瀏覽器仍將透過回退到 dns-prefetch 而獲得一些額外的好處。由於這是一個 HTML 功能，因此它非常容錯。如果一個不支援的瀏覽器遇到 dns-prefetch 提示（或任何其他資源提示），你的網站不會崩潰。你只是不會收到它帶來的好處。

某些資源（如字型）在匿名模式下載入。在這種情況下，你應該在 preconnect 提示中設定 crossorigin 屬性。如果你省略它，瀏覽器只會執行 DNS 查詢。

另請參閱