當(dāng)前位置:首頁 >  站長 >  編程技術(shù) >  正文

dns-prefetch是什么 前端優(yōu)化:DNS預(yù)解析提升頁面速度

 2020-11-30 13:33  來源: 腳本之家   我來投稿 撤稿糾錯

  域名預(yù)訂/競價,好“米”不錯過

在網(wǎng)頁體驗中我們常會遇到這種情況,即在調(diào)用百度聯(lián)盟、谷歌聯(lián)盟以及當(dāng)前網(wǎng)頁所在域名外的域名文件時會遇到請求延時非常嚴(yán)重的情況。那么有沒有方法去解決這種請求嚴(yán)重延時的現(xiàn)象呢

什么是 DNS Prefetch

DNS 實現(xiàn)域名到IP的映射。通過域名訪問站點,每次請求都要做DNS解析。目前每次DNS解析,通常在200ms以下。針對DNS解析耗時問題,一些瀏覽器通過DNS Prefetch 來提高訪問的流暢性。

DNS Prefetch 是一種DNS 預(yù)解析技術(shù),當(dāng)瀏覽網(wǎng)頁時,瀏覽器會在加載網(wǎng)頁時對網(wǎng)頁中的域名進(jìn)行解析緩存,這樣在單擊當(dāng)前網(wǎng)頁中的連接時就無需進(jìn)行DNS的解析,減少用戶等待時間,提高用戶體驗。

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

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

<link rel="dns-prefetch" />  

如果要控制瀏覽器端是否對域名進(jìn)行預(yù)解析,可以通過Http header 的x-dns-prefetch-control 屬性進(jìn)行控制。

可惜目前支持上面標(biāo)簽的只有 google chrome 和 firefox3.5

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

<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),再打開其他頁面時百度分享按鈕的加載明顯提高!

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

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

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

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

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

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

 <link rel="dns-prefetch" >

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

再另外提一點優(yōu)化,

3、cookie隔離

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

下面重點介紹下:

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

DNS預(yù)解析是瀏覽器試圖在用戶訪問鏈接之前解析域名,這是計算機的正常DNS解析機制。域名解析后,如果用戶確實訪問該域名,那么DNS解析時間將不會有延遲。

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

DNS Prefetch,即DNS預(yù)獲取,是前端優(yōu)化的一部分。一般來說,在前端優(yōu)化中與 DNS 有關(guān)的有兩點:

一個是減少DNS的請求次數(shù),

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

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

DNS Prefetching 是讓具有此屬性的域名不需要用戶點擊鏈接就在后臺解析,而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作,所以這個方式能 減少用戶的等待時間,提升用戶體驗 。瀏覽器對網(wǎng)站第一次的域名DNS解析查找流程依次為:瀏覽器緩存——系統(tǒng)緩存——路由器緩存——ISP DNS緩存——遞歸搜索

默認(rèn)情況下瀏覽器會對頁面中和當(dāng)前域名(正在瀏覽網(wǎng)頁的域名)不在同一個域的域名進(jìn)行預(yù)獲取,并且緩存結(jié)果,這就是隱式的 DNS Prefetch。如果想對頁面中沒有出現(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ù)并對DNS預(yù)解析做了相應(yīng)優(yōu)化設(shè)置。所以,即使不設(shè)置此屬性,Chrome 和 Firefox 3.5+ 也能自動在后臺進(jìn)行預(yù)解析 。

目前很多大型站點也應(yīng)用了這一優(yōu)化,例如:

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

DNS Prefetch 應(yīng)該盡量的放在網(wǎng)頁的前面,推薦放在 后面。具體使用方法如下:

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

預(yù)解析的實現(xiàn):

1、用meta信息來告知瀏覽器, 當(dāng)前頁面要做DNS預(yù)解析:

2、在頁面header中使用link標(biāo)簽來強制對DNS預(yù)解析:

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

需要注意的是,雖然使用 DNS Prefetch 能夠加快頁面的解析速度,但是也不能濫用,因為有開發(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ōu)化,在SEO中的作用湛藍(lán)還未作驗證,但作為增強用戶體驗的一部分rel="dns-prefetch"或許值得大家慢慢發(fā)現(xiàn)。

來源:腳本之家

鏈接:https://www.jb51.net/web/421998.html

申請創(chuàng)業(yè)報道,分享創(chuàng)業(yè)好點子。點擊此處,共同探討創(chuàng)業(yè)新機遇!

相關(guān)標(biāo)簽
css是什么
域名沙龍
頁面
dns解析

相關(guān)文章

熱門排行

信息推薦