fetchpriority是html中用于向浏览器提示资源加载优先级的属性，仅对和在chromium系浏览器（chrome/edge/opera）中生效，需src非空、搭配loading="eager"、无preload、非缓存且前台标签页才可能被采纳；firefox和safari完全不支持。
fetchpriority 是什么，什么时候该用
它不是所有浏览器都支持的属性，目前只有 Chromium 系统（Chrome、Edge、新版 Opera）在 2023 年起逐步启用，Firefox 和 Safari 完全不识别。所以别指望靠它“强制提升加载优先级”来解决首屏卡顿——它只是个提示，浏览器有权忽略。
真正起效的场景很窄：fetchpriority 只对 <img> 标签的初始资源发现阶段（HTML parser 阶段）起作用，且仅影响 fetch queue 中的相对顺序，不影响解码、渲染或网络带宽分配。
- 适合标记首屏关键图，比如
<img src="hero.jpg" fetchpriority="high"> - 对懒加载图（
loading="lazy"）加fetchpriority没意义，parser 不会提前发现它们 - 如果图已通过 CSS
background-image引入，fetchpriority完全无效
fetchpriority="high" 和 "low" 的实际效果差异
实测中，fetchpriority="high" 会让 Chrome 在 HTML 解析时把这张图的 fetch 请求插到当前 fetch queue 前部；fetchpriority="low" 则尽量延后——但前提是它没被其他机制（如 preload 或 resource hint）覆盖。
注意：没有 fetchpriority="auto" 这种写法，不写该属性就等同于默认行为（即按文档顺序+资源类型启发式排序）。
-
fetchpriority="high"不会绕过 DNS lookup 或 TCP handshake，也不提升 HTTP/2 stream priority - 多个
fetchpriority="high"图片之间，仍按 HTML 出现顺序排队 - 若同时用了
<link rel="preload" as="image">，它的优先级高于fetchpriority
和 loading="lazy"、decoding="async" 混用要注意什么
fetchpriority 和 loading="lazy" 逻辑冲突：前者让浏览器“早点 fetch”，后者让浏览器“晚点 fetch”。Chrome 当前策略是优先尊重 loading="lazy"，此时 fetchpriority 被静默忽略。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
decoding="async" 影响的是解码时机，和 fetchpriority 完全正交，可以共存，但别误以为加了就能“更快显示”——图片仍得等 fetch + decode + paint 全流程。
- 首屏图不要加
loading="lazy"，否则fetchpriority白配 -
decoding="async"对大图有帮助，但对小图可能增加 layout shift 风险 - 服务端开启
Accept: image/avif适配时，fetchpriority不影响格式协商顺序
替代方案比 fetchpriority 更可靠
如果你发现加了 fetchpriority 页面性能没变化，大概率是因为它本就不是瓶颈。更值得检查的是：CDN 缓存命中率、图片尺寸是否过大、是否漏掉 srcset 响应式配置、HTTP/2 是否启用。
真要干预加载顺序，优先级排序更可控的方式是：
- 用
<link rel="preload" as="image" href="...">显式声明关键图 - 把首屏
<img>放在靠前位置（parser blocking 行为本身就有优先级） - 避免在
里用 JS 动态插入图片，那会彻底绕过 parser 的 fetch 调度
复杂点在于：fetchpriority 是个弱提示，而真实加载表现取决于网络条件、缓存状态、资源竞争程度——这些它一个都管不了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
