誕生背景

Dns請(qǐng)求雖然占用了很少的帶寬，但會(huì)有很高的延遲，由其以移動(dòng)網(wǎng)絡(luò)會(huì)更加明顯。通過(guò)dns預(yù)解析技術(shù)可以很好的降低延遲

在firefox上使用dns-prefetch，dns預(yù)解析是與頁(yè)面加載是并行處理的，且不用影響到頁(yè)面加載的性能.

在以圖片為主移動(dòng)網(wǎng)站被訪問(wèn)時(shí)，在使用DNS預(yù)解析的情意中下，頁(yè)面加載時(shí)間可以提升%5個(gè)點(diǎn)
 

一、什么是dns-prefetch？

DNS 實(shí)現(xiàn)域名到IP的映射。通過(guò)域名訪問(wèn)站點(diǎn)，每次請(qǐng)求都要做DNS解析。目前每次DNS解析，通常在200ms以下。針對(duì)DNS解析耗時(shí)問(wèn)題，一些瀏覽器通過(guò)DNS Prefetch 來(lái)提高訪問(wèn)的流暢性。
DNS Prefetch 是一種DNS 預(yù)解析技術(shù)，當(dāng)瀏覽網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)在加載網(wǎng)頁(yè)時(shí)對(duì)網(wǎng)頁(yè)中的域名進(jìn)行解析緩存，這樣在單擊當(dāng)前網(wǎng)頁(yè)中的連接時(shí)就無(wú)需進(jìn)行DNS的解析，減少用戶等待時(shí)間，提高用戶體驗(yàn)。

目前每次DNS解析，通常在200ms以下。針對(duì)DNS解析耗時(shí)問(wèn)題，一些瀏覽器通過(guò)DNS Prefetch 來(lái)提高訪問(wèn)的流暢性。

目前支持 DNS Prefetch 的瀏覽器有 google chrome 和 firefox 3.5

二、如何設(shè)置dns-prefetch？

如果要瀏覽器端對(duì)特定的域名進(jìn)行解析，可以再頁(yè)面中添加link標(biāo)簽實(shí)現(xiàn)。例如：

<link rel="dns-prefetch" href="http://img.jb51.net" />

如果要控制瀏覽器端是否對(duì)域名進(jìn)行預(yù)解析，可以通過(guò)Http header 的x-dns-prefetch-control 屬性進(jìn)行控制。
可惜目前支持上面標(biāo)簽的只有 google chrome 和 firefox3.5

一般來(lái)說(shuō)這種延時(shí)的原因不會(huì)是對(duì)方網(wǎng)站帶寬或者負(fù)載的原因，那么到底是什么導(dǎo)致了這種情況呢。湛藍(lán)試著進(jìn)行推測(cè)，假設(shè)是DNS的問(wèn)題，因?yàn)镈NS解析速度很可能是造成資源延時(shí)的最大原因。于是湛藍(lán)在頁(yè)面header中添加了以下代碼（用以DNS預(yù)解析）：

<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://#" />
<link rel="dns-prefetch" href="http://eiv.baidu.com" />
<link rel="dns-prefetch" href="http://img.jb51.net" />

效果很不錯(cuò)（測(cè)試瀏覽器為IE8），再打開(kāi)其他頁(yè)面時(shí)百度分享按鈕的加載明顯提高！

<link rel="dns-prefetch" href="http://common.jb51.net" />
<!--如果不確定是http還是https連接的話建議如下寫(xiě)法 -->
<link rel="dns-prefetch" href="//common.jb51.net" />

三、DNS Prefetching預(yù)解析實(shí)現(xiàn)原理與注意事項(xiàng)

1.<meta>信息告訴瀏覽器，當(dāng)前頁(yè)面要做DNS預(yù)解析；

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

2.</head>使用<link>標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析；

<link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

3.dns-prefetch需慎用，多頁(yè)面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢次數(shù)；

4.瀏覽器對(duì)網(wǎng)站第一次的域名DNS解析查找流程：

瀏覽器緩存 -> 系統(tǒng)緩存 -> 路由器緩存 -> ISP -> DNS緩存 -> 遞歸搜素

5.如果要禁止隱式的DNS Prefetch，可以使用以下標(biāo)簽

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

四、典型案例

淘寶：

 <link ref="dns-prefetch" href="//tce.taobao.com" />
<link rel="dns-prefetch" href="//log.mmstat.com" />
<link rel="dns-prefetch" href="//tui.taobao.com" />
<link rel="dns-prefetch" href="//ald.taobao.com" />
<link rel="dns-prefetch" href="//gw.alicdn.com" />

