fetchpriority="high"仅适用于首屏关键资源，如LCP候选图、阻塞渲染的CSS；"low"用于主动让出带宽的非关键图；它只是提示信号，不强制生效，且仅对img/link生效，需src存在、Chromium 112+或Safari 17.2+支持。
用 fetchpriority 属性直接提示浏览器关键资源的调度优先级，是当前控制加载顺序最轻量、语义最清晰的方式。它不改变资源是否加载，只影响“什么时候开始下载、抢多少带宽”，特别适合优化 LCP、首屏渲染等核心指标。
什么时候该加 fetchpriority="high"
仅用于明确属于首屏、阻塞渲染、且浏览器默认可能低估其重要性的资源：
- 首屏大图（LCP 候选）：
<img src="hero.jpg" fetchpriority="high" loading="eager"> - 阻塞渲染的关键 CSS：
<link rel="stylesheet" href="critical.css" fetchpriority="high"> - 轮播图第一张图、核心产品主图、无 width/height 导致无法参与早期布局计算的图片
- 避免滥用：不要给所有
<img>都加 high；已用<link rel="preload">的资源，fetchpriority 不再起作用
什么时候该加 fetchpriority="low"
不是“降级”，而是主动让出带宽，把资源调度权交还给浏览器：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 折叠区内容（如“查看更多”后展开的图）：
<img src="gallery-2.jpg" fetchpriority="low"> - 页面底部社交图标、无关 banner、非交互型装饰图
- 可与
loading="lazy"组合使用，但注意：lazy 本身已触发低优先级逻辑，单独加 low 并不冗余，而是双重保险 - 不要给
loading="lazy"的图片再加fetchpriority="low"——实际效果重复，无额外收益
哪些情况 fetchpriority 不生效
它只是提示信号，不是强制指令，以下情形会覆盖或忽略它：
立即学习“前端免费学习笔记（深入）”；
-
<img>同时设了loading="lazy"且未进入视口：Chrome 会强制降级为 low，lazy 逻辑优先级更高 - 资源没有
src（空值或 JS 动态设置后补属性）：必须在 HTML 解析时就存在有效 src 才能触发调度调整 - 浏览器不支持：仅 Chromium 112+（Chrome/Edge 101+）、Safari 17.2+ 支持；Firefox 完全忽略
- 对
<script type="module">、<script async>、fetch()请求无效：这些走的是独立调度路径，不受 HTML 属性影响
如何验证是否起作用
打开 Chrome DevTools → Network 面板 → 刷新页面 → 右键表头勾选 “Priority” 列：
-
fetchpriority="high"通常显示为 Highest 或 High（若同时有 preload，则 Highest 更常见） -
fetchpriority="low"多数显示为 Low 或 Lowest - 若看到仍是 Medium 或 Low，先检查是否被 lazy、空 src、或浏览器版本拦截
