preload
<link>
标签的rel
属性的值为preload
时,可用于在正常浏览器渲染流程早期提前加载当前页面所需资源,以提升页面性能。
除了rel
属性之外还要指定:
其他优点
preload
除了提前加载资源以外,使用 as
来指定要预加载的内容类型允许浏览器:
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
属性
使用
html
<link rel="preload" href="style.css" as="style">
<link rel="preload" href="big-image.jpg" as="image">
prefetch
<link>
标签的rel
属性的值为prefetch
时,用于提前加载用户下一个页面的资源。提高下一个页面加载性能。
使用
html
<link rel="prefetch" href="/next-page.html">
区别
- 目的 :
preload
目标是当前页面的辅助资源,而prefetch
是为了将来可能访问的页面做准备。 - 资源类型 :
preload
可以用于各种资源类型,而prefetch
主要用于预加载链接页面的资源。 - 优先级 :
preload
的资源通常会被赋予更高的加载优先级,以确保它们及时可用。