資訊專欄INFORMATION COLUMN
摘要：最常見(jiàn)的用法，是用來(lái)鏈接一個(gè)外部的樣式表，比如標(biāo)簽還能做一些其他的事情，來(lái)幫助我們提高頁(yè)面性能。可以幫助我們提高頁(yè)面的性能。
寫(xiě)在前面
本文首發(fā)于公眾號(hào)：符合預(yù)期的CoyPan
HTML 中元素規(guī)定了外部資源與當(dāng)前文檔的關(guān)系。最常見(jiàn)的用法，是用來(lái)鏈接一個(gè)外部的樣式表，比如：
link標(biāo)簽還能做一些其他的事情，來(lái)幫助我們提高頁(yè)面性能。
link標(biāo)簽的使用來(lái)看一下link標(biāo)簽除了鏈接外部樣式表之外的一些使用場(chǎng)景。
DNS預(yù)解析。
這個(gè)大多數(shù)人都知道，用法也很簡(jiǎn)單：
DNS解析，簡(jiǎn)單來(lái)說(shuō)就是把域名轉(zhuǎn)化為ip地址。我們?cè)诰W(wǎng)頁(yè)里使用域名請(qǐng)求其他資源的時(shí)候，都會(huì)先被轉(zhuǎn)化為ip地址，再發(fā)起鏈接。dns-prefeth使得轉(zhuǎn)化工作提前進(jìn)行了，縮短了請(qǐng)求資源的耗時(shí)。
什么時(shí)候使用呢？當(dāng)我們頁(yè)面中使用了其他域名的資源時(shí)，比如我們的靜態(tài)資源都放在cdn上，那么我們可以對(duì)cdn的域名進(jìn)行預(yù)解析。瀏覽器的支持情況也不錯(cuò)。
預(yù)鏈接。
使用方法如下：
我們?cè)L問(wèn)一個(gè)站點(diǎn)時(shí)，簡(jiǎn)單來(lái)說(shuō)，都會(huì)經(jīng)過(guò)以下的步驟：
DNS解析
TCP握手
如果為Https站點(diǎn)，會(huì)進(jìn)行TLS握手
使用preconnect后，瀏覽器會(huì)針對(duì)特定的域名，提前初始化鏈接(執(zhí)行上述三個(gè)步驟)，節(jié)省了我們?cè)L問(wèn)第三方資源的耗時(shí)。需要注意的是，我們一定要確保preconnect的站點(diǎn)是網(wǎng)頁(yè)必需的，否則會(huì)浪費(fèi)瀏覽器、網(wǎng)絡(luò)資源。
瀏覽器的支持情況也不錯(cuò)：
預(yù)拉取。
使用方法如下：
link標(biāo)簽里的as參數(shù)可以有以下取值：
audio: 音頻文件 video: 視頻文件 Track: 網(wǎng)絡(luò)視頻文本軌道 script: javascript文件 style: css樣式文件 font: 字體文件 image: 圖片 fetch: XHR、Fetch請(qǐng)求 worker: Web workers embed: 多媒體
預(yù)拉取用于標(biāo)識(shí)從當(dāng)前網(wǎng)站跳轉(zhuǎn)到下一個(gè)網(wǎng)站可能需要的資源，以及本網(wǎng)站應(yīng)該獲取的資源。這樣可以在將來(lái)瀏覽器請(qǐng)求資源時(shí)提供更快的響應(yīng)。
如果正確使用了預(yù)拉取，那么用戶在從當(dāng)前頁(yè)面前往下一個(gè)頁(yè)面時(shí)，可以很快得到響應(yīng)。但是如果錯(cuò)誤地使用了預(yù)拉取，那么瀏覽器就會(huì)下載額外不需要的資源，影響頁(yè)面性能，并且造成網(wǎng)絡(luò)資源浪費(fèi)。
這里需要注意的是，使用了prefetch，資源僅僅被提前下載，下載后不會(huì)有任何操作，比如解析資源。
預(yù)渲染。
prerender比prefetch更進(jìn)一步。不僅僅會(huì)下載對(duì)應(yīng)的資源，還會(huì)對(duì)資源進(jìn)行解析。解析過(guò)程中，如果需要其他的資源，可能會(huì)直接下載這些資源。這樣，用戶在從當(dāng)前頁(yè)面跳轉(zhuǎn)到目標(biāo)頁(yè)面時(shí)，瀏覽器可以更快的響應(yīng)。
瀏覽器的支持情況如下：
Resource Hints上面的四種用法，其實(shí)就是：Resource Hints。
Resource Hints ，翻譯過(guò)來(lái)是【資源提示】。w3c的概括為：
This specification defines the dns-prefetch, preconnect, prefetch, and prerender relationships of the HTML Link Element (). 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.此規(guī)范定義HTML鏈接元素（）的DNS預(yù)取、預(yù)連接、預(yù)取和預(yù)渲染關(guān)系。這些原語(yǔ)使開(kāi)發(fā)人員和生成或傳遞資源的服務(wù)器能夠幫助用戶代理決定應(yīng)該連接到哪個(gè)源，以及應(yīng)該獲取哪些資源，并進(jìn)行預(yù)處理以提高頁(yè)面性能。
更多詳細(xì)內(nèi)容，可以在w3c的草案中查看：https://www.w3.org/TR/resourc...
Resource Hints使用方法除了上面介紹的使用link標(biāo)簽的使用方法，還可以直接通過(guò)http header的方式使用。例如可以使用下面的header:
