link rel="prefetch"对多步表单等场景基本无效——它仅预存静态资源至http缓存，不执行js、不触发接口、不恢复状态，无法解决组件挂载、数据请求和表单校验等核心瓶颈。
link rel="prefetch" 对多步表单、列表页跳转等常见场景基本没帮助——它不执行 JS、不触发接口、不保留状态，只存静态资源到 HTTP 缓存，而真实瓶颈在组件挂载、数据请求和表单校验上。
为什么写了 prefetch 却感觉不到变快
浏览器确实发了请求，但你看到的“加载完成”只是文件进了缓存，不是页面就绪。用户点「下一步」后，React/Vue 仍要重新 mount 组件、重新 fetch 接口、重新跑校验逻辑，白屏时间照旧。
-
prefetch不预渲染 HTML，也不执行其中的 JS；它只下载，不解析、不执行 - 目标页带动态参数（如
/detail?id=123）时，预取/detail.js没用——实际加载的是带 query 的完整文档，缓存不命中 - 如果目标页用了 nonce 或一次性 token，预取的 HTML 根本无法复用，浏览器会丢弃或重发请求
- Network 面板默认不显示 prefetch 请求，必须手动勾选 “prefetch” 过滤器才能确认是否真发了
prefetch 真正起作用的三个硬条件
缺一不可，否则静默失效，连错误提示都没有。
- 页面已触发
onload（没有长任务卡主线程、大图/JS 未阻塞） -
href是绝对路径或根相对路径（如/assets/step2.abc.js），不能是./step2.js或//cdn.com/xxx -
as属性准确：预取 JS 必须写as="script"，预取 CSS 写as="style"，预取 HTML 必须写as="document"；写成as="fetch"或漏掉直接被忽略
它悄悄消耗流量，而且你很难察觉
Chrome 和 Safari 在后台持续下载 prefetch 资源，哪怕用户已切走页面、关闭标签，甚至刷新当前页——已发出的请求不会中止，2G 网络下几秒就能耗掉 1–2 MB。
- DevTools Network 面板不统计 prefetch 流量，也没有“已缓存字节数”监控入口
- 用户开启“节省流量”模式时，Chrome/Edge 默认跳过，Safari 直接无视，Firefox 默认关闭（
network.prefetch-next=false） - 跨域 prefetch 在 Safari/Firefox 中基本无效，即使服务端开了 CORS 也没用
- 动态插入的
<link rel="prefetch">（比如 JS 创建后 append 到 head）99% 被浏览器忽略——HTML 解析期已过
真正影响体验的从来不是资源下载速度，而是每次跳转带来的完整生命周期开销。把五步表单改成单页、提前拉接口、懒加载组件、用 sessionStorage 持久化输入——这些才是能感知到的优化。而 prefetch 往往是最后才想到、却最先该删掉的一行代码。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
