prefetch是浏览器在当前页加载完成后空闲时低优先级预取下一页资源并存入HTTP缓存的机制，适用于SPA首页预取用户中心JS、电商列表页预取高点击商品页等场景，但不可用于首屏关键资源。
prefetch 是什么，什么时候该用它
HTML 的 <link rel="prefetch"> 本质是告诉浏览器：“这个资源我稍后大概率会用，你空闲时提前拉一下，但别影响当前页面加载。” 它不阻塞渲染、不提升优先级，只在浏览器空闲（比如主文档、关键 CSS/JS 加载完后）才发起请求。
适用场景很明确：
- 下一页的 HTML（比如分页列表的下一页、用户点击“下一步”前的页面）
- 当前页暂不需要、但用户交互后必然触发的资源（如模态框里的大图、富文本编辑器的 JS 包）
- 不适合用于首屏关键资源（应该用 preload 或内联）
常见错误是把它当 preload 乱用：比如对首屏 banner 图加 rel="prefetch"，结果图加载变慢——因为 prefetch 被降权了，浏览器直接把它扔到最后去 fetch。
prefetch 和 preload、preconnect 怎么区分选型
三者目标不同，浏览器处理逻辑完全不同：
-
preload：强制高优先级加载，必须指定as（如as="script"），用于当前页面马上要用的资源（如关键字体、首屏 JS） -
prefetch：低优先级、推测性加载，不指定as也可（但建议指定，便于浏览器优化解析），用于后续导航或交互路径 -
preconnect：只建立 DNS + TCP + TLS 连接，不传数据，适用于跨域第三方资源（如 CDN、分析服务）
举个典型组合：
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
<link rel="preconnect" href="https://cdn.example.com"><br><link rel="preload" as="font" href="/fonts/inter.woff2" type="font/woff2" crossorigin><br><link rel="prefetch" as="document" href="/page/2.html">
注意：prefetch 的 as 值必须合法（document、script、style、image 等），否则浏览器可能忽略或降级为普通 fetch。
prefetch 的实际效果受哪些因素影响
它不是“发出去就一定快”，真实行为取决于：
- 浏览器空闲时机：Chrome 在主线程空闲且网络空闲（无高优请求）时才发起 prefetch；Safari 对 prefetch 更保守，甚至可能完全跳过
- 缓存状态：如果资源已在 HTTP 缓存中，prefetch 请求可能根本不会发出（但会触发缓存验证）
- 用户手势信号：部分浏览器（如 Chrome 94+）会结合
onbeforeunload或导航预测 API 提升 prefetch 触发概率，但纯静态 link 无此能力 - 资源大小与 MIME 类型：超大文件（如 >5MB）可能被浏览器主动放弃 prefetch；非标准类型（如未声明
type的 JSON）可能无法正确缓存
验证是否生效？打开 DevTools → Network 面板，勾选 “Prefetch cache”，然后刷新页面，看是否有带 “Prefetch” 标签的请求出现在 “Other” 或 “Document” 分类下。没看到 ≠ 没触发，可能是被合并进 HTTP/2 push 或走 Service Worker 缓存了。
如何避免 prefetch 引发资源浪费和竞态问题
最常被忽视的是“预取了却不用”，尤其在单页应用（SPA）里：
- 不要在首页全局 prefetch 所有路由的 JS chunk，而应按用户行为动态注入（例如用户 hover 导航项时再插入
<link rel="prefetch">） - 避免重复 prefetch 同一 URL（比如多个组件各自挂载时都加一遍），可用
document.querySelector('link[rel="prefetch"][href="..."]')先查重 - 服务器返回
Cache-Control: no-store或no-cache会直接让 prefetch 失效（浏览器拒绝缓存），此时不如不用 - 移动端弱网下，prefetch 可能抢占带宽，建议结合
navigator.connection.effectiveType动态控制（如effectiveType === '4g'再启用）
真正难的不是写那行 <link>，而是判断“用户接下来到底会不会点那个按钮”——这需要埋点数据、A/B 测试，或者用更现代的 nextjs prefetch / react-query prefetchQuery 这类运行时感知方案来替代静态 link。
