前端優(yōu)化篇: DNS預(yù)解析提升頁面速度

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

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

效果很不錯（測試瀏覽器為IE8）横媚，再打開其他頁面時百度分享按鈕的加載明顯提高纠炮！

什么是 dns-prefetch

下面我們來簡單了解一下 dns-prefetch：

DNS 作為互聯(lián)網(wǎng)的基礎(chǔ)協(xié)議，其解析的速度似乎容易被網(wǎng)站優(yōu)化人員忽視〉坪現(xiàn)在大多數(shù)新瀏覽器已經(jīng)針對 DNS 解析進(jìn)行了優(yōu)化恢口，典型的一次 DNS 解析耗費(fèi) 20-120 毫秒，減少 DNS 解析時間和次數(shù)是個很好的優(yōu)化方式穷躁。DNS Prefetching 是具有此屬性的域名不需要用戶點(diǎn)擊鏈接就在后臺解析耕肩，而域名解析和內(nèi)容載入是串行的網(wǎng)絡(luò)操作，所以這個方式能減少用戶的等待時間问潭，提升用戶體驗(yàn)猿诸。

瀏覽器對網(wǎng)站第一次的域名DNS解析查找流程依次為：

瀏覽器緩存-系統(tǒng)緩存-路由器緩存-ISP DNS緩存-遞歸搜索

使用

Chrome內(nèi)置了DNS Prefetching技術(shù), Firefox 3.5 也引入了這一特性，由于Chrome和Firefox 3.5本身對DNS預(yù)解析做了相應(yīng)優(yōu)化設(shè)置狡忙，所以設(shè)置DNS預(yù)解析的不良影響之一就是可能會降低Google Chrome瀏覽器及火狐Firefox 3.5瀏覽器的用戶體驗(yàn)梳虽。

預(yù)解析的實(shí)現(xiàn)：

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

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

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

PS：DNS 預(yù)解析主要是用于網(wǎng)站前端頁面優(yōu)化窜觉，在SEO中的作用湛藍(lán)還未作驗(yàn)證是复，但作為增強(qiáng)用戶體驗(yàn)的一部分 rel="dns-prefetch" 或許值得大家慢慢發(fā)現(xiàn)。

送福利啦竖螃！

在這里特地講我自己這兩個月整理的相關(guān)面試題分享給大家，免費(fèi)獲取哦~

內(nèi)容：

基礎(chǔ)題（293題）
進(jìn)階題（30題）
高級題（91題）
計算機(jī)基礎(chǔ)題（14題）
高頻考點(diǎn)（37題）
綜合問題（125題）
大廠面試真題（阿里逗余、網(wǎng)易等）
個人面試經(jīng)驗(yàn)思維導(dǎo)圖

獲取方式：

一特咆、搜索QQ群，前端學(xué)習(xí)交流群：954854084

二录粱、點(diǎn)擊加入腻格，與前端大牛一起進(jìn)步！

三啥繁、QQ掃描下方二維碼菜职！