摘要：最常见的用法，是用来链接一个外部的样式表，比如标签还能做一些其他的事情，来帮助我们提高页面性能。可以帮助我们提高页面的性能。
写在前面
本文首发于公众号：符合预期的CoyPan
HTML 中元素规定了外部资源与当前文档的关系。最常见的用法，是用来链接一个外部的样式表，比如：
link标签还能做一些其他的事情，来帮助我们提高页面性能。
link标签的使用来看一下link标签除了链接外部样式表之外的一些使用场景。
DNS预解析。
这个大多数人都知道，用法也很简单：
DNS解析，简单来说就是把域名转化为ip地址。我们在网页里使用域名请求其他资源的时候，都会先被转化为ip地址，再发起链接。dns-prefeth使得转化工作提前进行了，缩短了请求资源的耗时。
什么时候使用呢？当我们页面中使用了其他域名的资源时，比如我们的静态资源都放在cdn上，那么我们可以对cdn的域名进行预解析。浏览器的支持情况也不错。
预链接。
使用方法如下：
我们访问一个站点时，简单来说，都会经过以下的步骤：
DNS解析
TCP握手
如果为Https站点，会进行TLS握手
使用preconnect后，浏览器会针对特定的域名，提前初始化链接(执行上述三个步骤)，节省了我们访问第三方资源的耗时。需要注意的是，我们一定要确保preconnect的站点是网页必需的，否则会浪费浏览器、网络资源。
浏览器的支持情况也不错：
预拉取。
使用方法如下：
link标签里的as参数可以有以下取值：
audio: 音频文件 video: 视频文件 Track: 网络视频文本轨道 script: javascript文件 style: css样式文件 font: 字体文件 image: 图片 fetch: XHR、Fetch请求 worker: Web workers embed: 多媒体
预拉取用于标识从当前网站跳转到下一个网站可能需要的资源，以及本网站应该获取的资源。这样可以在将来浏览器请求资源时提供更快的响应。
如果正确使用了预拉取，那么用户在从当前页面前往下一个页面时，可以很快得到响应。但是如果错误地使用了预拉取，那么浏览器就会下载额外不需要的资源，影响页面性能，并且造成网络资源浪费。
这里需要注意的是，使用了prefetch，资源仅仅被提前下载，下载后不会有任何操作，比如解析资源。
预渲染。
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 (). 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链接元素（）的DNS预取、预连接、预取和预渲染关系。这些原语使开发人员和生成或传递资源的服务器能够帮助用户代理决定应该连接到哪个源，以及应该获取哪些资源，并进行预处理以提高页面性能。
更多详细内容，可以在w3c的草案中查看：https://www.w3.org/TR/resourc...
Resource Hints使用方法除了上面介绍的使用link标签的使用方法，还可以直接通过http header的方式使用。例如可以使用下面的header:
