fetchpriority="high"仅在Chromium 112+中对初始HTML内带src的<img>标签生效，需搭配loading="eager"、禁用缓存、前台标签页验证，且不适用于<picture>、JS动态插入或data-src场景。
fetchpriority="high" 在 HTML 结构层起作用的前提很硬：它必须写在原生 <img> 标签上，且该标签得出现在初始 HTML 文本中——JS 动态插入、<picture> 外层、data-src 替换、<template> 里，全都不认。
fetchpriority 必须写在 <img> 上，不能写在 <picture> 或父容器上
浏览器的预扫描器（preload scanner）只识别 <img src="..."> 这种直白结构。哪怕你把 fetchpriority="high" 加在 <picture> 标签上，或者加在包裹它的 <div class="hero"> 上，Chrome 完全无视。
真正生效的写法只有这一种：
<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"> <img src="/hero-800w.jpg" fetchpriority="high" loading="eager" width="800" height="450" alt="首页主图"> </picture>
-
<img>是<picture>的 fallback，也是唯一能带fetchpriority的节点 - 所有
<source>都不支持该属性，别浪费字符 - 如果只用
<img>不套<picture>，那就直接把fetchpriority="high"写在<img>上
动态插入的图片加 fetchpriority=“high” 没用
像 CMS 渲染后 JS 补充 src、React/Vue 组件挂载时赋值、或用 data-lazy-src + 监听滚动再替换的写法，fetchpriority 属性即使存在也无效——因为浏览器解析 HTML 时根本没看到这个 src，预扫描器压根没机会把它放进高优队列。
立即学习“前端免费学习笔记（深入）”；
- 错误示例：
<img data-lazy-src="hero.jpg" fetchpriority="high">→ 属性存在，但无src，不触发预加载 - 错误示例：
<img id="hero" 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 层这一行属性上。
