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"

不是“降级”，而是主动让出带宽，把资源调度权交还给浏览器：

html-to-pptx-converter

使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。

下载

• 折叠区内容（如“查看更多”后展开的图）：<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>、<script async></script>、fetch() 请求无效：这些走的是独立调度路径，不受 HTML 属性影响

如何验证是否起作用

打开 Chrome DevTools → Network 面板 → 刷新页面 → 右键表头勾选 “Priority” 列：

• fetchpriority="high" 通常显示为 Highest 或 High（若同时有 preload，则 Highest 更常见）
• fetchpriority="low" 多数显示为 Low 或 Lowest
• 若看到仍是 Medium 或 Low，先检查是否被 lazy、空 src、或浏览器版本拦截

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！