prelink

现如今网络越来越快，网页应用也变得越来越受人们欢迎，与此同时，人们对应用响应速度的期望值也越来越高。 怎样提升网站的响应速度，怎样让用户更快的看到想要的内容已经变得越发重要了。 对此，除了开发者们绞尽脑汁优化应用外，浏览器产商们也提供了各种各样方式来帮助开发者预加载资源。

下面是几种在 html head 标签中的配置方法，都是为了更快的让浏览器加载资源而存在的。

preload

preload 让浏览器预先加载资源，但是加载完成后不会立即执行，即不会阻塞页面渲染（window.onload）。 字体、重要图片等资源可以使用此属性加载。

<link rel="preload" href="style.css" as="style" />
<link rel="preload" href="main.js" as="script" />

preload 使用简单，资源的路径用 href 设置，资源的类型用 as 属性设置。 对于不支持 preload 属性的浏览器会自动忽略该 link 标签。 对跨域的文件进行 preload 的时候，我们必须加上 crossorigin 属性，否则会导致该资源加载多次（因为浏览器加载优先级的机制导致）。

prefetch

prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源，比如下一屏需要用到的资源（用户不一定会滑动到下一屏）。 等到浏览器空闲的时候去提前加载资源。

<link rel="prefetch" href="/path/to/style3-1.css" >

prefetch 资源加载优先级很低，只有等其它资源加载完了，浏览器空闲的时候才会去加载。 prefetch 和 preload 不要重复使用，如果都存在的时候会导致该资源加载多次。

dns-prefetch

dns-prefetch 是可以让浏览器提前解析指定资源的 DNS。

<link rel="dns-prefetch" href="http://www.epoos.com/static/path/to/style3-2.css" >

对于 http 的网站， a 标签 href 带的域名都自动会预解析，不需要手动在 head 里面加上 a 标签指向的域名的。 对于 https 的网站，可使用 meta 里面 http-equiv 来强制启动功能

<meta http-equiv="x-dns-prefetch-control" content="on">

prerender

prerender 可以让浏览器提前加载并解析指定页面的资源，并不仅仅是指定 url 的内容，还包括 url 内容内部引用的其它资源。

<link rel="prerender" href="https://www.epoos.com" />

preconnect

preconnet 的作用是提前和指定资源建立连接。

<link rel="preconnect" href="https://www.epoos.com" />

在请求一个资源之前，可能会涉及 DNS 解析、TLS 协商、TCP 握手、重定向等，这段时间可能很短（以前访问过），也可能会很长。 使用 preconnet 能使建立连接的过程提前进行。 和 dns-prefetch 类似，只不过 dns-prefetch 仅仅解析 DNS，而 preconnect 会直接与该资源建立连接。

上面几个预加载机制都有一定的浏览器兼容性。 对于兼容性要求比较高的站点，只可以将其作为补充辅助手段，不可让业务与其强依赖。