as="fetch"仅适用于预加载带cors的api响应，需同时满足rel="preload"、as="fetch"、crossorigin属性、url完全一致、服务端返回access-control-allow-origin及匹配content-type，并在fetch中指定cache:'force-cache'才能生效。
as="fetch"只适合预加载带CORS的API响应，不是万能兜底
用 as="fetch" 预加载数据，本质是告诉浏览器：“这个URL后续会通过 fetch() 请求，提前下好放进HTTP缓存”。但它不进 script/css/font 专用缓存池，也不触发任何解析逻辑——纯 HTTP 层预热。
常见误用：把 JSON 接口写成 as="script" 或 as="json"（后者根本不存在），结果请求发了两次；或者对字体、图片乱用 as="fetch"，导致无法复用。
-
as="fetch"必须搭配服务端返回Access-Control-Allow-Origin响应头，否则浏览器拒绝读取响应体 - 不能用于同源静态文件（如
/data/config.json）——它不走普通 fetch 优化路径，反而可能绕过更高效的缓存策略 - 预加载后，必须用
fetch(url, { cache: 'force-cache' })才能命中，直接fetch(url)仍可能重新发起请求 - 响应体 MIME 类型需匹配：服务端返回
Content-Type: application/json，前端.json()才不会报SyntaxError
JSON 接口预加载必须写全这三样
漏掉任意一项，as="fetch" 就退化成普通 <link href>，Network 里看不到 High 优先级，Initiator 也不标 preload。
-
rel="preload"+as="fetch"缺一不可 -
crossorigin属性必须存在（哪怕同源），值为空即可：crossorigin，不是crossorigin="anonymous" - URL 路径、查询参数必须和后续
fetch()完全一致（包括大小写、编码）
正确示例：<link rel="preload" href="/api/user?lang=zh" as="fetch" crossorigin>
后续 JS 中：fetch('/api/user?lang=zh', { cache: 'force-cache' }).then(r => r.json())
as="fetch" 和 as="script"/as="style" 的缓存互不相通
浏览器为不同 as 值分配独立缓存分区。用 as="fetch" 下载的 JS 文件，后续 <script src="app.js"></script> 不会复用；反过来也一样。
- 想让 JS 脚本被
<script></script>复用 → 必须用as="script" - 想让 CSS 被
<link rel="stylesheet">复用 → 必须用as="style" - 想让 JSON 被
fetch()复用 → 只能用as="fetch"，且必须配crossorigin - WASM 模块若用
as="fetch"，WebAssembly.instantiateStreaming()无法复用，得改用as="script"
预加载后还得手动校验数据可用性
as="fetch" 成功只代表 HTTP 响应到达并缓存，不代表 JSON 可解析、图片能解码、或 WASM 字节码合法。浏览器不会主动抛错，失败往往静默发生。
- 务必在
fetch().then()里捕获SyntaxError（JSON 格式错）、TypeError（跨域拒绝）、AbortError（超时） - 不要依赖 Network 面板里 “Size: from disk cache” 就认为数据可用——缓存可能被中途清除，或响应体损坏
- 移动端弱网下，
as="fetch"预加载可能因并发限制被延迟，实际 fetch 时仍要设 timeout
最容易被忽略的是：预加载 URL 和实际 fetch URL 看似一样，但服务器重定向后最终地址不同，缓存就失效了。这种问题在 CDN 或微服务网关场景下特别常见。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
