fetchpriority仅支持<img>（需有src）、<iframe>（需src/srcdoc）、<link rel="stylesheet">（Chromium/Safari支持），不支持<script>、<picture>、<link rel="preload">等；它只是提示信号，非强制指令。

直接用 fetchpriority 属性是最轻量、最可控的 HTML 级资源优先级控制方式，但它只在 Chromium 112+ 和 Safari 17.2+ 生效，且仅对 <img> 和 <link rel="stylesheet">（部分浏览器）等解析时即发现的资源起作用——不是所有标签都支持，也不是所有浏览器都认。

哪些 HTML 标签能用 fetchpriority？

它只对浏览器在 HTML 解析阶段就能识别并发起请求的资源生效，核心限制很明确：

• <img src="...">：必须有真实 src 值，空字符串、data-src 或 JS 后续设置的都不行
• <iframe src="...">：同理，srcdoc 也支持，但 src 必须存在
• <link rel="stylesheet">：Chrome/Edge 支持，Safari 17.2+ 开始支持，Firefox 完全忽略
• <link rel="preload">：不支持——preload 本身已锁定最高优先级，加 fetchpriority 无效
• <script src="...">、<script type="module">、<picture>：不支持。即使写了，浏览器也当没看见

fetchpriority="high" 什么时候真正有用？

它不是“让图片更快”，而是“让浏览器更早把它排进下载队列”——前提是这张图确实在首屏、阻塞渲染、且浏览器默认会低估它。常见有效场景：

• 首屏大图（LCP 候选），且没设 width/height 导致无法参与早期布局计算：<img src="hero.jpg" fetchpriority="high" loading="eager">
• 轮播图第一张图（其余必须设 low 或不设）
• 关键 CSS 文件（<link rel="stylesheet" href="critical.css" fetchpriority="high">），尤其当它没被 preload 覆盖时
• 禁用 loading="lazy"：只要加了 lazy，哪怕写 fetchpriority="high"，Chrome 也会在视口外强制降为 Low

为什么 fetchpriority="low" 不等于“不加载”？

它是主动让出带宽的信号，不是丢弃指令。浏览器仍会下载，只是把它排在最后——这对非首屏、非交互型资源（如页脚社交图标、折叠区图片）很实用：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

立即学习“前端免费学习笔记（深入）”；

• 和 loading="lazy" 组合是冗余的：lazy 本身已触发低优先级逻辑，再加 low 不提升效果
• 适合与 decoding="async" 配合，避免解码阻塞主线程，但注意：后者也会压制 fetchpriority
• 不要给广告图、分析脚本加这个——它们通常走 JS 动态注入，fetchpriority 根本不生效

怎么确认它真的起作用了？

别猜，看 Network 面板的 Priority 列：

• 打开 Chrome DevTools → Network → 刷新页面 → 右键表头勾选 Priority
• fetchpriority="high" 应显示为 Highest 或 High（若同时有 preload，则大概率是 Highest）
• fetchpriority="low" 多数显示为 Low 或 Lowest
• 如果仍是 Medium，先检查：是否用了 lazy？src 是否为空？浏览器版本是否低于 Chromium 112？

最常被忽略的一点：它只是提示，不是契约。网络拥塞、CPU 过载、同域并发限制这些底层因素，随时可能覆盖你的 fetchpriority 设置。