as="fetch"与rel="preload"搭配无效，因html规范中as="fetch"不是preload的合法值，浏览器将其降级为低优先级fetch且不进专用缓存，无法被后续fetch复用。
as="fetch"和rel="preload"搭配时根本不起作用
浏览器看到 rel="preload" 但 as="fetch"，就当没写——它既不提升优先级，也不进专用缓存池，更不会被后续 fetch() 自动复用。这不是兼容性问题，是规范层面的语义错误：as="fetch" 本身就不该和 rel="preload" 共存。
常见错误现象：Network 面板里请求 Initiator 显示为 (Other) 或 script，Priority 是 Low 或 Medium，哪怕 href 正确、路径可访问，也毫无加速效果。
-
as="fetch"是rel="prefetch"或rel="preload"的非法值，所有主流浏览器（Chrome/Firefox/Safari）都忽略它 - 想预加载通用资源（比如 JSON、WASM、GLB 模型），必须用语义正确的
as值：as="script"（WASM）、as="fetch"只能用于rel="prefetch"场景，且不保证调度优先级 - 如果资源类型不确定（比如后端返回的 content-type 动态变化），宁可不用 preload，改用
fetch(url, { cache: 'force-cache' })手动触发并缓存
哪些资源能用 preload + as="fetch"？答案是：没有
HTML 规范里没有 as="fetch" 这个合法取值。你在 MDN 或 Chromium 源码里搜不到它作为 rel="preload" 的有效 as 值。实际生效的只有这些：
-
as="script"→ JS、WASM（需配合type="application/wasm"） -
as="style"→ CSS（必须加onload脚本切换 rel） -
as="font"→ WOFF2/OTF（必须带crossorigin） -
as="image"→ JPG/PNG/WebP/AVIF（不支持srcset） -
as="video"→ MP4/WebM（仅部分浏览器支持，Safari 不稳定）
所谓“as="fetch" 预加载”，本质是误读了 fetch API 的缓存行为。它和 rel="preload" 完全无关——fetch() 自身有 cache: 'force-cache' 选项，但那是运行时控制，不是 HTML parser 阶段的提前调度。
想让 fetch() 请求更快，别碰 preload + as="fetch"
真正影响 fetch() 性能的是 DNS 预解析、连接复用、HTTP/2 多路复用，而不是瞎配一个无效的 as。如果你发现某个 API 请求慢，优先检查这些：
- 是否在
里写了<link rel="dns-prefetch" href="https://api.example.com"> - 是否用了
keep-alive和 HTTP/2，服务端是否开启early-data - 前端是否把多个小请求合并成 batch 接口，避免队头阻塞
- 是否在首次
fetch()前就调用new Image().src = 'https://api.example.com/health'强制建连（hack 但有效）
硬套 <link rel="preload" as="fetch" href="/data.json"> 不仅无效，还会污染 Network 面板，干扰真实请求排查——它发出去的请求 Priority 是 Low，还占一个 Initiator 名额，容易让人误判瓶颈所在。
唯一能勉强“模拟”的场景：JSON 配 as="fetch" + rel="prefetch"
如果你真需要提前拉取非关键 JSON（比如二级页面数据），可用 rel="prefetch"，但它只在空闲时段加载，且不保证时机：
<link rel="prefetch" as="fetch" href="/next-page-data.json">
注意三点：
- 这和
rel="preload"完全不同：prefetch 不抢占带宽，不进 Highest 队列，甚至可能被浏览器跳过 -
as="fetch"在 prefetch 下虽被接受，但只是告诉浏览器“这是 fetch 请求”，不改变 MIME 或缓存策略 - 后续
fetch('/next-page-data.json')能否复用，取决于 HTTP 缓存头（Cache-Control）而非as值
真正关键的接口数据，别依赖任何 preload/prefetch——用 service worker 缓存或 SSR 直出更可靠。而 as="fetch" 这个组合，本质上是个陷阱，文档没写清，浏览器不认，调试时最易踩空。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
