在網頁體驗中我們常會遇到這種情況，即在調用百度聯盟、谷歌聯盟以及當前網頁所在域名外的域名文件時會遇到請求延時非常嚴重的情況。那么有沒有方法去解決這種請求嚴重延時的現象呢
什么是 DNS Prefetch
DNS 實現域名到IP的映射。通過域名訪問站點，每次請求都要做DNS解析。目前每次DNS解析，通常在200ms以下。針對DNS解析耗時問題，一些瀏覽器通過DNS Prefetch 來提高訪問的流暢性。
DNS Prefetch 是一種DNS 預解析技術，當瀏覽網頁時，瀏覽器會在加載網頁時對網頁中的域名進行解析緩存，這樣在單擊當前網頁中的連接時就無需進行DNS的解析，減少用戶等待時間，提高用戶體驗。
目前支持 DNS Prefetch 的瀏覽器有 google chrome 和 firefox 3.5
如果要瀏覽器端對特定的域名進行解析，可以再頁面中添加link標簽實現。例如：
<link rel="dns-prefetch" />
如果要控制瀏覽器端是否對域名進行預解析，可以通過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" />
<link rel="dns-prefetch" />
<link rel="dns-prefetch" href="http://#" />
<link rel="dns-prefetch" />
<link rel="dns-prefetch" />
效果很不錯（測試瀏覽器為IE8），再打開其他頁面時百度分享按鈕的加載明顯提高！
當瀏覽器請求一個URL的時候，通過firebug我們可以發現大概有以下幾個過程：阻擋、域名解析、建立連接、發送請求、等待響應、接收數據。后面四個跟用戶的網絡情況和你的服務器處理速度有關，本文重點說說前兩個。
1、阻擋：解決方案——提高瀏覽器并發連接數
阻擋：不同的瀏覽器對單個域名的最大并發連接數有一定的限制，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的域名同樣處理。
2、域名解析：解決方案——DNS預解析
域名解析：從域名查詢IP的過程，這個過程一般都很快的，但也會引起延遲。一般瀏覽器會適當的對解析結果緩存，并對頁面中出現的新域名進行預解析，但并不是所有的瀏覽器都會這么做，為了幫助其它瀏覽器對某些域名進行預解析，你可以在頁面的html標簽中添加dns-prefetch告訴瀏覽器對指定域名預解析，如下：
<link rel="dns-prefetch" >
如果細心一點，你會在淘寶的網站發現這兩個現象，淘寶有很多類似img0.tbcdn.cn這樣的域名。
再另外提一點優化，
3、cookie隔離
那就是為什么用img0.tbcdn.cn這個域名，而不是img0.taobao.com呢？這個得從cookie說起，淘寶的cookie已經非常大了，據說曾接近1K，如果用后面的域名，那每次請求圖片都會帶上長長的cookie，后果可想而知，不僅使得網絡請求變慢，而且還浪費了帶寬，而淘寶圖片服務器并不需要這些cookie。這就是所說的cookie污染，為了解決這一問題，單獨的域名是很有必要的。
下面重點介紹下：
4、DNS預解析解決方案
DNS預解析是瀏覽器試圖在用戶訪問鏈接之前解析域名，這是計算機的正常DNS解析機制。域名解析后，如果用戶確實訪問該域名，那么DNS解析時間將不會有延遲。
最明顯的例子，DNS預解析在某個頁面中包含非常多的域名非常有效，如搜索結果頁。遇到網頁中的超鏈接，DNS prefetching從中提取域名并將其解析為IP地址，這些工作在用戶瀏覽網頁時，使用最少的CPU和網絡在后臺進行解析。當用戶點擊這些已經預解析的域名，可以平均減少200毫秒耗時（假設用戶最近還未訪問過該域名），更重要的是用戶不會遇到DNS解析最壞的情況（往往超過1秒）。
DNS Prefetch，即DNS預獲取，是前端優化的一部分。一般來說，在前端優化中與 DNS 有關的有兩點：
一個是減少DNS的請求次數，
另一個就是進行DNS預獲取 。
DNS 作為互聯網的基礎協議，其解析的速度似乎很容易被網站優化人員忽視?，F在大多數新瀏覽器已經針對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 http-equiv="x-dns-prefetch-control" content="on">
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >
<link rel="dns-prefetch" >
預解析的實現：
1、用meta信息來告知瀏覽器, 當前頁面要做DNS預解析:
2、在頁面header中使用link標簽來強制對DNS預解析:
注：dns-prefetch需慎用，多頁面重復DNS預解析會增加重復DNS查詢次數。
需要注意的是，雖然使用 DNS Prefetch 能夠加快頁面的解析速度，但是也不能濫用，因為有開發者指出 禁用DNS 預讀取能節省每月100億的DNS查詢 。
如果需要禁止隱式的 DNS Prefetch，可以使用以下的標簽：
<meta http-equiv="x-dns-prefetch-control" content="off">
PS：DNS預解析主要是用于網站前端頁面優化，在SEO中的作用湛藍還未作驗證，但作為增強用戶體驗的一部分rel="dns-prefetch"或許值得大家慢慢發現。
來源：腳本之家
鏈接：https://www.jb51.net/web/421998.html
申請創業報道，分享創業好點子。點擊此處，共同探討創業新機遇！
