本文將幫助您瞭解DNS預取，一種資源提示，包括它們是什麼、為什麼以及如何使用它們，以及審計和擴充套件它們的最佳實踐。
DNS預取的工作原理
DNS預取是一種資源提示，用於對瀏覽器尚未確定需要進行的域進行DNS查詢。這可以提高效能，因為當瀏覽器確實需要請求資源時，該域的DNS查詢已經發生。
讓我們看一個例子。瀏覽器正在載入頁面，需要請求資源https://stats.example.com/js/pinit.js。為此，它首先必須與域stats.example.com建立HTTP連線。如果瀏覽器已經與域建立了HTTP連線，則可以使用現有連線，否則將建立新連線。
為此，瀏覽器首先對stats.example.com進行DNS查詢。在下面的螢幕截圖中，您可以看到對pinit.js的請求：
該資源後來在瀑布中被發現，並且JavaScript檔案位於另一個域中，與基本HTML頁面的域分開。現有的HTTP連線不存在，因此會進行DNS查詢，如瀑布中資源欄的深綠色部分所示。這大約需要40毫秒，儘管DNS查詢可能需要數十甚至數百毫秒，具體取決於網路連線或需要聯絡的DNS伺服器數量等情況。
我們可以通過在HTML檔案的<head>中新增DNS預取資源提示來優化這一點，如下所示：
<link href="https://stats.example.com/">
在下面的螢幕截圖中，您可以看到瀏覽器被指示主動嘗試對pinit.js所在的stats.example.com進行DNS查詢：
當瀏覽器稍後確定它需要請求pinit.js並連線到stats.example.com時，DNS查詢已經發生。這允許JS檔案更快地下載，將整個瀑布流向左移動。
DNS預取和預連線
DNS Prefetching是網站可以用來指示瀏覽器先做某事的多種資源提示之一。它是一個很小的、相當基本的資源提示，可以比其他選項更廣泛地應用它。
您不需要同時指定DNS預取和預連線資源提示。瀏覽器只需預連線即可完成所需的所有步驟。
DNS預取仍然很重要，可以與預連線提示結合使用。這是因為瀏覽器限制了它們將維持的HTTP連線數。使用超過6-8個預連線資源提示可能會限制瀏覽器進行他們實際需要的連線。DNS預取在不同的級別上執行，這意味著您可以在頁面上對關鍵域進行6到8個預連線，然後對其他不太重要的域有額外的DNS預取提示。
何時使用DNS預取
一般來說，DNS預取應該用於重要的第一方域和第三方域，包括：
- 後來在瀑布中發現的領域
- 具有隨後導致其他請求發生的資源的域
- 具有大量請求或下載大量內容的域
- 域尚未被其他型別的資源提示使用
通常，DNS預取不應用於作為關鍵渲染路徑的一部分的域。這是因為，理想情況下，這些域應該使用預連線資源提示。
DNS預取和第一方域
出於多種原因，對第一方域使用DNS Prefetch往往很容易：
- 您控制域名。
- 您有目的地在該域上託管內容並連結到它的頁面。
- 您應該提前知道頁面將使用哪些第一方域。
- 域名不太可能改變。
這些因素使您可以在一定程度上確信域包含頁面所需的資源並且它們不太可能更改，從而包含DNS預取資源提示。很好的例子包括：
- 具有延遲載入的影象或視訊的其他域
- 稍後在頁面中使用的API端點的第一方域
第三方內容和DNS預取
由於多種原因，對第三方域使用DNS預取資源提示可能非常具有挑戰性：
- 域名可能是動態的或在您不知情的情況下更改
- 不同的第三方域可能用於您網站的不同部分
- 可能不清楚哪些第三方內容是從哪些域載入的，因此新增或刪除第三方標籤可以新增或刪除需要 DNS 預取的域
- 第三方域可能由於其他部門的操作而出現，例如使用標籤管理器的營銷或業務組。
您可能需要做額外的工作來確定第三方內容的來源。理想情況下，您希望對第三方內容使用 DNS 預取，這些內容將被您的頁面長期使用。
以下是與 DNS 預取一起使用的第三方內容的良好示例，因為它們往往具有一致的域或 URL：
- 分析或活動跟蹤器
- A/B測試小工具
- 聊天小工具
- 錯誤和日誌框架
- 社交分享小工具
使用資源提示優化廣告可能特別困難。這是因為，雖然最初的廣告交易平臺可能有一個眾所周知的域名，但為廣告服務的最終域名通常是未知且不一致的。
驗證好處
一旦確定了哪些域應該使用DNS預取，您仍然需要對其進行測試！僅僅因為某些東西應該可以改善您網站的效能或體驗，並不意味著它實際上會：您需要始終進行測試以確保。
- 使用工具來衡量您的表現。
- 實施你的改變。
- 比較“之前”和“之後”的效能指標。
DNS預取的挑戰
DNS預取存在一個大問題——當人們過度使用它時。讓我們也看看其他問題的意識。
過多的DNS預取
當人們第一次聽說DNS預取時，他們會立即想到：
由於DNS預取可以使瀑布中的後續呼叫更快地發生，為什麼我不將DNS預取到頁面可能使用的所有域？
例如，這裡有一個主要的新聞網站，做了33個DNS預取：
請記住，每種型別的資源提示都要求瀏覽器覆蓋它通常會執行的任務。使用過多的DNS預取可能會導致效能問題，因為瀏覽器會限制它們將維持的未完成DNS請求的數量。使用DNS預取來強制進行DNS查詢是在“用盡”一個可用的插槽，否則瀏覽器可以將其用於瀏覽器知道它需要的DNS查詢。進行過多的DNS預取，或對最終未使用的域進行DNS預取，會造成資源爭用，並使瀏覽器執行效率低下。
作為一般規則，網站應儘量不要進行超過10次DNS預取。
未使用的DNS查詢
不要對頁面甚至不使用的域進行DNS預取。這只是一種浪費，並且會影響瀏覽器對實際需要的域進行其他DNS查詢的能力。
不要DNS預取和預連線到同一個域
沒有理由將DNS預取和預連線提示都包含到同一個域以實現“向後相容性”。如今，支援預連線的瀏覽器比支援DNS預取的瀏覽器多，而且支援DNS預取的瀏覽器也支援預連線。
- 如果域很重要，請使用預連線。
- 如果它不太重要，請使用DNS預取。
DNS預取審計的最佳實踐
我們已經看到使用DNS預取資源提示有很多好處，但如果使用不當，也會有許多會損害效能的陷阱。這意味著稽覈頁面如何使用資源提示以確保您遵循所有最佳實踐非常重要。
首先，識別頁面當前正在使用的所有DNS預取資源提示。您將需要在基本HTML頁面中查詢<link>標記，以及連結： 也可以包含資源提示的HTTP標頭。還要記住，包含資源提示的連結標頭可以出現在基於HTML頁面之外的其他響應中！
列出所有DNS預取域後，問自己以下問題：
- 使用上面的指導，我需要確定哪些域應該使用DNS預取。它們是否在頁面已經使用的提示列表中？如果不是，為什麼不呢？
- 我是否使用了超過10個DNS預取？如果是這樣，那就太多了，您應該考慮刪除它們。
- 是否有任何使用DNS預取的域應該使用預連線？
- 我是否對任何相同的域使用預連線和DNS預取？如果是這樣，請刪除該域的DNS預取提示。
- 我是否在<link>標籤中使用了多個資源提示並觸發了Safari問題？如果是這樣，請將其刪除。
- 是否使用了所有DNS預取？大多數瀑布圖將允許您按域或部分URL進行過濾。這使得檢視頁面是否實際使用域變得更加容易。
評論留言