fetchpriority="high"仅在chromium 119+中对静态html内的生效，需满足src静态声明、无loading="lazy"、未缓存等条件，典型场景为首屏lcp大图；fetchpriority="low"与lazy组合冗余，验证须看chrome devtools network面板priority列且禁用缓存。
HTML里没有“图片显示优先级”这个东西——z-index管的是层叠顺序，fetchpriority管的是加载调度，而“显示”本身由渲染流水线决定，不接受直接干预。真正能动手调整的，只有加载时机和网络优先级。
fetchpriority="high" 什么时候真起作用
它不是插队指令，而是对 Chromium 系统的一个提示：这张图比默认更关键。但提示要被采纳，得满足几个硬条件：
-
src必须在 HTML 中静态写死，不能靠 JS 后续赋值 - 浏览器版本 ≥ Chromium 119（当前主流 Chrome/Edge 已满足）
- 不能同时设
loading="lazy"，否则 Chrome 直接忽略fetchpriority - 资源未被缓存（缓存命中时 Network 面板 Priority 恒为 Medium）
- 图片得是
<img>标签，<picture></picture>、背景图、<video></video>都不认
典型有效场景：<img src="hero.jpg" fetchpriority="high" loading="eager"> —— 首屏大图、LCP 候选、且没设 width/height 导致布局计算延迟时，加 high 可略微提前下载和解码。
loading="lazy" 和 fetchpriority="low" 别混着用
loading="lazy" 控制“是否现在发起请求”，fetchpriority="low" 控制“发起后抢不抢带宽”。两者逻辑不同，但目标重叠：
-
loading="lazy"本身已让图片进低优先级队列，再加fetchpriority="low"是冗余操作 - Chrome 某些版本（如 120–123）对
low的实际调度不稳定，Network 面板仍可能显示 Medium - 如果图片已在视口内或被 UA 识别为 LCP 候选，
low会被自动覆盖为auto
更稳的做法是：非首屏图统一用 loading="lazy"，关键图用 loading="eager" + fetchpriority="high"，别给 low 加戏。
怎么验证 fetchpriority 是否生效
别只看加载时间，要看 Chrome DevTools → Network 面板的 Priority 列（右键表头勾选）：
-
fetchpriority="high"应显示为Highest或High（若同时有<link rel="preload">，则为Highest） -
fetchpriority="low"多数显示为Low或Lowest；若仍是Medium，说明浏览器没采纳 - 测试前务必禁用缓存（勾选 “Disable cache”），并在前台标签页中刷新，否则信号常被绕过
真正容易被忽略的点是：fetchpriority 在 Safari 和 Firefox 中完全被忽略，且不会报错或降级提示——它只是安静地消失。如果你依赖它做核心性能优化，得同步准备 <link rel="preload"> 作为 fallback。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
