前端優化:DNS預解析提升頁面速度

在網頁體驗中我們常會遇到這種情況,即在調用百度聯盟、谷歌聯盟以及當前網頁所在域名外的域名文件時會遇到請求延時非常嚴重的情況。那麼有沒有方法去解決這種請求嚴重延時的現象呢?

一般來說這種延時的原因不會是對方網站帶寬或者負載的原因,那麼到底是什麼導致了這種情況呢。湛藍試着進行推測,假設是DNS的問題,因爲DNS解析速度很可能是造成資源延時的最大原因。於是湛藍在頁面header中添加了以下代碼(用以DNS預解析):

<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://hm.baidu.com" />

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

效果很不錯(測試瀏覽器爲IE8),再打開其他頁面時百度分享按鈕的加載明顯提高!

下面我們來簡單瞭解一下dns-prefetch:

DNS 作爲互聯網的基礎協議,其解析的速度似乎容易被網站優化人員忽視。現在大多數新瀏覽器已經針對DNS解析進行了優化,典型的一次DNS解析耗費20-120 毫秒,減少DNS解析時間和次數是個很好的優化方式。DNS Prefetching是具有此屬性的域名不需要用戶點擊鏈接就在後臺解析,而域名解析和內容載入是串行的網絡操作,所以這個方式能減少用戶的等待時間,提升用戶體驗。

瀏覽器對網站第一次的域名DNS解析查找流程依次爲:

瀏覽器緩存-系統緩存-路由器緩存-ISP DNS緩存-遞歸搜索

域名DNS解析查找流程

Chrome內置了DNS Prefetching技術, Firefox 3.5 也引入了這一特性,由於Chrome和Firefox 3.5本身對DNS預解析做了相應優化設置,所以設置DNS預解析的不良影響之一就是可能會降低Google Chrome瀏覽器及火狐Firefox 3.5瀏覽器的用戶體驗。

預解析的實現:

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查詢次數。

PS:DNS預解析主要是用於網站前端頁面優化,在SEO中的作用湛藍還未作驗證,但作爲增強用戶體驗的一部分rel="dns-prefetch"或許值得大家慢慢發現。

參考文章:百度泛用戶體驗-瀏覽器的加載與頁面性能優化 http://www.baiduux.com/blog/2011/02/15/browser-loading/

除非註明,均爲湛藍天空原創,轉載請註明本文網址:http://skyhome.cn/div_css/301.html


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章