HTML link標簽中preload，prefetch，dns-prefetch，preconnect，prerender

Preload

在我們的瀏覽器加載資源的時候，對於每一個資源都有其自身的默認優先級，倘若我們能修改每一個資源的默認優先級，那我們幾乎可以按照我們的預期加載想要加載的資源。

以谷歌瀏覽器為例，我們打開控制台，並切換到Network選項，點擊刷新頁面，在網絡下面的title一行點擊鼠標右鍵，勾選Priority即可看到加載資源的優先級，我們可以看到樣式的級別比腳本的優先級高，畢竟頁面的一加載進來肯定是樣式首先需要渲染的，不然整個頁面便會四分五裂，用戶體驗不好。

 

preload一旦啟用后便會告知瀏覽器應該盡快的加載某個資源，如果提取的資源3s內未在當前使用，在谷歌開發工具將會觸發警告消息：

 

 

preload語法如下：

<link rel="preload" as="script" href="foo.js">
<link rel="preload" as="style" href="bar.css">

除了以上指定的資源外，還可以加載audio、font、video以及document等，詳情點擊這里了解。

 

跨域資源處理

如需加載跨域的資源列表，則需要正確設置CORS，接着便可以在<link>元素中設置好crossorigin屬性即可：

<link rel="preload" as="font" crossorigin="crossorigin" type="font/woff2" href="foo.woff2">

這里有一個特例便是無論是否跨域，字體的獲取都需要設置crossorigin屬性，這是由於歷史原因造成，有興趣了解可移步這里了解，另外我們還可以使用media響應式的加載圖片，比如：

<link rel="preload" href="[e-mail]" as="image" media="(max-width: 325px)">
  <link rel="preload" href="[e-mail]" as="image" media="(min-width: 400px)">

另一個重要的地方便是如果預加載一個腳本，它並不是執行：

//只拉取下載不執行
var preloadLink = document.createElement("link");
preloadLink.href = "foo.js";
preloadLink.rel = "preload";
preloadLink.as = "script";
document.head.appendChild(preloadLink);

//如果需要執行
var preloadedScript = document.createElement("script");
preloadedScript.src = "foo.js";
document.body.appendChild(preloadedScript);

 

preload兼容性

兼容似乎IE全體陣亡，edge也得17+才能勉強支持，火狐需要手動啟動支持，移動端支持程度還是挺好的。

 

 

Prefetch

簡而言之預提取就是在我們頁面加載完成后，在帶寬可用的情況下，加載用戶下一步期待的頁面資源，比如企業認證，一般都是分好幾個頁面進行認證的，在用戶從第一個頁面進行認證的時候，在頁面加載完成，用戶正在填寫表單數據之時，加載第二個頁面的部分資源，從而使用戶更快打開下一個頁面，從而增加用戶體驗，示例：

<link rel="prefetch" href="demo.html">
<link rel="stylesheet" href="demo.css">

當瀏覽器解析到link標簽時，讀取到rel的值為prefetch，便會將這一個資源添加的隊列中，當瀏覽器空閑時便會預提取資源，但是在demo.html頁面中只是加載HTML，不會加載demo頁面里面的任何其他資源，除非你在demo頁面也明確使用了預提取。

Pretetch兼容性

各大瀏覽器支持都還挺好，IE11+以上，但是Safari貌似到現在還沒支持(但是看WKWebView的源碼，是支持了的)

 

DNS-Prefetch

我們都知道，當我們在瀏覽器的地址欄輸入域名的時候，首先要進行的就是域名解析，因為我們需要加載域名對應的資源，這個過程很快，但是如果在移動端，那可是一個分秒必爭的地方，當一個頁面需要訪問許多外部域名的資源的時候，如果我們能在用戶瀏覽頁面的時候，在瀏覽器空閑的時間，把可能需要訪問的域名都提前做好了域名解析，那是不是大大增加了用戶打開頁面的響應時間，增加用戶體驗，為了解決這個問題，w3c便提出來一個標准，學名叫dns-prefetch。

 

 

使用方法上面中已經支持了，指定rel=”dns-prefetch”，在href中指定頁面需要解析的域名即可，你可能已經注意到了上面的圖中域名使用了雙斜杠，這個雙斜杠表示URL以主機名開頭，和你使用完整URL（比如http://g.alicdn.com/）是等效的。在RFC1808中被指定。

當然並不是所有的頁面需要用到的外部域名都需要做這樣的域名解析，瀏覽器默認會解析超鏈接屬性的href里面的域名，並且你的網站域名還不能是HTTPS，如果是HTTPS，則需要設置請求頭或加入一段強制開啟域名解析的meta標簽。

//HTTP
<link rel="dns-prefetch" href="//a.com"> //多余
<a href="http://a.com">
//HTTPS
<meta http-equiv="x-dns-prefetch-control" content="on">//強制開啟
<a href="http://a.com">

當然，並不建議對HTTPS網站開啟強制解析的方式，因為這樣會帶來一些安全隱患，具體可參考這里。

 

Preconnect

預連接，也就是啟動早期連接（包括DNS查找，TCP握手和可選TLS協商），我們來看一個例子：

<link href='https://fonts.demo.com' rel='preconnect' crossorigin>
<link href='https://demo.com/css?family=黑體' rel='stylesheet'>

一個網絡字體正常加載一般都包括：

• 頁面加載樣式，解析樣式用到的網絡字體
• 網絡字體開始下載，首先開始DNS的查找
• 然后TCP握手
• 如果是HTTPS，還有TLS協商，最后下載字體

當然如果是跨域資源，不要忘了加上crossorigin屬性。

 

Preconnect兼容性

IE15+以上部分兼容，移動端兼容良好。

 

 

Prerender

預渲染，簡單來說就是瀏覽器會下載指定鏈接的資源，並下載以及渲染它，就好比我們打開了一個新的Tab標簽頁，靜默的在后台的下載執行，當然，瀏覽器也不一定會下載渲染它，這取決預很多情況，比如瀏覽器是否空閑以及操作系統是否會放棄下載過慢的資源文件。

除非你真的能十分的肯定用戶接下來一定會觸發你所指定的資源地址，否則對於用戶來說這是一種帶寬的浪費，使用例子如下：

<link rel="prerender" href="https://www.apple.com/">

 

Prerender兼容性

雖然是prerender是HTML5規范的一部分，但是似乎很多廠商都還沒有實現，但是IE11竟然支持。

 

 

結尾

講了這么多，最后整理了一個表格，幫助大家快速查閱參考，每個瀏覽器的實施細節都有所區別，這里以Chrome瀏覽器表格為例：

 

 

原文鏈接： https://www.jianshu.com/p/14b4cbce5e27