fetchpriority="high"仅适用于首屏关键资源，如LCP候选图、阻塞渲染的CSS；"low"用于主动让出带宽的非关键图；它只是提示信号，不强制生效，且仅对img/link生效，需src存在、Chromium 112+或Safari 17.2+支持。

用 fetchpriority 属性直接提示浏览器关键资源的调度优先级，是当前控制加载顺序最轻量、语义最清晰的方式。它不改变资源是否加载，只影响“什么时候开始下载、抢多少带宽”，特别适合优化 LCP、首屏渲染等核心指标。

什么时候该加 fetchpriority="high"

仅用于明确属于首屏、阻塞渲染、且浏览器默认可能低估其重要性的资源：

• 首屏大图（LCP 候选）：
• 阻塞渲染的关键 CSS：
• 轮播图第一张图、核心产品主图、无 width/height 导致无法参与早期布局计算的图片
• 避免滥用：不要给所有 都加 high；已用 的资源，fetchpriority 不再起作用

什么时候该加 fetchpriority="low"

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

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 折叠区内容（如“查看更多”后展开的图）：
• 页面底部社交图标、无关 banner、非交互型装饰图
• 可与 loading="lazy" 组合使用，但注意：lazy 本身已触发低优先级逻辑，单独加 low 并不冗余，而是双重保险
• 不要给 loading="lazy" 的图片再加 fetchpriority="low"——实际效果重复，无额外收益

哪些情况 fetchpriority 不生效

它只是提示信号，不是强制指令，以下情形会覆盖或忽略它：

• 同时设了 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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！