无需登录 数据私有 本地保存

Fetch Priority 演示 - 调整资源加载重要性

开发工具 网络 Fetch Priority 优先级 演示 资源
0
0
0
0

Fetch Priority 演示工具

理解并可视化 fetchpriority 属性如何影响浏览器资源加载顺序。高优先级资源优先获得网络连接，更快完成加载。

预设场景： 并发槽位： 速度：
资源列表
点击预设场景或手动添加资源
加载槽位监控
就绪
槽位 #1 — 空闲
槽位 #2 — 空闲
等待队列：0 个资源
加载日志
等待开始模拟...
统计
高优先级 0 个
自动 0 个
低优先级 0 个
总资源数：0
已完成：0
总耗时：0 ms
高优先级平均等待：-
低优先级平均等待：-
加载时间线
完成模拟后显示...
生成的代码
添加资源后将自动生成对应代码...
💡 实际使用时，将 fetchpriority 属性添加到对应的 HTML 标签中。
真实 Fetch 测试

发起真实网络请求，打开浏览器 DevTools → Network 面板查看实际优先级列。

点击发起请求，结果将显示在这里...
常见问题 (FAQ)

Fetch Priority 是一个浏览器特性，允许开发者通过 fetchpriority 属性（HTML标签）或 priority 选项（fetch API）向浏览器提示资源加载的相对重要性。浏览器会参考这个提示来调整网络请求的调度顺序，让关键资源（如 LCP 图片、关键CSS）优先加载，非关键资源延后加载，从而改善页面性能。

支持以下标签：<img>、<link rel="preload">、<link rel="stylesheet">、<script>、<iframe>。属性值为 high、low 或 auto（默认）。在 fetch() API 中通过 {priority: 'high'|'low'|'auto'} 设置。

LCP 通常由大图片或文本块决定。给 LCP 元素对应的图片添加 fetchpriority="high" 可以让浏览器优先下载该资源，显著降低 LCP 时间。Google 的研究表明，合理使用 Fetch Priority 可以将 LCP 提升 5-15%。建议对首屏 Hero 图片使用高优先级。

Chrome 101+、Edge 101+、Opera 87+、Safari 17+ 已支持。Firefox 截至 2024 年底仍在开发中（可在 about:config 中开启 network.fetchpriority 实验性支持）。对于不支持的浏览器，该属性会被安全忽略，不会产生负面影响。

Fetch Priority 是一个提示（hint）而非指令。浏览器会综合考虑自身的资源加载策略、网络条件、缓存状态等因素来做最终决策。在大多数情况下，浏览器会尊重开发者的优先级提示，但在极端情况下（如所有资源都设为 high），浏览器可能会忽略部分提示以保证公平性。

建议对以下资源使用 high：LCP 图片、首屏关键 CSS（尤其是 preload）、阻塞渲染的关键脚本。对以下资源使用 low：非关键图片（懒加载图片）、第三方分析脚本、非关键的 iframe、页脚区域的资源。大多数资源保持 auto 即可，过度使用 high 会削弱其效果。

在 fetch() 的第二个参数中设置 priority 选项：
fetch('/api/data', { priority: 'high' })
支持的值：'high'、'low'、'auto'。注意这仅是一个提示，且仅在同源或支持 CORS 的请求中有效。

如果所有资源都标记为高优先级，浏览器将难以区分真正的关键资源。这类似于"所有事情都紧急，就没有事情紧急"。建议仅对 1-3 个真正关键的资源使用高优先级，其余保持 auto 或 low，这样才能最大化性能收益。
🔧 相关工具