支付寶、網(wǎng)易等

注意;

雖然使用 DNS Prefetch 能夠加快頁(yè)面的解析速度，但是也不能濫用，因?yàn)橛虚_(kāi)發(fā)者指出 禁用DNS 預(yù)讀取能節(jié)省每月100億的DNS查詢

五、DNS Prefetch 過(guò)程

當(dāng)瀏覽器請(qǐng)求一個(gè)URL的時(shí)候，通過(guò)firebug我們可以發(fā)現(xiàn)大概有以下幾個(gè)過(guò)程：阻擋、域名解析、建立連接、發(fā)送請(qǐng)求、等待響應(yīng)、接收數(shù)據(jù)。后面四個(gè)跟用戶的網(wǎng)絡(luò)情況和你的服務(wù)器處理速度有關(guān)，本文重點(diǎn)說(shuō)說(shuō)前兩個(gè)。

1、阻擋：解決方案——提高瀏覽器并發(fā)連接數(shù)

　　阻擋：不同的瀏覽器對(duì)單個(gè)域名的最大并發(fā)連接數(shù)有一定的限制，HTTP/1.0和HTTP/1.1也不相同。比如HTTP/1.1協(xié)議下，IE6的并發(fā)連接數(shù)限制是2個(gè)；而在HTTP/1.0下，IE6的并發(fā)連接數(shù)可以達(dá)到4個(gè)。在其它瀏覽器也有類似的限制，一般是4~8個(gè)。這個(gè)時(shí)候，如果瀏覽器同時(shí)對(duì)某一域名發(fā)起多個(gè)請(qǐng)求，超過(guò)了限制就會(huì)出現(xiàn)等待，也就是阻擋。

　　那么為了解決阻擋這一問(wèn)題，我們可以對(duì)某些URL的域名分散處理，比如我們的圖片域名，一般用類似img.guoweiwei.com的域名，當(dāng)一個(gè)頁(yè)面包含20多張圖片的時(shí)候，那至少有10幾個(gè)請(qǐng)求會(huì)被阻擋，而如果我們分散到img0.guoweiwei.com/img1.guoweiwei.com/img2.guoweiwei.com/…等不同域名的時(shí)候，至少這20個(gè)圖片請(qǐng)求會(huì)并發(fā)進(jìn)行，網(wǎng)站打開(kāi)速度會(huì)明顯提升很多。類似的，可以對(duì)一些css/js的域名同樣處理。

2、域名解析：解決方案——DNS預(yù)解析

　　域名解析：從域名查詢IP的過(guò)程，這個(gè)過(guò)程一般都很快的，但也會(huì)引起延遲。一般瀏覽器會(huì)適當(dāng)?shù)膶?duì)解析結(jié)果緩存，并對(duì)頁(yè)面中出現(xiàn)的新域名進(jìn)行預(yù)解析，但并不是所有的瀏覽器都會(huì)這么做，為了幫助其它瀏覽器對(duì)某些域名進(jìn)行預(yù)解析，你可以在頁(yè)面的html標(biāo)簽中添加dns-prefetch告訴瀏覽器對(duì)指定域名預(yù)解析，如下：

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

　　如果細(xì)心一點(diǎn)，你會(huì)在淘寶的網(wǎng)站發(fā)現(xiàn)這兩個(gè)現(xiàn)象，淘寶有很多類似img0.tbcdn.cn這樣的域名。

　　再另外提一點(diǎn)優(yōu)化，

3、cookie隔離

　　那就是為什么用img0.tbcdn.cn這個(gè)域名，而不是img0.taobao.com呢？這個(gè)得從cookie說(shuō)起，淘寶的cookie已經(jīng)非常大了，據(jù)說(shuō)曾接近1K，如果用后面的域名，那每次請(qǐng)求圖片都會(huì)帶上長(zhǎng)長(zhǎng)的cookie，后果可想而知，不僅使得網(wǎng)絡(luò)請(qǐng)求變慢，而且還浪費(fèi)了帶寬，而淘寶圖片服務(wù)器并不需要這些cookie。這就是所說(shuō)的cookie污染，為了解決這一問(wèn)題，單獨(dú)的域名是很有必要的。

下面重點(diǎn)介紹下：

4、DNS預(yù)解析解決方案

　　DNS預(yù)解析是瀏覽器試圖在用戶訪問(wèn)鏈接之前解析域名，這是計(jì)算機(jī)的正常DNS解析機(jī)制。

　　域名解析后，如果用戶確實(shí)訪問(wèn)該域名，那么DNS解析時(shí)間將不會(huì)有延遲。

