preload

• 允许用户设置资源加载优先级
• 赋予浏览器决定资源类型的能力，因此它能分辨这个资源在以后是否可以重复利用
• 浏览器可以通过指定 as 属性来决定这个请求是否符合 content security policy
• 浏览器可以基于资源的类型（比如 image/webp）来发送适当的 accept 头

preload 专注于当前页面，以高优先级加载资源。注意 preload 并不会阻塞 window 的 onload 事件。

预加载图像的例子：
<link rel="preload" href="image.png">
预加载字体的例子
记住：如果你的预加载需要 CORS 的跨域请求，那么也要加上 crossorigin 的属性。
<link rel="preload" href="<https://example.com/fonts/font.woff>" as="font" crossorigin>
这里有一个通过 HTML 和 JavaScript 预加载样式表的例子：
<!-- Via markup -->
<link rel="preload" href="/css/mystyles.css" as="style">
<!-- Via JavaScript --> 
<script> 
var res = document.createElement("link"); 
res.rel = "preload"; 
res.as = "style"; 
res.href = "css/mystyles.css"; 
document.head.appendChild(res); 
</script>

和预加载的差异：

浏览器预加载只支持预加载在 html 中声明的资源，preload 指令允许预加载在 CSS 和JavaScript 中定义的资源，并允许决定何时应用每个资源。

prefetch

Prefetch 是一个低优先级的资源提示，允许浏览器在后台（空闲时）获取将来可能用得到的资源，并且将他们存储在浏览器的缓存中。

• link-prefetch

假设用户将会请求它们，所以允许浏览器获取资源并将他们存储在缓存中。不要过早进行 prefetch

<link rel="prefetch" href="/uploads/images/pic.png">

• dns-prefetch

在后台运行 DNS 的解析，建议对 Google fonts，Google Analytics 和 CDN 进行处理。

<!-- Prefetch DNS for external assets -->
 <link rel="dns-prefetch" href="//fonts.googleapis.com">
 <link rel="dns-prefetch" href="//www.google-analytics.com"> 
 <link rel="dns-prefetch" href="//opensource.keycdn.com">
 <link rel="dns-prefetch" href="//cdn.domain.com">

要注意的是 Chrome 已经在敲击地址栏的时候做了类似的事情，比如 DNS preresolve 和 TCP preconnect

• prerender

它们都优化了可能导航到的下一页上的资源的加载，区别是 prerendering 在后台渲染了整个页面，以及整个页面所有的资源。