【HTML】link标签prefetch&preload

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 的资源通常会被赋予更高的加载优先级，以确保它们及时可用。