為什么要使用 dns-prefetch

dns-prefetch

DNS-prefetch (DNS 預(yù)獲取) 是嘗試在請求資源之前解析域名。這可能是后面要加載的文件，也可能是用戶嘗試打開的鏈接目標(biāo)。

為什么要使用 dns-prefetch?

當(dāng)瀏覽器從（第三方）服務(wù)器請求資源時(shí)，必須先將該跨域域名解析為 IP 地址，然后瀏覽器才能發(fā)出請求。此過程稱為 DNS 解析。DNS 緩存可以幫助減少此延遲，而 DNS 解析可以導(dǎo)致請求增加明顯的延遲。對(duì)于打開了與許多第三方的連接的網(wǎng)站，此延遲可能會(huì)大大降低加載性能。

dns-prefetch 可幫助開發(fā)人員掩蓋 DNS 解析延遲。HTML ?元素 通過 dns-prefetch 的 rel 屬性值提供此功能。然后在 href 屬性中指要跨域的域名：

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

每當(dāng)站點(diǎn)引用跨域域上的資源時(shí)，都應(yīng)在 元素中放置 dns-prefetch提示，但是要記住一些注意事項(xiàng)。

請記住以下三點(diǎn)：

首先，dns-prefetch 僅對(duì)跨域域上的 DNS 查找有效，因此請避免使用它來指向您的站點(diǎn)或域。這是因?yàn)?，到瀏覽器看到提示時(shí)，您站點(diǎn)域背后的IP已經(jīng)被解析。

其次，還可以通過使用 HTTP 鏈接字段將 dns-prefetch（以及其他資源提示）指定為 HTTP標(biāo)頭：

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

第三，考慮將 dns-prefetch 與 preconnect(預(yù)連接)提示配對(duì)。盡管 dns-prefetch 僅執(zhí)行 DNS 查找，但 preconnect 會(huì)建立與服務(wù)器的連接。如果站點(diǎn)是通過 HTTPS 服務(wù)的，則此過程包括 DNS 解析，建立 TCP 連接以及執(zhí)行 TLS 握手。將兩者結(jié)合起來可提供進(jìn)一步減少跨域請求的感知延遲的機(jī)會(huì)。您可以安全地將它們一起使用，如下所示：

<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin><link rel="dns-prefetch" href="https://fonts.gstatic.com/">

Note: 如果頁面需要建立與許多第三方域的連接，則將它們預(yù)先連接會(huì)適得其反。preconnect 提示最好僅用于最關(guān)鍵的連接。對(duì)于其他的，只需使用??即可節(jié)省第一步的時(shí)間-DNS 查找。

配對(duì)這些提示的邏輯是因?yàn)閷?duì) dns-prefetch 的支持比對(duì)預(yù)連接的支持要好。不支持預(yù)連接的瀏覽器仍然可以通過回退到 dns-prefetch 來獲得更多好處。由于這是 HTML 功能，因此非常容錯(cuò)。如果不支持的瀏覽器遇到 dns-prefetch 提示（或任何其他資源提示），則您的網(wǎng)站不會(huì)中斷。您只是不會(huì)獲得它提供的好處。

總結(jié)：DNS-prefetch (DNS 預(yù)獲取) 是嘗試在請求資源之前解析域名。先將該跨域域名解析為 IP 地址。preconnect (預(yù)連接) 是會(huì)建立與服務(wù)器的連接。建立 TCP 連接以及執(zhí)行 TLS 握手。將兩者結(jié)合起來可提供進(jìn)一步減少跨域請求的感知延遲的機(jī)會(huì)。