prefetch请求未发出的主因是未满足onload完成、主线程空闲、页面未卸载三条件；其次为as属性错误、跨域或路径不合法、节省流量模式开启、cache-control禁止缓存等。
prefetch 请求根本没发出？先确认 onload 和空闲条件是否满足
写了 <link rel="prefetch" href="/next.js" as="script"> 却在 Network 面板里看不到请求，大概率不是代码写错了，而是浏览器压根没启动它。prefetch 不是“一写就发”，它必须同时满足三个条件：当前页面触发 window.onload、主线程空闲、页面尚未卸载（没跳转/刷新）。
- 页面里有长任务（比如同步 JS、大量 DOM 操作）会拖慢 onload，导致 prefetch 延迟几十甚至几百毫秒才开始
- 用户开了“节省流量”模式（Chrome/Edge 默认跳过 prefetch）
- 页面还没加载完就跳转或关闭标签页，浏览器主动取消 prefetch
- 目标资源返回了
Cache-Control: no-store，浏览器连缓存都不建，直接不发请求
验证方式：打开 Chrome DevTools → Network 面板 → 右上角过滤器输入 prefetch（默认隐藏），别只盯着 XHR 或 JS 标签页。
as 属性写错等于白写，且完全静默失效
as 不是可选装饰，它直接决定浏览器怎么解析这个 prefetch 请求：走哪条缓存路径、加什么 Accept 头、是否触发 CORS。写错或漏掉，请求大概率降级为普通 fetch，甚至被忽略——而且不报错、不警告。
- 预取 JS 文件 → 必须用
as="script"（不能是as="js"或as="fetch"） - 预取 HTML 页面 → 必须用
as="document"（Safari 对此支持弱，iOS 16.4 前基本无效） - 预取 CSS → 必须用
as="style"（不是as="css"） - 预取字体 → 必须用
as="font"（注意：prefetch不触发 CORS 预检，跨域字体静默失败） - 乱填如
as="json"或as="image"，浏览器直接忽略该<link>，Network 里完全没痕迹
路径必须静态、同源、绝对或根相对
prefetch 只在 HTML 解析阶段被识别，且目标 URL 必须与当前页同源（协议、域名、端口全一致）。跨域 prefetch 在 Firefox/Safari 中基本被无视，Chrome 虽支持但需服务端配合 CORS，实际很少生效。
- ✅ 绝对路径：
href="/js/detail.js" - ✅ 根相对路径：
href="/assets/main.css" - ❌ 相对路径：
href="./main.css"（子目录下解析失败） - ❌ 协议相对：
href="//cdn.example.com/xxx.js"（非同源，且解析可能出错） - 用 JS 动态创建并
append的<link>，99% 情况下被忽略——HTML 解析期已过，浏览器不认
另外，prefetch 不下载 HTML，也不预解析它。它只缓存原始字节流（raw bytes），后续跳转仍需完整导航流程。所以带 query 参数（/post?id=123）、含 CSR 路由（/post/123#comments）或服务端动态渲染（/search?q=xxx）的 URL 几乎无效——缓存无法命中，甚至污染 disk cache。
别把 prefetch 当 preload 用，首屏关键资源反而更慢
常见错误是把 <link rel="prefetch"> 加在首屏 banner 图或关键 CSS 上，结果图加载变慢。因为 prefetch 被降权了，浏览器直接把它扔到最后去 fetch。
- prefetch 是低优先级、推测性加载，适用于下一页 HTML（
as="document"）、用户交互后必然触发的模块 JS（as="script"）、高点击商品页等场景 - 首屏关键资源必须用
<link rel="preload">，且指定as（如as="font"、as="image"） - 图标、favicon 完全不用 prefetch——浏览器自动处理
<link rel="icon">，prefetch 对它无效 - 别对整页 HTML prefetch；更合理的做法是对下一跳的
main.js或关键 CSS chunk 做 prefetch
真正起效的 prefetch 很少，它依赖用户行为模式、资源大小、当前设备状态三者耦合。写错一个 as，或者路径稍有偏差，就等于没写。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
