Head標籤裏面的dns-prefetch，preconnect，prefetch和prerender

開始

今天忽然心血來潮想起前端性能優化的問題，這基本是老生常談的事情了，面試隨便都能說上幾個，可是仍是有點疑問：就是Head標籤了，記憶中Head但是藏龍臥虎，各類技能都有，固然這些不可能都一一記住，太傷腦細胞了，因而打開神奇的Github，來到這個 HEAD項目,翻一翻就會看到今天的主角dns-prefetch，preconnect，prefetch和prerender兄弟了，究竟他們有何區別，是怎樣的一家人尼。

深刻

首先借助萬能的谷歌，找到W3C的文檔，學習這種事情最好就是找到官方的東西才能原汁原味，如下是我的對文檔的一些理解。

dns-prefetch

其實意思也很容易理解，dns-prefetch就是一項使瀏覽器主動去執行域名解析的功能。
通常的形式就是這樣：

<link rel="dns-prefetch" href="//example.com">

href屬性值就是須要DNS預解析的host

preconnet

瀏覽器要創建一個鏈接，通常須要通過DNS查找，TCP三次握手和TLS協商（若是是https的話），這些過程都是須要至關的耗時的，因此preconnet，就是一項使瀏覽器可以預先創建一個鏈接，等真正須要加載資源的時候就可以直接請求了。
而通常形式就是

<link rel="preconnect" href="//example.com">
<link rel="preconnect" href="//cdn.example.com" crossorigin>

瀏覽器會進行如下步驟：

• 解釋href的屬性值，若是是合法的URL，而後繼續判斷URL的協議是不是http或者https不然就結束處理
• 若是當前頁面host不一樣於href屬性中的host,crossorigin其實被設置爲anonymous(就是不帶cookie了)，若是但願帶上cookie等信息能夠加上crossorign屬性,corssorign就等同於設置爲use-credentials

prefetch

可以讓瀏覽器預加載一個資源（HTML，JS，CSS或者圖片等），可讓用戶跳轉到其餘頁面時，響應速度更快。
通常形式就是

<link rel="prefetch" href="//example.com/next-page.html" as="html" crossorigin="use-credentials">
<link rel="prefetch" href="/library.js" as="script">

雖然是預加載了，可是頁面是不會解析或者JS是不會直接執行的。

prerender

而prerender不只會加載資源，還會解執行頁面，進行預渲染，可是這都是根據瀏覽器自身進行判斷。
瀏覽器可能會

• 分配少許資源對頁面進行預渲染
• 掛起部分請求直至頁面可見時
• 可能會放棄預渲染，若是消耗資源過多
  等等狀況。。。

通常形式

<link rel="prerender" href="//example.com/next-page.html">

pr屬性

dns-prefetch，preconnect，prefetch和prerender都支持一個pr屬性（0.0到1.0範圍的值），就是讓瀏覽器可以判斷優先加載那些資源，畢竟瀏覽器內部是有可用的鏈接池的，資源緊張的狀況下只能加載優先級更高的資源。

總結

一句話：固然就是爲了性能和更好用戶體驗了。dns-prefetch和preconnect的存在可讓瀏覽器在解析文檔的同時能夠預先進行DNS解析或者預先創建一個連接，接下來加載CDN的其餘資源時就能夠更加快速（我猜的，其實文檔並無說瀏覽器應該在那個階段進行，只是說盡量早）。由於DNS解析和TCP三次握手都是至關消耗時間，固然也有其餘手段去在其餘方面去優化例如持久連接和多路複用，不用每次請求都創建創建一個新的連接，可是創建一個連接所必要的消耗是優化不了。因此在解析文檔的同時作好這些事情，頁面總體加載速度能夠有必定程度上的優化。prefetch和prerender能夠告訴瀏覽器用戶下個跳轉的頁面的地址，瀏覽器能夠預加載這些頁面資源到緩存或者預渲染好，用戶就之後體驗頁面秒開（是否是很爽），固然了不必定是頁面，其餘資源例如圖片，js和css等等也是能夠預加載到緩存裏面。