prefetch用错会拖慢首屏：它低优先级抢占连接池，挤占关键资源；应仅用于高概率跳转页，避免与preload重复、禁用动态插入、需带哈希版本且不可监听状态。
prefetch 用错地方反而拖慢首屏
浏览器对 rel="prefetch" 的处理是“空闲时低优先级下载”，但它不区分资源类型和当前页面阶段。如果在 里一股脑 prefetch JS/CSS/字体，而这些资源恰好和首屏渲染强相关（比如某个关键 CSS 文件被 prefetch 占了连接池），就可能挤占 preload 或正常 fetch 的带宽和 TCP 连接，导致首屏变慢。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 只对「用户下一步高概率访问」的资源 prefetch，比如从列表页 prefetch 详情页的 HTML，或登录后 prefetch 个人中心的 JS 包
- 避免 prefetch 当前页面已内联或已
preload的资源——重复触发会浪费请求 - Chrome DevTools 的 Network 面板里看
Initiator列，确认 prefetch 请求确实在主线程空闲后才发出（通常是Other类型） - 移动端慎用：部分低端 Android 浏览器对 prefetch 支持不稳定，甚至忽略
as提示导致 MIME 类型误判
prefetch 和 preload、preconnect 混用时的优先级陷阱
rel="prefetch" 的优先级远低于 rel="preload" 和 rel="preconnect"，但三者写在同一 里时，浏览器不会自动去重或排序。比如你既写了 <link rel="preload" href="/app.js" as="script">，又写了 <link rel="prefetch" href="/app.js">，现代浏览器通常能合并请求，但旧版 Safari 可能发起两次，且第二次仍按 prefetch 逻辑走低优先级队列。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 同一资源只选一种预加载策略：关键路径用
preload，后续路由用prefetch，跨域域名用preconnect -
prefetch不支持as属性（HTML spec 未定义），所以不能像preload那样提示浏览器提前解码；若需预解析，必须配合as="document"的preload（仅限 HTML） - 用
curl -I检查目标 URL 是否返回200且Content-Type正确，prefetch 失败时浏览器静默丢弃，不会报错
动态插入 prefetch link 在 SPA 中容易失效
React/Vue 等 SPA 在客户端路由跳转后动态插入 <link rel="prefetch">，看似合理，但多数情况下无效：浏览器只在初始 HTML 解析阶段或 document.readyState === 'interactive' 时处理 prefetch，之后插入的 link 标签会被忽略（Chrome 115+ 开始部分支持，但 Safari 完全不支持）。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 服务端渲染（SSR）时根据当前路由，在 HTML 模板中静态注入下一路由所需的 prefetch link
- 客户端确实需要动态控制时，改用
fetch()+cache.put()手动预加载并存入 Cache API，兼容性更好且可控 - 不要依赖
useEffect或mounted钩子插入 prefetch link——它大概率已经来不及了 - 验证方式：刷新页面后立即打开 Network 面板，筛选
Other类型请求，看是否有对应 URL；没有则说明未触发
prefetch 缓存策略不受开发者控制
浏览器对 prefetch 资源的缓存行为完全自主：可能存进 HTTP 缓存，也可能进内存 cache，甚至直接丢弃。它不尊重 Cache-Control: no-store，也不保证复用时校验 ETag。这意味着你无法确保用户点进下一页时，prefetch 的资源一定可用、一定新鲜。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- prefetch 的资源必须带版本号或内容哈希（如
/chunk.a1b2c3.js），否则缓存脏数据会导致白屏或逻辑错误 - 不要 prefetch 带查询参数的 URL（如
/api/user?id=123），这类请求通常被浏览器跳过或拒绝缓存 - CDN 或反向代理上确认该资源响应头包含
Cache-Control: public, max-age=31536000，否则 prefetch 下来也很快被清掉 - 最麻烦的一点：你没法在 JS 里监听 prefetch 是否完成或失败——它没有回调、没有事件、没有 Promise
真正难的不是加那行 <link rel="prefetch">，而是判断「此刻该不该加」「加了之后谁来管它的生命周期」「用户没点进去时它占着内存算不算浪费」。这些事浏览器不告诉你，日志里也看不到。
