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