fetchpriority="high"仅对和生效，等标签无效；必须直出src、搭配loading="eager"，且不可与preload或lazy共存，否则浏览器静默忽略。
fetchpriority="high"对里的无效
浏览器根本不读 fetchpriority 属性，只要它出现在 <source></source> 上。这个属性只在 <img> 和 <iframe></iframe> 标签上起作用，<picture></picture>、<source></source>、<script></script>、<link rel="stylesheet"> 上加了也白加——Network 面板里 Priority 依然显示为 Low 或 Medium，不是你配错了，是浏览器压根不解析。
真正能影响优先级的只有最外层的 ![]()
<picture></picture> 本身不发起请求，所有资源加载都由内部的 <img> 触发。所以想提优先级，必须把 fetchpriority="high" 加在 <img> 标签上，且需满足两个硬条件：
-
src或srcset必须在 HTML 源码中直出，不能是 JS 注入或data-src - 不能和
loading="lazy"共存，否则 Chrome 会强制降级为Low
例如：<img src="hero.jpg" fetchpriority="high" loading="eager" alt=""> 是有效的；而 <img fetchpriority="high"> 或 <img src="hero.jpg" fetchpriority="high" loading="lazy"> 都会失效。
首屏图必须设 loading="eager"，否则可能触发双加载
哪怕你写了 fetchpriority="high"，如果漏掉 loading="eager"，Chrome 的 lazy 启发式预加载机制可能在视口滚动前就提前发起一次请求（因距离近），等真正进入视口时又补发一次——两次请求、相同资源、浪费带宽，还干扰 Priority 判断逻辑。
尤其注意：这个规则适用于所有首屏内 <img>，不管它是否在 <picture></picture> 里。兜底的 <img> 一旦没设 loading="eager"，就等于主动放弃对加载时机的控制权。
preload + picture 组合要小心 as 类型和 crossorigin
如果你用 <link rel="preload" as="image"> 提前拉取某张图，再把它放进 <picture></picture>，那 as 值必须准确匹配资源类型，且：
-
as="image"不支持srcset或sizes，只适合单尺寸单格式图 -
as="font"必须带crossorigin，否则 Chrome 120+ 会静默失败（字体下载完也不渲染） -
as="style"需手动切换：onload="this.onload=null;this.rel='stylesheet'"，否则只下载不解析
写错 as，Priority 直接掉到 Low，跟普通 fetch 一样——这比不写 fetchpriority 还隐蔽。
真正起效的永远是那个最终被浏览器选中的 <img> 标签，而不是 <picture></picture> 容器或任意一个 <source></source>。所有优先级控制都得落在它身上，且必须避开 lazy / preload / src 动态注入这几个典型陷阱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
