【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 的资源通常会被赋予更高的加载优先级,以确保它们及时可用。
相关推荐
吕彬-前端19 分钟前
使用vite+react+ts+Ant Design开发后台管理项目(五)
前端·javascript·react.js
学前端的小朱22 分钟前
Redux的简介及其在React中的应用
前端·javascript·react.js·redux·store
guai_guai_guai31 分钟前
uniapp
前端·javascript·vue.js·uni-app
bysking1 小时前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓2 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4112 小时前
无网络安装ionic和运行
前端·npm
理想不理想v2 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云2 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205872 小时前
web端手机录音
前端
齐 飞2 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb