prefetch和preload

共同点：提前加载前端资源以达到优化浏览器网络资源的目的，从而提高浏览器的渲染性能，它们本质都是预加载，即先加载、后执行，加载与执行解耦，preload 和 prefetch 不会阻塞页面的 onload

prefetch 通常被叫做预提取，preload 被翻译成预加载

区别：preload 用来声明当前页面的关键资源，强制浏览器尽快加载；而 prefetch 用来声明将来可能用到的资源，在浏览器空闲时进行加载。

Prefetch

利用浏览器空闲时间来下载或预取用户在不久的将来可能访问的文档。

网页向浏览器提供一组预取提示，并在浏览器完成当前页面的加载后开始静默地拉取指定的文档并将其存储在缓存中。当用户访问其中一个预取文档时，便可以快速的从浏览器缓存中得到

<head>
  <link rel="prefetch" href="static/img/ticket_bg.a5bb7c33.png" />
</head>

使用场景

适合对异步加载的模块、可能跳转到的其他路由页面进行资源缓存
对于一些将来大概率会访问的资源，比如常见的加载失败 icon 等

Preload

对于一些页面加载完成就立即需要的资源（比如字体，首页样式或图片等），希望在页面加载的生命周期的早期阶段就开始获取，在浏览器的主渲染机制介入前就进行预加载

注意：preload link 必须设置 as 属性来声明资源的类型（font/image/style/script 等)，否则浏览器可能无法正确加载资源。

使用场景

字体文件
首页样式文件
首页图片文件

<head>
  <link
    rel="preload"
    as="font"
    href="<%= require('/assets/fonts/AvenirNextLTPro-Demi.otf') %>"
    crossorigin
  />
  <link
    rel="preload"
    as="font"
    href="<%= require('/assets/fonts/AvenirNextLTPro-Regular.otf') %>"
    crossorigin
  />
</head>