prefetch不是提速工具，仅在onload后低优先级预取下页资源；devtools找不到请求主因是未触发onload、用户跳转取消、firefox默认禁用、safari忽略非脚本资源、路径404或cors失败。
prefetch 不是“让页面更快”的工具，它只在当前页 onload 后空闲时低优先级拉取下一页可能用到的资源；写错路径、跨域、没配缓存，它根本不会发请求。
prefetch 请求为什么在 DevTools 里找不到
写了 <link rel="prefetch" href="/next.js"> 却在 Chrome Network 面板看不到请求，常见原因有：
- 页面还没触发
onload：比如有长任务阻塞主线程，或某个<script></script>同步执行太久，浏览器就一直不进入“空闲”状态 - 用户快速跳走了：点击链接前 prefetch 刚发起，跳转后请求被主动 cancel
- Firefox 默认禁用：需手动设
network.prefetch-next = true（about:config） - Safari 基本忽略非脚本类 prefetch：比如
href指向 .css 或 .html，在 Safari 中大概率静默失效 - 路径 404 或 CORS 失败：Network 面板里能看到请求，但状态是
net::ERR_FAILED或404，prefetch 不报 JS 错误，容易漏查
验证方式：打开 Network → Filter 输入 prefetch → 勾选 “All” → 刷新页面观察是否出现带 in 标记的请求。
href 路径写错导致 prefetch 白写
href 必须是合法 URL，且不能是协议相对路径。这些写法都会失效：
-
//cdn.example.com/next.js：浏览器识别为非法协议，直接跳过 -
./next.js：部分老浏览器解析失败，建议统一用绝对路径或根相对路径（/js/next.js） -
https://other-domain.com/next.js：跨域 prefetch 在 Chrome/Firefox 中基本被忽略，即使服务端开了 CORS 也没用
正确做法：href 必须同源，且指向一个能返回 200 的地址；推荐用根相对路径，比如 /pages/profile.chunk.js。
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
prefetch 和 preload 混用同一资源会重复请求
如果对同一个文件既写了 <link rel="preload" href="app.js" as="script">，又写了 <link rel="prefetch" href="app.js">，Chrome 会发两次请求——因为浏览器把它们当成两个独立指令处理。
- preload 是高优先级、立即下载、用于当前页
- prefetch 是低优先级、空闲时下载、用于下一页
- 两者语义冲突，浏览器无法自动去重
更隐蔽的问题：如果用构建工具自动生成 prefetch（比如 Webpack 的 SplitChunksPlugin + prefetch hint），又手动加了 preload，很容易踩中这个坑。检查 Network 面板里相同资源是否出现多个 Initiator: preload 和 prefetch 条目。
没配强缓存会让 prefetch 完全失效
prefetch 只是把资源放进 HTTP 缓存，不保证下次跳转时还能用。如果响应头没带 Cache-Control: public, max-age=31536000，浏览器会在跳转后重新发起网络请求，prefetch 白做。
- 静态资源（JS/CSS/HTML）必须配强缓存，否则跳转时缓存已过期
- 动态资源（如带时间戳或用户 ID 的 URL）不适合 prefetch——每次 URL 都不同，缓存命中率为 0
- 验证方式：点击跳转到目标页后，在 Network 面板看该资源的 Size 列是否显示
from disk cache或from memory cache
真正容易被忽略的是缓存策略和 URL 稳定性的配合：prefetch 写的是 /js/profile.js，但实际部署时生成了哈希文件名 /js/profile.abc123.js，那 prefetch 就永远打不中缓存。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
