preload 与prefetch 的区别
-
preload 是一个声明式 fetch，可以强制浏览器在不阻塞 document 的 onload 事件的情况下请求资源。
preload 顾名思义就是一种预加载的方式，它通过声明向浏览器声明一个需要提交加载的资源，当资源真正被使用的时候立即执行，就无需等待网络的消耗。
preload的好处：
- 将必要的资源提前加载，不阻塞浏览器的渲染，进而提升性能;
- 使用
as来指定要加载的资源类型，可以更精确的优化加载的优先级;
as 属性会告诉浏览器资源要下载什么类型的资源，一些主要的 as 属性如下:
document、font、image、script、style。
- prefetch 告诉浏览器这个资源将来可能需要，但是什么时间加载这个资源是由浏览器来决定的。
preload 是告诉浏览器页面必定需要的资源，浏览器一定会加载这些资源,而 prefetch 是告诉浏览器页面可能需要的资源，浏览器不一定会加载这些资源。所以建议：对于当前页面很有必要的资源使用 preload，对于可能在将来的页面中使用的资源使用 prefetch。
使用方法：
通过 Link 标签进行创建：
<link rel="preload" href="/path/to/style.css" as="style">
prefetch 预判加载与preload 使用方法是一样的
preload/prefetch的缓存行为
当资源被 preload 或者 prefetch 后，会从网络堆栈传输到 HTTP 缓存并进入渲染器的内存缓存。
- 如果资源可以被缓存（例如，存在有效的 cache-control 和 max-age），它将存储在 HTTP 缓存中，可用于当前和未来的会话。
- 如果资源不可缓存，则不会将其存储在 HTTP 缓存中。 相反，它会被缓存到内存缓存中并保持不变直到它被使用。
用 preload 和 prefetch 情况下，如果资源不能被缓存，那么都有可能浪费一部分带宽，在移动端请慎用。
preload/prefetch的副作用
正确使用 preload/prefetch 不会造成二次下载，也就说：当页面上使用到这个资源时候 preload 资源还没下载完，这时候不会造成二次下载，会等待第一次下载并执行脚本。
对于 preload 来说，一旦页面关闭了，它就会立即停止 preload 获取资源，而对于 prefetch 资源，即使页面关闭，prefetch 发起的请求仍会进行不会中断。
