使用 dns-prefetch
DNS-prefetch 是在請求資源之前嘗試解析域名。這可能是一個稍後載入的檔案或使用者嘗試訪問的連結目標。
為什麼要使用 dns-prefetch？
當瀏覽器向（第三方）伺服器請求資源時，在瀏覽器能夠發出請求之前，該跨域的域名必須解析為 IP 地址。這個過程稱為 DNS 解析。雖然 DNS 快取可以幫助減少這種延遲，但 DNS 解析可能會顯著增加請求的延遲。對於需要開啟許多第三方連線的網站，這種延遲會嚴重影響載入效能。
dns-prefetch 幫助開發者緩解 DNS 解析延遲。透過將 HTML <link> 元素的 rel 屬性設定為 dns-prefetch，可以實現此功能。跨域域名隨後在 href 屬性中指定。
語法
<link rel="dns-prefetch" href="https://fonts.googleapis.com/" />
示例
<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 Link 欄位，將 dns-prefetch（及其他資源提示）指定為HTTP 標頭。
Link: <https://fonts.googleapis.com/>; rel=dns-prefetch
第三，雖然 dns-prefetch 只執行 DNS 查詢，但 preconnect 會建立到伺服器的連線。此過程包括 DNS 解析、建立 TCP 連線以及執行 TLS 握手（如果網站透過 HTTPS 提供服務）。使用 preconnect 有機會進一步減少跨域請求的可感知延遲。您可以透過使用 HTTP Link 欄位將其作為HTTP 標頭使用。
Link: <https://fonts.googleapis.com/>; rel=preconnect
或透過 HTML <link> 元素使用。
<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 查詢。