fetchpriority="high"仅在chromium 112+中对初始html内带src的标签生效，需搭配loading="eager"、禁用缓存、前台标签页验证，且不适用于、js动态插入或data-src场景。
fetchpriority="high" 在 HTML 结构层起作用的前提很硬：它必须写在原生 <img> 标签上，且该标签得出现在初始 HTML 文本中——JS 动态插入、<picture></picture> 外层、data-src 替换、<template></template> 里，全都不认。
fetchpriority 必须写在 <img> 上，不能写在 <picture></picture> 或父容器上
浏览器的预扫描器（preload scanner）只识别 <img src="..."> 这种直白结构。哪怕你把 fetchpriority="high" 加在 <picture></picture> 标签上，或者加在包裹它的 <div class="hero"> 上，Chrome 完全无视。
<p>真正生效的写法只有这一种：</p>
<pre class="brush:php;toolbar:false;"><picture><source media="(min-width: 1024px)" srcset="/hero-1920w.avif" type="image/avif"><source media="(min-width: 768px)" srcset="/hero-1200w.webp" type="image/webp">
@@##@@
</source></source></picture></pre>
<ul>
<li>
<code><img src="/hero-800w.jpg" fetchpriority="high" loading="eager" style="max-width:90%" style="max-width:90%" alt="首页主图"> 是 <picture></picture> 的 fallback，也是唯一能带 fetchpriority 的节点
<source></source> 都不支持该属性，别浪费字符<img> 不套 <picture></picture>，那就直接把 fetchpriority="high" 写在 <img> 上动态插入的图片加 fetchpriority=“high” 没用
像 CMS 渲染后 JS 补充 src、React/Vue 组件挂载时赋值、或用 data-lazy-src + 监听滚动再替换的写法，fetchpriority 属性即使存在也无效——因为浏览器解析 HTML 时根本没看到这个 src，预扫描器压根没机会把它放进高优队列。
- 错误示例：
<img>→ 属性存在，但无src，不触发预加载 - 错误示例：
<img data-lazy-src="hero.jpg" fetchpriority="high">→ JS 后续执行el.src = "hero.jpg"→ 此时优先级按默认处理（通常是 Low） - 正确做法：首屏关键图必须在服务端吐出的原始 HTML 中就带完整
src和fetchpriority="high"
为什么写了 fetchpriority="high" 却没看到 Network 面板 Priority 变 High？
不是配置错了，而是几个常见拦截条件同时触发了：
- 页面在后台标签页中加载 → Chromium 主动压低所有资源优先级，
fetchpriority被忽略 - 图片已被缓存 → Network 面板 Priority 恒为
Medium，无论属性怎么设 - 同时用了
<link rel="preload" as="image" href="...">→ preload 本身已锁定最高优先级，fetchpriority成为冗余，面板可能仍显示Highest，但不是因为它起效 - 浏览器版本低于 Chromium 112 → Safari 17.2+ 才开始支持，Firefox 完全不识别，此时属性被静默忽略
验证是否生效，唯一可靠方式是：禁用缓存 + 前台标签页 + Chrome 124+ → 打开 DevTools Network 面板 → 右键表头勾选 Priority → 找到对应图片请求，看字段是否变成 High 或 Highest。
最容易被忽略的一点：fetchpriority 是提示，不是开关。它只影响“请求发起时机”和“网络调度权重”，对解码耗时、布局计算、渲染帧提交毫无作用。一张没设 width/height 的 fetchpriority="high" 图片，仍会引发 layout shift，间接拖慢 LCP；一张 3MB 的 AVIF，即使 Priority 显示 Highest，下载完也得等解码完成才能绘制。真正卡点，从来不在 HTML 层这一行属性上。
