欧美一级特黄级AAA片

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

 當瀏覽器請求一個URL的時候,通過firebug我們可以發現大概有以下幾個過程:阻擋、域名解析、建立連接、發送請求、等待響應、接收數據。后面四個跟用戶的網絡情況和你的服務器處理速度有關,本文重點說說前兩個。

DNS Prefetch使用方式

使用方式上面圖片已經有了,就是添加如下代碼。

<link rel="dns-prefetch" href="//www.dihitt.net">

//開始是為了適配  https  和   http  。就是當前請求鏈接是https ,那么這個//前面自動補充https ,反則補充http 。

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" href="//domain.com">

  如果細心一點,你會在淘寶的網站發現這兩個現象,淘寶有很多類似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 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">

  預解析的實現:

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

  2、在頁面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">

轉自:https://www.cnblogs.com/goloving/p/9368965.html 

 

聊城興企網絡

專注于網絡推廣服務,為企業提供快速建站,小程序、網站seo優化一站式服務方案,為企業快速提高網站排名,獲取新客戶。!

| 北京 天津 河北 山西 內蒙古 遼寧 吉林 黑龍江 上海 江蘇 浙江 安徽 福建 江西 山東 河南 湖北 湖南 廣東 廣西 海南 重慶 四川 貴州 云南 西藏 陜西 甘肅 青海 寧夏 新疆 臺灣
18963523858 掃描微信