【HTML】link标签prefetch&preload

preload

<link>标签的rel属性的值为preload时,可用于在正常浏览器渲染流程早期提前加载当前页面所需资源,以提升页面性能。

除了rel属性之外还要指定:

  • href 属性中的资源路径。
  • as 属性中的资源类型。

其他优点

preload除了提前加载资源以外,使用 as 来指定要预加载的内容类型允许浏览器:

  • 更准确地优先加载资源。
  • 将资源存储在缓存中以备将来使用,在适当的情况下复用资源。
  • 对资源应用正确的内容安全策略
  • 为其设置正确的 Accept 请求标头。

as支持的值

  • audio:音频文件,通常在 <audio>中使用。
  • document:用于嵌入在 <frame><iframe> 中的 HTML 文档。
  • embed:用于嵌入在 <embed>元素中的资源。
  • fetch:通过 fetchXHR 请求访问的资源,例如 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 的资源通常会被赋予更高的加载优先级,以确保它们及时可用。
相关推荐
西陵37 分钟前
Nx带来极致的前端开发体验——任务编排
前端·javascript·架构
大前端helloworld44 分钟前
从初中级如何迈入中高级-其实技术只是“入门卷”
前端·面试
东风西巷2 小时前
Balabolka:免费高效的文字转语音软件
前端·人工智能·学习·语音识别·软件需求
萌萌哒草头将军2 小时前
10个 ES2025 新特性速览!🚀🚀🚀
前端·javascript·vue.js
半夏陌离3 小时前
SQL 入门指南:排序与分页查询(ORDER BY 多字段排序、LIMIT 分页实战)
java·前端·数据库
whysqwhw3 小时前
鸿蒙工程版本与设备版本不匹配
前端
gnip3 小时前
http缓存
前端·javascript
我不只是切图仔4 小时前
我只是想给网站加个注册验证码,咋就那么难!
前端·后端
该用户已不存在4 小时前
macOS是开发的终极进化版吗?
前端·后端