fetchpriority 属性在 Chrome 109+ 中有效，仅影响 <img> 的 fetch 队列排序，不改变请求时机或绕过 HTML 解析；需配合 src/srcset 使用，不可与 loading="lazy" 共存，且仅 Chrome/Edge 支持。
fetchpriority 属性到底有没有用？
在 Chrome 109+ 中，fetchpriority 确实能影响图片资源的加载调度优先级，但它只对 <img> 标签生效，且仅作用于浏览器内部的 fetch 队列排序——它不改变网络请求发起时机，也不绕过 HTML 解析顺序。如果你指望它让懒加载图片提前加载，或者让 loading="lazy" 的图“变不懒”，那会失望。
什么时候该设 fetchpriority="high"？
只对首屏关键图片（比如 Hero 图、登录表单上方的 logo）有意义。这类图必须尽早进入 fetch 队列，避免被后续脚本、CSS、非关键图片挤占带宽。但要注意：fetchpriority="high" 不等于“立即下载”，它只是告诉浏览器：“这张图比其他普通 <img> 更值得优先取”。
- 必须配合
src或srcset使用，空src或 JS 动态赋值后设置无效 - 不能和
loading="lazy"同时用于同一张图——Chrome 会忽略fetchpriority，因为 lazy 本身已推迟 fetch - 如果图片在 viewport 外但被 CSS 强制显示（如
position: absolute; top: -9999px），fetchpriority="high"仍可能被降级
fetchpriority="low" 的真实效果很有限
fetchpriority="low" 主要用于明确标记“非关键装饰图”，比如页脚图标、背景拼接图、埋点像素图。但它不会让浏览器跳过或延迟加载——只要 HTML 解析到该标签，fetch 就会排队，只是排在更靠后的位置。实际中，不如直接用 loading="lazy" 或 JS 动态插入来控制时机。
- 对已触发解析的图片，
fetchpriority="low"无法取消或中断正在 fetch 的请求 - Firefox 和 Safari 当前完全忽略该属性，仅 Chrome/Edge 生效
- 如果图片尺寸极小（如 1×1
data:image/gif），设为low几乎无感知差异
别忘了 srcset 和 sizes 才是真正影响加载决策的
fetchpriority 只管“谁先拿”，不管“拿哪个”。真正决定浏览器选哪张图、是否下载高清版本的，是 srcset + sizes 组合。比如：
立即学习“前端免费学习笔记（深入）”；
<img src="hero-small.jpg" srcset="hero-small.jpg 480w, hero-medium.jpg 768w, hero-large.jpg 1200w" sizes="(max-width: 480px) 100vw, (max-width: 768px) 50vw, 30vw" fetchpriority="high">
这段代码里，fetchpriority="high" 确保浏览器尽快开始 fetch，但最终下载哪张，取决于用户设备宽度和 DPR。漏写 sizes 会导致浏览器默认按 100vw 计算，可能下错图——这时候再 high 也没用。
容易被忽略的是：服务端响应头里的 Content-Length 和图片压缩率，远比 fetchpriority 对页面可交互时间的影响大。调优优先级应该是：压缩 → 响应头 → srcset → fetchpriority。
