link rel="prefetch"对长流程表单基本无效——它仅预存静态资源至HTTP缓存，不预渲染、不执行JS、不恢复状态，无法解决组件挂载、接口请求、表单校验等核心瓶颈；其唯一可能生效场景是预加载无参数、纯静态的最终提交页资源。
link rel="prefetch" 对长流程表单基本无效——它不预渲染、不执行 JS、不恢复表单状态，只存静态资源到 HTTP 缓存。
为什么写了 link rel="prefetch" 却看不到 Network 请求
这不是代码写错，而是浏览器根本没触发它：
- Chrome DevTools 默认过滤
prefetch请求，必须手动勾选 “prefetch” 过滤器才能看到 - 页面还没触发
onload（比如有长任务阻塞主线程），prefetch就被挂起 -
href是相对路径（如./step4.js），在子路由下解析失败，静默忽略 - 目标 URL 跨域（协议/域名/端口任一不同），连 DNS 查询都不会发起
-
as属性缺失或错写（比如as="fetch"），降级为as="document"，甚至被浏览器丢弃
prefetch 在长流程表单里唯一可能生效的场景
仅限最终提交页——前提是它无动态参数、纯静态、且路径可预测：
- 路径必须是绝对或根相对（如
/assets/submit.chunk.js），不能是./submit.js -
as值必须准确：as="script"用于 JS，as="style"用于 CSS - 别
prefetch字体：prefetch不触发 CORS 预检，跨域字体大概率失败 - 验证是否生效：Network 面板中找
Initiator是prefetch、Priority是Low、跳转后资源状态码为200 (from memory cache)或304
真正影响长流程表单加载速度的核心瓶颈在哪
不是资源下载慢，而是每次跳转带来的完整生命周期开销：
立即学习“前端免费学习笔记（深入）”；
- 组件重新挂载（React/Vue mount）、状态重初始化
- 接口必须重发（如
/api/step3），无法复用已填字段或缓存响应 - 表单校验逻辑重复执行，滚动位置不会自动恢复
- 浏览器丢弃
history.state，无法保留步骤间上下文
这些环节 prefetch 完全不参与——它既不执行 JS，也不读写 localStorage 或 sessionStorage，更不干预路由行为。
