DNS預解析prefetch

[1]概述

[2]使用

[3]作用

前面的話

　　本文将詳細介紹DNS預解析prefetch的主要内容

概述

　　DNS(Domain Name System, 域名系統)，是域名和IP位址互相映射的一個分布式資料庫。DNS 查詢就是将域名轉換成 IP 的過程，這個過程短的話 2ms 幾乎無感，長則可能達到幾秒鐘

　　當浏覽器通路一個域名的時候，需要解析一次DNS，獲得對應域名的ip位址。在解析過程中，按照

浏覽器緩存

、

系統緩存

路由器緩存

ISP(營運商)DNS緩存

根域名伺服器

頂級域名伺服器

主域名伺服器

的順序，逐漸讀取緩存，直到拿到IP位址

　　DNS Prefetch，即DNS預解析就是根據浏覽器定義的規則，提前解析之後可能會用到的域名，使解析結果緩存到

系統緩存

中，縮短DNS解析時間，來提高網站的通路速度

使用

　　現代浏覽器在 DNS Prefetch 上做了兩項工作：

　　1、html 源碼下載下傳完成後，會解析頁面的包含連結的标簽，提前查詢對應的域名

　　2、對于通路過的頁面，浏覽器會記錄一份域名清單，當再次打開時，會在 html 下載下傳的同時去解析 DNS

　　DNS預解析分為以下兩種：

【自動解析】

　　浏覽器使用超連結的

href

屬性來查找要預解析的主機名。當遇到

a

标簽，浏覽器會自動将

href

中的域名解析為IP位址，這個解析過程是與使用者浏覽網頁并行處理的。但是為了確定安全性，在

HTTPS

頁面中不會自動解析

【手動解析】

　　在頁面添加如下标記

<link rel="dns-prefetch" href="//img.alicdn.com">      

　　上面的

link

标簽會讓浏覽器預取"img.alicdn.com"的解析

　　希望在

HTTPS

頁面開啟自動解析功能時，添加如下标記

<meta http-equiv="x-dns-prefetch-control" content="on">      

HTTP

頁面關閉自動解析功能時，添加如下标記

<meta http-equiv="x-dns-prefetch-control" content="off">      

　　并非所有頁面都要手動解析，一般在整個站點的入口頁做這個工作就行了，畢竟一個站點下用到的大多數域名都會在首頁展現

作用

　　DNS Prefetch有效縮短了DNS的解析時間

　　如果浏覽器最近将一個域名解析為IP位址，所屬的作業系統将會緩存，下一次DNS解析時間可以低至0-1ms。 如果結果不在系統本地緩存，則需要讀取路由器的緩存，則解析時間的最小值大約為15ms。如果路由器緩存也不存在，則需要讀取ISP（營運商）DNS緩存，一般像

taobao.com

baidu.com

這些常見的域名，讀取ISP（營運商）DNS緩存需要的時間在80-120ms，如果是不常見的域名，平均需要200-300ms。一般的網站在營運商這裡都能查詢的到，是以普遍來說DNS Prefetch可以給一個域名的DNS解析過程帶來15-300ms的提升，尤其是一些大量引用很多其他域名資源的網站，提升效果就更加明顯了

　　浏覽器底層緩存進行了模組化，當Chrome浏覽器啟動的時候，就會自動的快速解析浏覽器最近一次啟動時記錄的前10個域名。是以經常通路的網址就沒有DNS解析的延遲，打開速度更快

最後

　　DNS Prefetch 是對網頁性能優化的一個通用方案，對國際化的站點來說可能效果更加明顯。學習成本和了解成本低，可以放心大膽地用到自己的網頁上

　　以小火柴的前端小站為例

<link rel="dns-prefetch" href="//api.xiaohuochai.cc"/>
<link rel="dns-prefetch" href="//static.xiaohuochai.site"/>
<link rel="dns-prefetch" href="//demo.xiaohuochai.site"/>
<link rel="dns-prefetch" href="//pic.xiaohuochai.site"/>      

好的代碼像粥一樣，都是用時間熬出來的