　　最明顯的例子，DNS預(yù)解析在某個(gè)頁(yè)面中包含非常多的域名非常有效，如搜索結(jié)果頁(yè)。遇到網(wǎng)頁(yè)中的超鏈接，DNS prefetching從中提取域名并將其解析為IP地址，這些工作在用戶瀏覽網(wǎng)頁(yè)時(shí)，使用最少的CPU和網(wǎng)絡(luò)在后臺(tái)進(jìn)行解析。當(dāng)用戶點(diǎn)擊這些已經(jīng)預(yù)解析的域名，可以平均減少200毫秒耗時(shí)（假設(shè)用戶最近還未訪問(wèn)過(guò)該域名），更重要的是用戶不會(huì)遇到DNS解析最壞的情況（往往超過(guò)1秒）。

　　DNS Prefetch，即DNS預(yù)獲取，是前端優(yōu)化的一部分。一般來(lái)說(shuō)，在前端優(yōu)化中與 DNS 有關(guān)的有兩點(diǎn)：

　　一個(gè)是減少DNS的請(qǐng)求次數(shù)，

　　另一個(gè)就是進(jìn)行DNS預(yù)獲取 。

　　DNS 作為互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，其解析的速度似乎很容易被網(wǎng)站優(yōu)化人員忽視?，F(xiàn)在大多數(shù)新瀏覽器已經(jīng)針對(duì)DNS解析進(jìn)行了優(yōu)化，典型的一次DNS解析需要耗費(fèi) 20-120 毫秒，減少DNS解析時(shí)間和次數(shù)是個(gè)很好的優(yōu)化方式。

　　DNS Prefetching 是讓具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺(tái)解析，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個(gè)方式能 減少用戶的等待時(shí)間，提升用戶體驗(yàn) 。

　　瀏覽器對(duì)網(wǎng)站第一次的域名DNS解析查找流程依次為：瀏覽器緩存——系統(tǒng)緩存——路由器緩存——ISP DNS緩存——遞歸搜索

默認(rèn)情況下瀏覽器會(huì)對(duì)頁(yè)面中和當(dāng)前域名（正在瀏覽網(wǎng)頁(yè)的域名）不在同一個(gè)域的域名進(jìn)行預(yù)獲取，并且緩存結(jié)果，這就是隱式的 DNS Prefetch。如果想對(duì)頁(yè)面中沒(méi)有出現(xiàn)的域進(jìn)行預(yù)獲取，那么就要使用顯示的 DNS Prefetch 了。

　　目前大多數(shù)瀏覽器已經(jīng)支持此屬性，支持版本如下：

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

　　其中 Chrome 和 Firefox 3.5+ 內(nèi)置了 DNS Prefetching 技術(shù)并對(duì)DNS預(yù)解析做了相應(yīng)優(yōu)化設(shè)置。所以，即使不設(shè)置此屬性，Chrome 和 Firefox 3.5+ 也能自動(dòng)在后臺(tái)進(jìn)行預(yù)解析 。

　　目前很多大型站點(diǎn)也應(yīng)用了這一優(yōu)化，例如：

　　淘寶、支付寶、網(wǎng)易 

 DNS Prefetch 應(yīng)該盡量的放在網(wǎng)頁(yè)的前面，推薦放在 <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">

　　預(yù)解析的實(shí)現(xiàn)：

　　1、用meta信息來(lái)告知瀏覽器, 當(dāng)前頁(yè)面要做DNS預(yù)解析:<meta http-equiv="x-dns-prefetch-control" content="on" />

　　2、在頁(yè)面header中使用link標(biāo)簽來(lái)強(qiáng)制對(duì)DNS預(yù)解析: <link rel="dns-prefetch" href="http://bdimg.share.baidu.com" />

　　注：dns-prefetch需慎用，多頁(yè)面重復(fù)DNS預(yù)解析會(huì)增加重復(fù)DNS查詢次數(shù)。

　　需要注意的是，雖然使用 DNS Prefetch 能夠加快頁(yè)面的解析速度，但是也不能濫用，因?yàn)橛虚_(kāi)發(fā)者指出 禁用DNS 預(yù)讀取能節(jié)省每月100億的DNS查詢 。

　　如果需要禁止隱式的 DNS Prefetch，可以使用以下的標(biāo)簽：

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

PS：DNS預(yù)解析主要是用于網(wǎng)站前端頁(yè)面優(yōu)化，在SEO中的作用湛藍(lán)還未作驗(yàn)證，但作為增強(qiáng)用戶體驗(yàn)的一部分rel="dns-prefetch"或許值得大家慢慢發(fā)現(xiàn)。