<link>標籤的幾個用法，幫助提高頁面性能

寫在前面

本文首發於公衆號：符合預期的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可以幫助我們提高頁面的性能。但是這只是理論上的，真正的收益還需要在實際業務中去探索、驗證。

符合預期。

---

---