fetchpriority="high"仅对初始html中src非空的生效，需chromium 119+/safari 17.2+支持、搭配loading="eager"、避开preload/lazy/缓存/后台标签页等覆盖逻辑，否则信号被忽略或失效。
fetchpriority 不是万能加速开关，它只在特定条件下向 Chromium 调度器发一个提示信号；加了不等于 Priority 变 High，多数失效是因为被更高优先级逻辑覆盖或压根没进调度队列。
哪些 <img> 能真正读取 fetchpriority
只有初始 HTML 文本中直接写出、且带非空 src 的 <img> 才可能生效：
-
<img src="hero.jpg" fetchpriority="high">✅ 有效（前提是浏览器支持） -
<img fetchpriority="high">❌ 无效 —— 预扫描器看不到真实 URL -
<img id="hero">+ JS 后续赋值el.src = "hero.jpg"❌ 无效 —— 解析阶段已错过 -
<picture><source><img src="..."></source></picture>✅ 仅<img>节点可加，<source></source>上写无效 -
<div><img src="..."></div>✅ 父容器不影响，但属性必须落在<img>标签上
fetchpriority="high" 为什么 Network 面板里还是 Medium
不是写错了，而是信号被拦截或未触发。打开 Chrome DevTools → Network → 勾选 Priority 列后仍显示 Medium，大概率是以下任一情况：
-
loading="lazy"和fetchpriority="high"同时存在 → Chrome 强制降为Low -
src是空字符串、data:image/协议、或靠 JS 注入 → 解析时无真实请求，根本不进队列 - 图片在
<footer></footer>或远离首屏位置，且未参与 LCP → 浏览器预扫描器可能跳过该节点 - 已用
<link rel="preload" as="image" href="hero.jpg">→ preload 已锁定Highest，fetchpriority成冗余 - 页面在后台标签页中加载 → Chromium 主动压低所有资源优先级，提示被忽略
- 资源缓存命中 → Network 面板
Priority恒为Medium，与属性无关
怎么配才真正起作用
要让 fetchpriority="high" 有机会被采纳，必须同时满足这几个硬条件：
- 浏览器为 Chromium 119+（Chrome/Edge 101+）、Safari 17.2+（部分支持），Firefox 完全忽略
-
<img>必须出现在服务端直出的 HTML 中，不能由 React/Vue/JS 动态渲染 - 显式声明
loading="eager"（不能省略，默认虽是 eager，但显式写更保险） - 设
width和height—— 帮助浏览器早期布局，提升被识别为 LCP 候选的概率 - 避免和
<link rel="preload">、decoding="async"等冲突配置共存
典型有效写法：<img src="hero.jpg" fetchpriority="high" loading="eager" style="max-width:90%" style="max-width:90%" alt="首页主图">
容易被忽略的底层事实
fetchpriority 只在 HTML 解析阶段读取一次，之后无论你用 JS 改 element.fetchPriority 还是补 src，调度器早已完成决策；它也不是“让图更快”，而是防止浏览器默认把它标为 Medium 后又因启发式判断失误而进一步降级 —— 真正关键的，永远是那张没设 width/height、又卡在 LCP 位置的图，而不是你随手给所有 <img> 都加上 high。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
