preload
<link>标签的rel属性的值为preload时，可用于在正常浏览器渲染流程早期提前加载当前页面所需资源，以提升页面性能。
除了rel属性之外还要指定：
- href 属性中的资源路径。
- as 属性中的资源类型。
其他优点
preload除了提前加载资源以外，使用 as 来指定要预加载的内容类型允许浏览器：
- 更准确地优先加载资源。
- 将资源存储在缓存中以备将来使用，在适当的情况下复用资源。
- 对资源应用正确的内容安全策略。
- 为其设置正确的 Accept 请求标头。
as支持的值
audio：音频文件，通常在<audio>中使用。document：用于嵌入在<frame>或<iframe>中的 HTML 文档。embed：用于嵌入在<embed>元素中的资源。fetch：通过fetch或XHR请求访问的资源，例如 ArrayBuffer、WebAssembly 二进制文件或 JSON 文件。font：字体文件。image：图像文件。object：要嵌入在<object>元素中的资源。script：JavaScript 文件。style：CSS 样式表。track：WebVTT 文件。worker：JavaScript web worker 或 shared worker。video：视频文件，通常在<video>中使用。
cors跨域
as值为fetch或者font时有可能会涉及cors跨域需要给link标签设置crossorigin属性
使用
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="big-image.jpg" as="image">
prefetch
<link>标签的rel属性的值为prefetch时，用于提前加载用户下一个页面的资源。提高下一个页面加载性能。
使用
<link rel="prefetch" href="/next-page.html">
区别
- 目的：
preload目标是当前页面的辅助资源，而prefetch是为了将来可能访问的页面做准备。 - 资源类型：
preload可以用于各种资源类型，而prefetch主要用于预加载链接页面的资源。 - 优先级：
preload的资源通常会被赋予更高的加载优先级，以确保它们及时可用。
