Preload

preload 是声明式的 fetch,可以强制浏览器请求资源,同时不阻塞文档 onload 事件。

<!-- preload stylesheet resource via declarative markup -->
<link rel="preload" href="/styles/other.css" as="style">
<!-- or, preload stylesheet resource via JavaScript -->
<script>
    var res = document.createElement("link");
    res.rel = "preload";
    res.as = "style";
    res.href = "styles/other.css";
    document.head.appendChild(res);
</script>

preload不仅仅能预加载css文件,通过as属性我们还能够加载各种其他资源。

<link rel=preload as=video href=...>
<link rel=preload as=fetch crossorigin href=...>
<link rel=preload as=image href=...>

注意:CORS的资源的预加载,例如具有crossorigin属性的字体或图像,还必须包含一个crossorigin属性,以便正确使用该资源。

Prefetch

prefetch用于识别下一次导航可能需要的资源,以及用户代理应该获取的资源,以便在将来请求资源后,用户代理可以提供更快的响应。和preload类似,同样可以使用as属性获取各种资源。

区别

预获取(Prefetch)和预加载(Preload)均声明资源及其提取属性,但在用户代理程序的资源获取方式和时间上有所不同:prefetch是对后续导航可能使用的资源的可选且低优先级的提取;Preload是对当前导航所必需的资源的强制和高优先级的提取。开发人员应该相应地使用每一个来最小化资源竞争并优化负载性能。

对于当前页面很有必要的资源(如关键的脚本,字体,主要图片)使用 preload,对于可能在将来的页面中使用的资源使用 prefetch

更多细节请阅读W3C官方文档,并留意兼容性。

参考阅读:
W3C-Preload
W3C-Prefetch
Preload, Prefetch And Priorities in Chrome