写在前面

本文首发于民众号：相符预期的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的域名举行预剖析。浏览器的支撑状况也不错。

我们接见一个站点时，简朴来讲，都邑经由以下的步骤：

1. DNS剖析
2. TCP握手
3. 假如为Https站点，会举行TLS握手

运用preconnect后，浏览器会针对特定的域名，提早初始化链接(实行上述三个步骤)，节省了我们接见第三方资本的耗时。须要注重的是，我们一定要确保preconnect的站点是网页必须的，否则会糟蹋浏览器、收集资本。

浏览器的支撑状况也不错：

link标签里的as参数可以有以下取值：

audio: 音频文件
video: 视频文件  
Track: 收集视频文本轨道 
script: javascript文件
style: css款式文件
font: 字体文件   
image: 图片   
fetch: XHR、Fetch要求
worker: Web workers
embed: 多媒体<embed>要求 
object:  多媒体<object>要求
document: 网页

预拉取用于标识从当前网站跳转到下一个网站可以须要的资本，以及本网站应当猎取的资本。如许可以在未来浏览器要求资本时供应更快的相应。

假如准确运用了预拉取，那末用户在从当前页面前去下一个页面时，可以很快获得相应。然则假如毛病地运用了预拉取，那末浏览器就会下载分外不须要的资本，影响页面机能，而且形成收集资本糟蹋。

这里须要注重的是，运用了prefetch，资本仅仅被提早下载，下载后不会有任何操纵，比方剖析资本。

prerender比prefetch更进一步。不单单议会下载对应的资本，还会对资本举行剖析。剖析过程当中，假如须要其他的资本，可以会直接下载这些资本。如许，用户在从当前页面跳转到目的页面时，浏览器可以更快的相应。

浏览器的支撑状况以下：

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可以协助我们进步页面的机能。然则这只是理论上的，真正的收益还须要在现实营业中去探究、考证。

相符预期。

    原文作者：CoyPan
    原文地址: https://segmentfault.com/a/1190000019377122
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。