fetchpriority是HTML中用于向浏览器提示资源加载优先级的属性，仅对和在Chromium系浏览器（Chrome/Edge/Opera）中生效，需src非空、搭配loading="eager"、无preload、非缓存且前台标签页才可能被采纳；Firefox和Safari完全不支持。

fetchpriority 是什么，什么时候该用

它不是所有浏览器都支持的属性，目前只有 Chromium 系统（Chrome、Edge、新版 Opera）在 2023 年起逐步启用，Firefox 和 Safari 完全不识别。所以别指望靠它“强制提升加载优先级”来解决首屏卡顿——它只是个提示，浏览器有权忽略。

真正起效的场景很窄：fetchpriority 只对 标签的初始资源发现阶段（HTML parser 阶段）起作用，且仅影响 fetch queue 中的相对顺序，不影响解码、渲染或网络带宽分配。

• 适合标记首屏关键图，比如
• 对懒加载图（loading="lazy"）加 fetchpriority 没意义，parser 不会提前发现它们
• 如果图已通过 CSS background-image 引入，fetchpriority 完全无效

fetchpriority="high" 和 "low" 的实际效果差异

实测中，fetchpriority="high" 会让 Chrome 在 HTML 解析时把这张图的 fetch 请求插到当前 fetch queue 前部；fetchpriority="low" 则尽量延后——但前提是它没被其他机制（如 preload 或 resource hint）覆盖。

注意：没有 fetchpriority="auto" 这种写法，不写该属性就等同于默认行为（即按文档顺序+资源类型启发式排序）。

• fetchpriority="high" 不会绕过 DNS lookup 或 TCP handshake，也不提升 HTTP/2 stream priority
• 多个 fetchpriority="high" 图片之间，仍按 HTML 出现顺序排队
• 若同时用了 ，它的优先级高于 fetchpriority

和 loading="lazy"、decoding="async" 混用要注意什么

fetchpriority 和 loading="lazy" 逻辑冲突：前者让浏览器“早点 fetch”，后者让浏览器“晚点 fetch”。Chrome 当前策略是优先尊重 loading="lazy"，此时 fetchpriority 被静默忽略。

Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转

实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。

下载

decoding="async" 影响的是解码时机，和 fetchpriority 完全正交，可以共存，但别误以为加了就能“更快显示”——图片仍得等 fetch + decode + paint 全流程。

• 首屏图不要加 loading="lazy"，否则 fetchpriority 白配
• decoding="async" 对大图有帮助，但对小图可能增加 layout shift 风险
• 服务端开启 Accept: image/avif 适配时，fetchpriority 不影响格式协商顺序

替代方案比 fetchpriority 更可靠

如果你发现加了 fetchpriority 页面性能没变化，大概率是因为它本就不是瓶颈。更值得检查的是：CDN 缓存命中率、图片尺寸是否过大、是否漏掉 srcset 响应式配置、HTTP/2 是否启用。

真要干预加载顺序，优先级排序更可控的方式是：

• 用 显式声明关键图
• 把首屏 放在 靠前位置（parser blocking 行为本身就有优先级）
• 避免在 里用 JS 动态插入图片，那会彻底绕过 parser 的 fetch 调度

复杂点在于：fetchpriority 是个弱提示，而真实加载表现取决于网络条件、缓存状态、资源竞争程度——这些它一个都管不了。

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