前端優化:DNS預解析提升頁面速度

水中花world發表於2018-06-11
前端優化DNS

在網頁體驗中我們常會遇到這種情況，即在呼叫百度聯盟、谷歌聯盟以及當前網頁所在域名外的域名檔案時會遇到請求延時非常嚴重的情況。那麼有沒有方法去解決這種請求嚴重延時的現象呢

什麼是 DNS Prefetch

DNS 實現域名到IP的對映。通過域名訪問站點，每次請求都要做DNS解析。目前每次DNS解析，通常在200ms以下。針對DNS解析耗時問題，一些瀏覽器通過DNS Prefetch 來提高訪問的流暢性。
DNS Prefetch 是一種DNS 預解析技術，當瀏覽網頁時，瀏覽器會在載入網頁時對網頁中的域名進行解析快取，這樣在單擊當前網頁中的連線時就無需進行DNS的解析，減少使用者等待時間，提高使用者體驗。
目前支援 DNS Prefetch 的瀏覽器有 google chrome 和 firefox 3.5
如果要瀏覽器端對特定的域名進行解析，可以再頁面中新增link標籤實現。例如：

如果要控制瀏覽器端是否對域名進行預解析，可以通過Http header 的x-dns-prefetch-control 屬性進行控制。
可惜目前支援上面標籤的只有 google chrome 和 firefox3.5

一般來說這種延時的原因不會是對方網站頻寬或者負載的原因，那麼到底是什麼導致了這種情況呢。湛藍試著進行推測，假設是DNS的問題，因為DNS解析速度很可能是造成資源延時的最大原因。於是湛藍在頁面header中新增了以下程式碼（用以DNS預解析）：

<meta http-equiv="x-dns-prefetch-control" content="on" />
<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />
<link rel="dns-prefetch" href="http://nsclick.baidu.com" />
<link rel="dns-prefetch" href="http://hm.baidu.com" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
<link rel="dns-prefetch" href="http://img.jb51.net" />

效果很不錯（測試瀏覽器為IE8），再開啟其他頁面時百度分享按鈕的載入明顯提高！

下面我們來簡單瞭解一下dns-prefetch：

DNS 作為網際網路的基礎協議，其解析的速度似乎容易被網站優化人員忽視。現在大多數新瀏覽器已經針對DNS解析進行了優化，典型的一次DNS解析耗費20-120 毫秒，減少DNS解析時間和次數是個很好的優化方式。DNS Prefetching是具有此屬性的域名不需要使用者點選連結就在後臺解析，而域名解析和內容載入是序列的網路操作，所以這個方式能減少使用者的等待時間，提升使用者體驗。
瀏覽器對網站第一次的域名DNS解析查詢流程依次為：

瀏覽器快取-系統快取-路由器快取-ISP DNS快取-遞迴搜尋

這裡寫圖片描述

域名DNS解析查詢流程

Chrome內建了DNS Prefetching技術, Firefox 3.5 也引入了這一特性，由於Chrome和Firefox 3.5本身對DNS預解析做了相應優化設定，所以設定DNS預解析的不良影響之一就是可能會降低Google Chrome瀏覽器及火狐Firefox 3.5瀏覽器的使用者體驗。

預解析的實現：

  1. 用meta資訊來告知瀏覽器, 當前頁面要做DNS預解析:
    <meta http-equiv="x-dns-prefetch-control" content="on" />
  2. 在頁面header中使用link標籤來強制對DNS預解析:
    <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

如果可以確定協議直接帶上，未知則使用//xx.com

慎用：
1、設定dns預解析造成降低chrome,firefox3.5瀏覽器使用者體驗
2、多頁面重複使用預解析會增加重複dns查詢次數；

注：dns-prefetch需慎用，多頁面重複DNS預解析會增加重複DNS查詢次數。
PS：DNS預解析主要是用於網站前端頁面優化，在SEO中的作用湛藍還未作驗證，但作為增強使用者體驗的一部分rel=”dns-prefetch”或許值得大家慢慢發現。

相關文章