1. 程式人生 > >前端優化:DNS預解析提升頁面速度

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

信息 內容 引入 isp 嚴重 google 提高 .cn nbsp

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

一般來說這種延時的原因不會是對方網站帶寬或者負載的原因,那麽到底是什麽導致了這種情況呢。假設是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緩存-遞歸搜索

技術分享

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://skyhome.cn/div_css/301.html

【還有這個】http://www.cnblogs.com/rongfengliang/p/5601770.html

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