link rel="prefetch"不能预加载后续页面，仅将静态资源存入HTTP缓存，不执行JS、不恢复状态、不预渲染；其生效需满足三硬条件：静态写在head中、同源、浏览器空闲，否则无效。
link rel="prefetch" 不能“预加载后续页面”，它只存静态资源到 HTTP 缓存，不执行 JS、不恢复状态、不预渲染——写对了也解决不了表单跳转慢、组件重挂载、接口重拉这些真问题。
为什么写了 link rel="prefetch" 却看不到 Network 请求
不是代码错了，是浏览器根本没触发它：
- Chrome DevTools 默认隐藏
prefetch请求，必须手动勾选 Network 面板里的prefetch类型过滤器 - 页面还没完成
onload（比如有长任务阻塞、第三方 SDK 拖慢），prefetch就不会启动 - 目标 URL 跨域（协议/域名/端口任一不同），浏览器静默忽略，连 DNS 查询都不发
-
as属性缺失或写错（比如as="fetch"），会被降级为as="document"或直接丢弃 - 资源已强缓存（
Cache-Control: immutable），浏览器直接从磁盘读，根本不发请求
link rel="prefetch" 必须满足的三个硬性条件
缺一不可，否则等于白写：
- 必须写在 HTML 的
<head>中，且在初始 HTML 解析时就存在 —— 动态插入（如document.head.appendChild(link)）90% 无效 - 目标 URL 必须同源，跨域请求不会发起（连 OPTIONS 都没有）
- 浏览器必须处于空闲状态：无高优先级请求、CPU/网络负载低、页面未卸载
典型正确写法：<link rel="prefetch" href="/assets/checkout.chunk.js" as="script">；as 值必须准确：JS 用 as="script"，CSS 用 as="style"，HTML 用 as="document"。
立即学习“前端免费学习笔记（深入）”；
真正能用的场景和写法
它唯一靠谱的用途，是预加载「确定路径、无动态参数、纯静态」的最终页资源：
- 整个流程最后统一跳转到
/submit，且该页 JS/CSS 路径固定（如/assets/submit.chunk.js），可提前 prefetch - 路径必须是绝对或根相对（
/assets/xxx），不能用./xxx，否则子路由下解析失败 - 别 prefetch 字体（
as="font"）——prefetch不触发 CORS 预检，跨域字体大概率静默失败 - 验证是否生效：跳转后看 Network 面板，资源状态码应为
200 (from memory cache)或304，Initiator 显示prefetch
复杂点在于：它不提供任何 JS 接口，不执行、不解析、不传数据。你写了它，只是把文件扔进 HTTP 缓存；用户点下一步，依然要 mount 组件、调 fetch()、校验表单、滚动复位——这些它一个都管不了。
