我们知道，浏览器在解析文档的时候如果遇到引入的外部资源，需要下载外部资源，如果有些外部资源比较大，可能会需要一个较长的下载时间，而资源预加载技术就是为了部分解决这样的问题的。
资源预加载顾名思义，就是预测将来可能需要的一些资源，并在当前对这些资源进行预先加载的技术。
很明显，资源预加载对优化当前页面的加载速度并没有什么用处，但是却可以优化用户进行下一次跳转的加载速度。资源预加载主要是通过 link 标签提供的几个不同的 rel 的属性值，进行不同程度的预加载，主要由以下几种不同的策略：dns-prefetch、preconnect、prefetch、preload、prerender。
DNS 预查询：dns-prefetch
提示浏览器应该预先进行 DNS 查询，这意味着当真正需要加载相关资源的时候已经预先完成了 DNS 查询，可以跳过这一步，直接向资源发起请求了。
示例：
<link rel="dns-prefetch" href="//example.com"> |
这个比较适用于在网站的主页，强制对整个网站频繁引用的域名进行预解析，这将提高整体站点性能。比如，淘宝就在自己的页面对所有可能用的域名进行了 dns 预查询：
<link rel="dns-prefetch" href="//g.alicdn.com" /> |
如果想要关闭 dns 预加载功能，可以使用 meta 标签：
<meta http-equiv="x-dns-prefetch-control" content="off"> |
预连接：preconnect
浏览器建立连接，一般要经过 DNS 查找，TCP 三次握手和TLS协商（https），这些过程都是需要相当的耗时的，dns-prefetch 预先进行了 dns 查找的步骤，而 preconnet 则进一步提前进行了握手的过程，当真正需要加载资源时，不需要再建立连接了，可以直接开始请求数据。
示例：
<link rel="preconnect" href="//example.com"> |
prefetch
通知浏览器进行预加载资源常见的资源包括图片、脚本、样式、HTML等，当用户跳转到其他页面时，可以减少资源的加载时间。但是注意，具体加载时间和是否加载是由浏览器决定的。
示例：
<link rel="prefetch" href="//example.com"> |
注意，资源虽然加载了但是并不会被解析，脚本也不会被执行。
此时，link 标签可以接受一个 as 属性，它指定了文件内容的类型，表示资源请求的优先级，。
preload
preload 和 prefetch 类似，通知浏览器预先下载当前页面所需的资源。
示例：
<link rel="preload" href="//example.com"> |
预渲染：prerender
这个属性更进一步的，建议浏览器提前获取指定链接的资源，并且它还在预先在屏幕外渲染内容，以便在需要的时候可以快速呈现出来。
示例：
<link rel="prerender" href="//example.com"> |
需要知道的是，chrome 地址栏实际上就进行了 prerender 的操作。
如果想要知道你的页面是否被预渲染，Page Visibility API 提供了探测你的网站是否正在被 prerender 的方法。
更多预渲染相关的知识只是可以查看 Chrome Prerendering
浏览器兼容
- can i use..DNS-prefetch
- can i use..preconnect
- can i use..preload
- can i use..prefetch
- can i use..prerender