DNS預解析dns-prefetch提高頁面載入速度優化前端性能

　　當瀏覽器請求一個URL的時候，經過firebug咱們能夠發現大概有如下幾個過程：阻擋、域名解析、創建鏈接、發送請求、等待響應、接收數據。後面四個跟用戶的網絡狀況和你的服務器處理速度有關，本文重點說說前兩個。

一、阻擋：解決方案——提升瀏覽器併發鏈接數

　　阻擋：不一樣的瀏覽器對單個域名的最大併發鏈接數有必定的限制，HTTP/1.0和HTTP/1.1也不相同。好比HTTP/1.1協議下，IE6的併發鏈接數限制是2個；而在HTTP/1.0下，IE6的併發鏈接數能夠達到4個。在其它瀏覽器也有相似的限制，通常是4~8個。這個時候，若是瀏覽器同時對某一域名發起多個請求，超過了限制就會出現等待，也就是阻擋。

　　那麼爲了解決阻擋這一問題，咱們能夠對某些URL的域名分散處理，好比咱們的圖片域名，通常用相似img.guoweiwei.com的域名，當一個頁面包含20多張圖片的時候，那至少有10幾個請求會被阻擋，而若是咱們分散到img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/…等不一樣域名的時候，至少這20個圖片請求會併發進行，網站打開速度會明顯提高不少。相似的，能夠對一些css/js的域名一樣處理。

二、域名解析：解決方案——DNS預解析

　　域名解析：從域名查詢IP的過程，這個過程通常都很快的，但也會引發延遲。通常瀏覽器會適當的對解析結果緩存，並對頁面中出現的新域名進行預解析，但並非全部的瀏覽器都會這麼作，爲了幫助其它瀏覽器對某些域名進行預解析，你能夠在頁面的html標籤中添加dns-prefetch告訴瀏覽器對指定域名預解析，以下：

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

　　若是細心一點，你會在淘寶的網站發現這兩個現象，淘寶有不少相似img0.tbcdn.cn這樣的域名。

　　再另外提一點優化，

三、cookie隔離

　　那就是爲何用img0.tbcdn.cn這個域名，而不是img0.taobao.com呢？這個得從cookie提及，淘寶的cookie已經很是大了，聽說曾接近1K，若是用後面的域名，那每次請求圖片都會帶上長長的cookie，後果可想而知，不只使得網絡請求變慢，並且還浪費了帶寬，而淘寶圖片服務器並不須要這些cookie。這就是所說的cookie污染，爲了解決這一問題，單獨的域名是頗有必要的。

　　下面重點介紹下：

四、DNS預解析解決方案

　　DNS預解析是瀏覽器試圖在用戶訪問連接以前解析域名，這是計算機的正常DNS解析機制。

　　域名解析後，若是用戶確實訪問該域名，那麼DNS解析時間將不會有延遲。

　　最明顯的例子，DNS預解析在某個頁面中包含很是多的域名很是有效，如搜索結果頁。遇到網頁中的超連接，DNS prefetching從中提取域名並將其解析爲IP地址，這些工做在用戶瀏覽網頁時，使用最少的CPU和網絡在後臺進行解析。當用戶點擊這些已經預解析的域名，能夠平均減小200毫秒耗時（假設用戶最近還未訪問過該域名），更重要的是用戶不會遇到DNS解析最壞的狀況（每每超過1秒）。

　　DNS Prefetch，即DNS預獲取，是前端優化的一部分。通常來講，在前端優化中與 DNS 有關的有兩點：

　　一個是減小DNS的請求次數，

　　另外一個就是進行DNS預獲取 。

　　DNS 做爲互聯網的基礎協議，其解析的速度彷佛很容易被網站優化人員忽視。如今大多數新瀏覽器已經針對DNS解析進行了優化，典型的一次DNS解析須要耗費 20-120 毫秒，減小DNS解析時間和次數是個很好的優化方式。

　　DNS Prefetching 是讓具備此屬性的域名不須要用戶點擊連接就在後臺解析，而域名解析和內容載入是串行的網絡操做，因此這個方式能 減小用戶的等待時間，提高用戶體驗 。

　　瀏覽器對網站第一次的域名DNS解析查找流程依次爲：瀏覽器緩存——系統緩存——路由器緩存——ISP DNS緩存——遞歸搜索

　　默認狀況下瀏覽器會對頁面中和當前域名（正在瀏覽網頁的域名）不在同一個域的域名進行預獲取，而且緩存結果，這就是隱式的 DNS Prefetch。若是想對頁面中沒有出現的域進行預獲取，那麼就要使用顯示的 DNS Prefetch 了。

　　目前大多數瀏覽器已經支持此屬性，支持版本以下：

• – Safari: 5+
• – Chrome: All
• – Firefox: 3.5+
• – Opera: Unknown
• – IE: 9+ (called 「Pre-resolution」 on blogs.msdn.com)

　　其中 Chrome 和 Firefox 3.5+ 內置了 DNS Prefetching 技術並對DNS預解析作了相應優化設置。因此，即便不設置此屬性，Chrome 和 Firefox 3.5+ 也能自動在後臺進行預解析 。

　　目前不少大型站點也應用了這一優化，例如：

　　淘寶：

　　支付寶：

　　網易：

　　DNS Prefetch 應該儘可能的放在網頁的前面，推薦放在 <meta charset="UTF-8"> 後面。具體使用方法以下：

<meta http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" href="//www.zhix.net">
<link rel="dns-prefetch" href="//api.share.zhix.net">
<link rel="dns-prefetch" href="//bdimg.share.zhix.net">

　　預解析的實現：

　　一、用meta信息來告知瀏覽器, 當前頁面要作DNS預解析:<meta http-equiv="x-dns-prefetch-control" content="on" />

　　二、在頁面header中使用link標籤來強制對DNS預解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

　　注：dns-prefetch需慎用，多頁面重複DNS預解析會增長重複DNS查詢次數。

　　須要注意的是，雖然使用 DNS Prefetch 可以加快頁面的解析速度，可是也不能濫用，由於有開發者指出 禁用DNS 預讀取能節省每個月100億的DNS查詢 。

　　若是須要禁止隱式的 DNS Prefetch，可使用如下的標籤：

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