標籤的幾個用法，幫助提升頁面性能

寫在前面

本文首發於公衆號：符合預期的CoyPan

HTML 中<link>元素規定了外部資源與當前文檔的關係。最多見的用法，是用來連接一個外部的樣式表，好比：

<link href="main.css" rel="stylesheet">

link標籤還能作一些其餘的事情，來幫助咱們提升頁面性能。

link標籤的使用

來看一下link標籤除了連接外部樣式表以外的一些使用場景。

DNS Prefetch

DNS預解析。

這個大多數人都知道，用法也很簡單：

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

DNS解析，簡單來講就是把域名轉化爲ip地址。咱們在網頁裏使用域名請求其餘資源的時候，都會先被轉化爲ip地址，再發起連接。dns-prefeth使得轉化工做提早進行了，縮短了請求資源的耗時。

何時使用呢？當咱們頁面中使用了其餘域名的資源時，好比咱們的靜態資源都放在cdn上，那麼咱們能夠對cdn的域名進行預解析。瀏覽器的支持狀況也不錯。

Preconnect

預連接。

使用方法以下：

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

咱們訪問一個站點時，簡單來講，都會通過如下的步驟：

1. DNS解析
2. TCP握手
3. 若是爲Https站點，會進行TLS握手

使用preconnect後，瀏覽器會針對特定的域名，提早初始化連接(執行上述三個步驟)，節省了咱們訪問第三方資源的耗時。須要注意的是，咱們必定要確保preconnect的站點是網頁必需的，不然會浪費瀏覽器、網絡資源。

瀏覽器的支持狀況也不錯：

Prefetch

預拉取。

使用方法以下：

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

link標籤裏的as參數能夠有如下取值：

audio: 音頻文件
video: 視頻文件  
Track: 網絡視頻文本軌道 
script: javascript文件
style: css樣式文件
font: 字體文件   
image: 圖片   
fetch: XHR、Fetch請求
worker: Web workers
embed: 多媒體<embed>請求 
object:  多媒體<object>請求
document: 網頁

預拉取用於標識從當前網站跳轉到下一個網站可能須要的資源，以及本網站應該獲取的資源。這樣能夠在未來瀏覽器請求資源時提供更快的響應。

若是正確使用了預拉取，那麼用戶在從當前頁面前往下一個頁面時，能夠很快獲得響應。可是若是錯誤地使用了預拉取，那麼瀏覽器就會下載額外不須要的資源，影響頁面性能，而且形成網絡資源浪費。

這裏須要注意的是，使用了prefetch，資源僅僅被提早下載，下載後不會有任何操做，好比解析資源。

Prerender

預渲染。

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

prerender比prefetch更進一步。不只僅會下載對應的資源，還會對資源進行解析。解析過程當中，若是須要其餘的資源，可能會直接下載這些資源。這樣，用戶在從當前頁面跳轉到目標頁面時，瀏覽器能夠更快的響應。

瀏覽器的支持狀況以下：

Resource Hints

上面的四種用法，其實就是：Resource Hints。

Resource Hints ，翻譯過來是【資源提示】。w3c的歸納爲：

This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element ( <link>). These primitives enable the developer, and the server generating or delivering the resources, to assist the user agent in the decision process of which origins it should connect to, and which resources it should fetch and preprocess to improve page performance.

此規範定義HTML連接元素（<link>）的DNS預取、預鏈接、預取和預渲染關係。這些原語使開發人員和生成或傳遞資源的服務器可以幫助用戶代理決定應該鏈接到哪一個源，以及應該獲取哪些資源，並進行預處理以提升頁面性能。

更多詳細內容，能夠在w3c的草案中查看：https://www.w3.org/TR/resourc...

Resource Hints使用方法

除了上面介紹的使用link標籤的使用方法，還能夠直接經過http header的方式使用。例如可使用下面的header:

Link: <https://widget.com>; rel=dns-prefetch
Link: <https://example.com>; rel=preconnect
Link: <https://example.com/next-page.html>; rel=prerender;
Link: <https://example.com/logo-hires.jpg>; rel=prefetch; as=image;

還能夠在javascript使用：

var hint = document.createElement("link");
hint.rel = "prefetch";
hint.as = "document";
hint.href = "/article/part3.html";
document.head.appendChild(hint);

Resource Hints總結

上文介紹了DNS Prefetch，Preconnect， Prefetch，Prerender。這四種hint的功能逐漸遞進：

• Dns Prefetch進行DNS預查詢。
• Preconnect進行預連接。在一些重定向技術中，Preconnect可讓瀏覽器和最終目標源更早創建鏈接。
• Prefetch進行預下載。好比說，咱們能夠根據用戶行爲猜想其下一步操做，而後動態預獲取所需資源，而且不用擔憂該資源被解析(執行)而影響頁面當前功能。
• Prerender不只僅提早下載資源，還會提早直接解析(執行)資源。若是咱們對下一個頁面進行Prerender，用戶在打開下一個頁面時，就會感受很流暢了。

須要注意的是，瀏覽器對於Resource Hints的實現並非想象中的那樣簡單直接。Resource Hints只是一些『提示』，瀏覽器能夠採用咱們的提示，可是具體怎麼實現仍是由瀏覽器本身來決定的。好比，若是當前CPU壓力大，網絡阻塞時，你使用了Prefetch，那麼瀏覽器可能僅僅會只對dns進行預解析，並不會下載資源。

寫在後面

本文介紹了link標籤的四種使用方法，最終引出了Resource Hints的概念。Resource Hints能夠幫助咱們提升頁面的性能。可是這只是理論上的，真正的收益還須要在實際業務中去探索、驗證。

符合預期。

---