prefetch在长流程表单中基本无效——它仅预存JS/CSS至HTTP缓存，不预渲染、不执行JS、不恢复状态，无法解决组件挂载、接口请求、表单校验等核心瓶颈。
prefetch 在长流程表单里根本不会带来毫秒级提升
它不预渲染、不执行 JS、不恢复表单状态，只把 JS/CSS 文件丢进 HTTP 缓存——而长流程表单的卡顿主因是组件挂载、接口请求、校验逻辑和 history.state 丢失。用户点「下一步」时白屏 2 秒，不是因为 step3.chunk.js 没下载完，而是 React 还在 mount、fetch("/api/step3") 刚发出去、滚动位置重置、所有字段清空。
写了 <link rel="prefetch"> 却看不到 Network 请求的真正原因
不是代码错了，是浏览器压根没触发它：
- Chrome DevTools 默认过滤
prefetch请求，必须手动勾选 “prefetch” 过滤器才能看到 - 页面还没触发
onload（比如有长任务阻塞主线程），prefetch 就一直挂起 -
href是相对路径（如./step4.js），在子路由下解析失败，静默忽略 -
as属性缺失或写错（如as="fetch"），降级为as="document"，甚至被浏览器丢弃 - 目标 URL 跨域（协议/域名/端口任一不同），连 DNS 查询都不会发起
唯一能勉强用 prefetch 的地方：最终提交页
如果整个流程最后统一跳转到一个无动态参数、纯静态的提交页（如 /submit），且该页资源由构建工具固定输出（如 /assets/submit.8a2f.js），可谨慎预加载：
- 路径必须是绝对或根相对（如
/assets/submit.8a2f.js），不能是./submit.js -
as值必须准确：as="script"用于 JS，as="style"用于 CSS - 别 prefetch 字体（
as="font"）——prefetch 不触发 CORS 预检，跨域字体大概率失败 - 验证是否生效：Network 面板中找
Initiator是prefetch、Priority是Low、状态码是200 (from memory cache)或304
真正影响体验的环节，prefetch 完全碰不到
长流程表单的瓶颈不在资源下载，在于每次跳转带来的完整生命周期开销。你写 prefetch 时，浏览器正在等 onload；而你用户已经点完「下一步」、页面开始卸载了。更关键的是：
立即学习“前端免费学习笔记（深入）”；
- prefetch 不提供任何 JS 可读接口，它不执行脚本、不解析 HTML、不触发
fetch() - 它对动态路由参数（如
/form/step4?token=abc）完全无解，HTML 里没法写死 href - 即使资源进了缓存，
fetch("/api/step3")仍要重发，表单数据不会自动带过去 - sessionStorage / localStorage 里的字段得你自己读写，prefetch 不帮你做这事
最容易被忽略的点是：问题不在“资源加载慢”，而在“不该整页跳转”。这个设计层级的缺陷，靠加一行 <link rel="prefetch"> 是补不回来的。
