as="fetch"专用于预加载关键JSON接口（如用户配置、菜单结构），需配type="application/json"和crossorigin="anonymous"，仅Chrome/Edge稳定复用，且必须与后续fetch()的URL及凭据模式完全匹配。
as="fetch"适用于关键 JSON 接口数据预加载
as="fetch"不是万能占位符，它专为 fetch() 类请求设计，实际只在预加载 application/json 类资源时有效——比如首屏必需的用户配置、菜单结构、AB 实验开关等。浏览器看到 as="fetch" 会走 fetch 请求管线：带凭据（Credentials: include）、用 Accept: */*、进普通 HTTP 缓存池，后续 fetch() 调用可直接复用。
- 必须配
type="application/json"（推荐），否则服务端返回非 JSON MIME 时可能被丢弃 - 跨域时需加
crossorigin="anonymous"，否则凭据不发，响应会被拒绝 - 不能用于字体、CSS、JS 等资源：写成
as="fetch"加字体路径，Network 里能看到请求成功，但@font-face完全无视，FOIT 照旧 - Firefox 和 Safari 对
as="fetch"的缓存复用支持不稳定，建议 Chrome/Edge 环境下重点验证
as="fetch"和as="script"/as="style"的缓存互不相通
浏览器为不同 as 值划分了隔离缓存分区：as="fetch" 下载的 JSON 不会进入 as="script" 分区，反之亦然。这意味着你不能靠 as="fetch" 预加载一个 JS 文件然后指望 <script src="..."></script> 直接复用——路径再一致也没用。
-
as="fetch"→ 缓存键含完整 URL + credentials 模式 + accept 头 -
as="script"→ 缓存键还额外校验Content-Type: application/javascript - 想让 JSON 数据“提前就位”，就得确保后续
fetch("/api/config.json")的 URL 和href完全一致（包括 query string 和 hash）
as="fetch"不能替代 as="font"或 as="style"来优化渲染
很多人试图用 as="fetch" 预加载字体或 CSS，觉得“反正都是下载”，这是典型误用。字体必须走 FontLoader 流程（as="font"），CSS 必须参与 CSSOM 构建（as="style"）。用 as="fetch" 加载它们，等于把高优先级渲染资源降级为后台 fetch，既无法触发字体回填，也不能阻止白屏。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 字体写
as="fetch"→ 即使返回Content-Type: font/woff2，浏览器也只存不应用，@font-face仍发起新请求 - CSS 写
as="fetch"→ 不触发 CSS 解析，样式表不会进入 CSSOM，页面照样空白 -
importance="high"对as="fetch"有作用（仅 Chromium），但对渲染无意义——它只抢网络队列，不抢解析或绘制时机
as="fetch"在服务端推送（HTTP/2 Push）中容易静默失效
即使服务端正确推送了 JSON 资源，如果 HTML 中 <link rel="preload" as="fetch"> 的 type 或 as 值与响应头 Content-Type 不匹配，推送内容会被丢弃。浏览器不会报错，但 Network 面板里能看到“推了又重下”。
立即学习“前端免费学习笔记（深入）”；
- 推送 JSON 时响应头必须是
Content-Type: application/json - 对应
<link>必须写as="fetch" type="application/json"，漏掉type或写成type="text/plain"都会导致复用失败 - 验证方法：点开 Network 中该资源 → Headers → 检查 Request Headers 的
Accept是否为*/*，Response Headers 的Content-Type是否严格匹配
as 值不是标签装饰，它是浏览器调度器的指令开关；as="fetch" 的价值只在“提前拉取 JSON 后立即 fetch() 复用”，离了这个闭环，它就只是个普通请求。 
