prefetch不是“加了就快”，它只在当前页onload完成、浏览器空闲、页面未卸载时低优先级存入HTTP缓存；写错as、跨域、路径不合法会导致请求根本不出；Network看不到常因未勾选prefetch过滤器或触发条件未满足。
prefetch 不是“加了就快”，它只在当前页 onload 完成、浏览器空闲、页面未卸载时，低优先级把资源塞进 HTTP 缓存——写错 as、跨域、路径不合法，请求根本不会发出。
为什么 Network 面板里看不到 prefetch 请求
不是代码写错了，而是浏览器压根没触发它。常见卡点：
- 页面还没执行完
onload：比如有长任务阻塞主线程、大图未加载完、同步 JS 卡住 - 用户开了“节省流量”模式（Chrome/Edge 默认跳过，Safari 直接忽略）
- 标签页快速关闭或跳转，浏览器主动中止请求，Network 显示
cancelled - 目标资源返回
Cache-Control: no-store或max-age=0，浏览器连缓存都不建，直接不发 - DevTools 默认隐藏 prefetch 请求：必须手动在 Network 面板勾选
prefetch过滤器，或清空所有过滤器再刷新
as 属性写错等于白写，且完全静默失效
浏览器靠 as 决定怎么发请求、走哪条缓存策略、是否校验 MIME 类型。漏掉或写错，请求大概率被降级为普通 fetch，甚至静默丢弃。
- 预取 JS 文件必须用
as="script"：<link rel="prefetch" href="/assets/detail.4f9c.js" as="script"> - 预取 HTML 页面必须用
as="document"：<link rel="prefetch" href="/pages/checkout.html" as="document"> - 预取 CSS 必须用
as="style"：<link rel="prefetch" href="/css/detail.css" as="style"> -
as="fetch"和as="json"是无效值，浏览器不识别，也不报错，只是当普通链接处理
硬编码在 head 里很危险，动态注入基本无效
把 <link rel="prefetch"> 硬塞进 HTML 模板，等于让所有用户无差别下载一个可能永远用不到的资源。
立即学习“前端免费学习笔记（深入）”；
- 必须静态写在
<head>中：JS 动态创建并插入（如document.createElement('link')）99% 被忽略，HTML 解析期已过 - 路径必须合法：支持绝对路径（
/js/profile.js）和根相对路径（/pages/step2.html），不支持./next.js或//cdn.example.com/xxx.js - 跨域资源要加
crossorigin，但 Safari 和旧版 WebView 对跨域prefetch支持极差，建议优先同源 - 目标页面不能含动态参数（如
?token=abc）或服务端 nonce，否则缓存后无法复用，甚至触发安全拦截
它只存资源，不执行、不渲染、不发 API
prefetch 的作用边界非常窄：仅把静态资源存入 HTTP 缓存，后续跳转时复用。它不解决首屏性能，也不加速真实业务逻辑。
- 对
/api/user/profile这类接口地址加prefetch完全无效——它根本不发fetch请求 - 预取了
/product/123.html，但页面内仍需重新执行 JS、重新调用库存接口、重新校验登录态 - 资源进了缓存，但后续导航没复用？检查缓存键是否一致：版本号、
Content-Type、Cache-Control是否匹配 - 别指望它提升 LCP/FCP：它在
onload后才启动，对当前页任何指标都无影响
最容易被忽略的一点：你看到 Network 里 from disk cache，不代表页面变快了——如果目标页依赖动态数据或客户端渲染，prefetch 只省下了几 KB 的 HTML，真正耗时的部分它碰不到。
