什么是 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 Prefetch 的瀏覽器有 google chrome 和 firefox 3.5
如果要瀏覽器端對(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í)百度分享按鈕的加載明顯提高！

下面我們來(lái)簡(jiǎn)單了解一下dns-prefetch：

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緩存-遞歸搜索

域名DNS解析查找流程

Chrome內(nèi)置了DNS Prefetching技術(shù), Firefox 3.5 也引入了這一特性，由于Chrome和Firefox 3.5本身對(duì)DNS預(yù)解析做了相應(yīng)優(yōu)化設(shè)置，所以設(shè)置DNS預(yù)解析的不良影響之一就是可能會(huì)降低Google Chrome瀏覽器及火狐Firefox 3.5瀏覽器的用戶體驗(yàn)。

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