【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 的资源通常会被赋予更高的加载优先级,以确保它们及时可用。
相关推荐
gqkmiss24 分钟前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃29 分钟前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰34 分钟前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter
Viktor_Ye40 分钟前
高效集成易快报与金蝶应付单的方案
java·前端·数据库
hummhumm42 分钟前
第 25 章 - Golang 项目结构
java·开发语言·前端·后端·python·elasticsearch·golang
乐闻x1 小时前
Vue.js 性能优化指南:掌握 keep-alive 的使用技巧
前端·vue.js·性能优化
一条晒干的咸魚1 小时前
【Web前端】创建我的第一个 Web 表单
服务器·前端·javascript·json·对象·表单
Amd7941 小时前
Nuxt.js 应用中的 webpack:compiled 事件钩子
前端·webpack·开发·编译·nuxt.js·事件·钩子
生椰拿铁You2 小时前
09 —— Webpack搭建开发环境
前端·webpack·node.js
狸克先生2 小时前
如何用AI写小说(二):Gradio 超简单的网页前端交互
前端·人工智能·chatgpt·交互