fetchpriority 是 HTML 中 <img> 和 <link rel="stylesheet">（仅预加载时）的提示性属性，用于声明资源获取优先级，仅对初始 HTML 内联资源生效，支持 high/low/auto 三值，Chrome/Edge ≥109 支持，需谨慎用于首屏关键资源。
fetchpriority 是什么，什么时候该用
fetchpriority 是 HTML 中 <img> 和 <link rel="stylesheet">（仅限预加载场景）支持的原生属性，用于向浏览器提示资源的相对获取优先级。它不是强制调度指令，而是建议——浏览器仍会结合自身启发式策略（如视口位置、渲染阻塞性、资源类型）综合判断。
它只对**初始 HTML 中内联声明的资源**生效，动态插入的 <img> 或 JS 创建的 fetch() 请求完全不识别该属性。常见误用是以为给 <script> 或 <iframe> 加上就能提速，实际无效。
适用场景很窄：首屏关键图片（比如 banner 图）、必须同步阻塞渲染的 CSS（通过 <link rel="preload" as="style"> 预加载时）。非首屏图、懒加载图、JS 模块都不该加。
fetchpriority 可选值和实际效果差异
fetchpriority 仅接受三个字符串值：high、low、auto（默认）。没有 medium 或数字等级。
-
high：仅建议用于真正影响 LCP 的首屏大图。浏览器可能提前发起请求，但若该图在视口外，部分 Chromium 版本仍会降级处理；不要滥用，否则可能挤占其他高优资源带宽。
-
low：适合明确非关键、不影响首屏渲染的图，比如页脚头像、装饰性图标。注意：它不会让请求“变慢”，只是降低排队优先级，实际下载时机仍受网络空闲度影响。
-
auto：默认行为，浏览器按自然顺序和启发式规则调度。多数情况下就该保持这个值。
high：仅建议用于真正影响 LCP 的首屏大图。浏览器可能提前发起请求，但若该图在视口外，部分 Chromium 版本仍会降级处理；不要滥用，否则可能挤占其他高优资源带宽。low：适合明确非关键、不影响首屏渲染的图，比如页脚头像、装饰性图标。注意：它不会让请求“变慢”，只是降低排队优先级，实际下载时机仍受网络空闲度影响。auto：默认行为，浏览器按自然顺序和启发式规则调度。多数情况下就该保持这个值。实操示例：
<img src="hero.jpg" fetchpriority="high" width="1200" height="600" alt="首页主图"> <img src="avatar.png" fetchpriority="low" width="40" height="40" alt="用户头像">
和 loading、decoding、fetch() 的关系别搞混
fetchpriority 和 loading="lazy" 是正交机制：前者管“什么时候开始请求”，后者管“什么时候解码/渲染”。一张图可以同时设 fetchpriority="high" + loading="lazy"，但逻辑矛盾——浏览器通常会忽略 loading="lazy"，因为 high 优先级暗示它应尽早获取并准备渲染。
decoding="async" 影响的是解码阶段，和 fetchpriority 完全不重叠，可共存。
而 JS 中的 fetch() 请求完全不支持 fetchpriority ——这是纯 HTML 属性，无法通过 Headers 或 init 参数传递。想控制 fetch 优先级，只能靠 priority（实验性，仅 Chromium 支持且需配合 signal）或服务端响应头 Priority（IETF 标准草案，目前无主流支持）。
兼容性和调试时容易踩的坑
fetchpriority 目前仅 Chromium 内核（Chrome ≥109、Edge ≥109、Opera ≥95）支持，Firefox 和 Safari 完全忽略该属性，也不会报错。别指望它在 Safari 上起效。
调试时常见错误：
立即学习“前端免费学习笔记（深入）”；
- 用 Network 面板看“Priority”列，发现始终显示
Low或Medium——这正常。Chromium 不直接映射fetchpriority到 Priority 列，而是内部调整调度队列，Priority 列反映的是最终决策结果，不是原始声明值。 - 给所有
<img>都加上fetchpriority="high"，结果 LCP 没提升反而更慢——因为高优队列过载，关键 CSS/JS 被延迟下载。 - 在 Webpack/Vite 构建产物中批量注入
fetchpriority，却没过滤掉懒加载图或 placeholder 图，导致语义混乱。
真正起作用的只有极少数资源，调得越细，越要盯着 Lighthouse 的 “LCP element” 和 Network 的请求时序图验证，而不是凭感觉加属性。
