資訊專欄INFORMATION COLUMN
摘要：深入首先借助萬能的谷歌，找到的文檔，學(xué)習(xí)這種事情最好就是找到官方的東西才能原汁原味，以下是個(gè)人對文檔的一些理解。而不僅會(huì)加載資源，還會(huì)解執(zhí)行頁面，進(jìn)行預(yù)渲染，但是這都是根據(jù)瀏覽器自身進(jìn)行判斷。
開始
今天突然心血來潮想起前端性能優(yōu)化的問題，這基本是老生常談的事情了，面試隨便都能說上幾個(gè)，但是還是有點(diǎn)疑問：就是Head標(biāo)簽了，記憶中Head可是藏龍臥虎，各種技能都有，當(dāng)然這些不可能都一一記住，太傷腦細(xì)胞了，于是打開神奇的Github，來到這個(gè) HEAD項(xiàng)目,翻一翻就會(huì)看到今天的主角dns-prefetch，preconnect，prefetch和prerender兄弟了，究竟他們有何區(qū)別，是怎樣的一家人尼。
深入首先借助萬能的谷歌，找到W3C的文檔，學(xué)習(xí)這種事情最好就是找到官方的東西才能原汁原味，以下是個(gè)人對文檔的一些理解。
dns-prefetch其實(shí)意思也很容易理解，dns-prefetch就是一項(xiàng)使瀏覽器主動(dòng)去執(zhí)行域名解析的功能。
一般的形式就是這樣：
href屬性值就是需要DNS預(yù)解析的host
preconnet瀏覽器要建立一個(gè)連接，一般需要經(jīng)過DNS查找，TCP三次握手和TLS協(xié)商（如果是https的話），這些過程都是需要相當(dāng)?shù)暮臅r(shí)的，所以preconnet，就是一項(xiàng)使瀏覽器能夠預(yù)先建立一個(gè)連接，等真正需要加載資源的時(shí)候就能夠直接請求了。
而一般形式就是
瀏覽器會(huì)進(jìn)行以下步驟：
解釋href的屬性值，如果是合法的URL，然后繼續(xù)判斷URL的協(xié)議是否是http或者h(yuǎn)ttps否則就結(jié)束處理
如果當(dāng)前頁面host不同于href屬性中的host,crossorigin其實(shí)被設(shè)置為anonymous(就是不帶cookie了)，如果希望帶上cookie等信息可以加上crossorign屬性,corssorign就等同于設(shè)置為use-credentials
prefetch能夠讓瀏覽器預(yù)加載一個(gè)資源（HTML，JS，CSS或者圖片等），可以讓用戶跳轉(zhuǎn)到其他頁面時(shí)，響應(yīng)速度更快。
一般形式就是
雖然是預(yù)加載了，但是頁面是不會(huì)解析或者JS是不會(huì)直接執(zhí)行的。
prerender而prerender不僅會(huì)加載資源，還會(huì)解執(zhí)行頁面，進(jìn)行預(yù)渲染，但是這都是根據(jù)瀏覽器自身進(jìn)行判斷。
瀏覽器可能會(huì)
分配少量資源對頁面進(jìn)行預(yù)渲染
掛起部分請求直至頁面可見時(shí)
可能會(huì)放棄預(yù)渲染，如果消耗資源過多
等等情況。。。
一般形式
pr屬性
dns-prefetch，preconnect，prefetch和prerender都支持一個(gè)pr屬性（0.0到1.0范圍的值），就是讓瀏覽器能夠判斷優(yōu)先加載那些資源，畢竟瀏覽器內(nèi)部是有可用的連接池的，資源緊張的情況下只能加載優(yōu)先級更高的資源。
總結(jié)一句話：當(dāng)然就是為了性能和更好用戶體驗(yàn)了。
dns-prefetch和preconnect的存在可以讓瀏覽器在解析文檔的同時(shí)可以預(yù)先進(jìn)行DNS解析或者預(yù)先建立一個(gè)鏈接，接下來加載CDN的其他資源時(shí)就可以更加快速（我猜的，其實(shí)文檔并沒有說瀏覽器應(yīng)該在那個(gè)階段進(jìn)行，只是說盡可能早）。因?yàn)镈NS解析和TCP三次握手都是相當(dāng)消耗時(shí)間，當(dāng)然也有其他手段去在其他方面去優(yōu)化例如持久鏈接和多路復(fù)用，不用每次請求都建立建立一個(gè)新的鏈接，但是建立一個(gè)鏈接所必要的消耗是優(yōu)化不了。所以在解析文檔的同時(shí)做好這些事情，頁面整體加載速度可以有一定程度上的優(yōu)化。
prefetch和prerender可以告訴瀏覽器用戶下個(gè)跳轉(zhuǎn)的頁面的地址，瀏覽器可以預(yù)加載這些頁面資源到緩存或者預(yù)渲染好，用戶就以后體驗(yàn)頁面秒開（是不是很爽），當(dāng)然了不一定是頁面，其他資源例如圖片，js和css等等也是可以預(yù)加載到緩存里面。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/51219.html
摘要：當(dāng)然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認(rèn)會(huì)解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請求頭或加入一段強(qiáng)制開啟域名解析的標(biāo)簽。 廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來深度解析一下常用的幾個(gè)關(guān)鍵點(diǎn)。 異步加載 廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...
摘要：當(dāng)然并不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認(rèn)會(huì)解析超鏈接屬性的里面的域名，并且你的網(wǎng)站域名還不能是，如果是，則需要設(shè)置請求頭或加入一段強(qiáng)制開啟域名解析的標(biāo)簽。 廢話：異步加載和預(yù)加載一直都是前端優(yōu)化必備技能之一，今天我們就來深度解析一下常用的幾個(gè)關(guān)鍵點(diǎn)。 異步加載 廢話不多說，任何長篇大論的教程都抵不過一張清晰明了的高清大圖來得好： showImg(http...
摘要：最常見的用法，是用來鏈接一個(gè)外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能?？梢詭椭覀兲岣唔撁娴男阅?。 寫在前面 本文首發(fā)于公眾號：符合預(yù)期的CoyPan HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個(gè)外部的樣式表，比如： link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。 link標(biāo)簽的使用 來看一下link標(biāo)簽除了鏈接外...
摘要：最常見的用法，是用來鏈接一個(gè)外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能?？梢詭椭覀兲岣唔撁娴男阅?。 寫在前面 本文首發(fā)于公眾號：符合預(yù)期的CoyPan HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見的用法，是用來鏈接一個(gè)外部的樣式表，比如： link標(biāo)簽還能做一些其他的事情，來幫助我們提高頁面性能。 link標(biāo)簽的使用 來看一下link標(biāo)簽除了鏈接外...
閱讀 3665·2021-10-11 10:58
閱讀 2253·2021-10-08 10:05
閱讀 2036·2021-09-27 13:34
閱讀 3579·2019-08-30 15:53
閱讀 2736·2019-08-30 14:02
閱讀 3565·2019-08-29 16:55
閱讀 625·2019-08-29 15:41
閱讀 1074·2019-08-29 15:23
