会，prefetch 会隐蔽消耗用户流量，尤其 as="document" 时连带加载 JS/CSS/图片，弱网下几秒耗掉 1–2MB；静态写死的 prefetch 难控、兼容性差、无 JS 接口，推荐用 import() 或 hover/可视区动态触发并加网络兜底。
prefetch 会偷偷吃掉用户流量吗
会，而且吃得很隐蔽。浏览器一旦发起 prefetch 请求，就不会因为用户切走标签页、刷新或关闭页面而中止——它在后台持续下载，直到完成或被系统强制终止。尤其当 as="document" 时，不仅拉 HTML，还会顺带加载该页引用的 JS/CSS/图片，实际消耗远超预期。
移动端用户在 2G 或弱网下，几秒内就可能被预取掉 1–2 MB 流量，而用户根本没点进去。这不是“理论风险”，是真实发生的带宽透支。
- 别写
as="document"指向 HTML 页面（如/next-page.html），优先级低 + 链式加载 + 缓存不可控，三重危险 - 只 prefetch 确定路径的 chunk 文件，比如 Vite 构建后的
/assets/DetailPage.xxxx.js，不写/detail这种路由路径 - 记得同时 prefetch 对应的 CSS（如果分离）和关键字体（但字体更推荐
preload） - 服务端返回头必须含
Cache-Control: public, max-age=31536000，否则下次跳转时缓存失效，白 prefetch
为什么硬写在 HTML 里的 prefetch 很难控制
静态写死的 <link rel="prefetch" href="/next.js"> 无法感知用户意图、网络状态或设备能力。它在 HTML 解析阶段就注册，只要满足 onload + 空闲 + 同源三个硬条件，就会触发——不管用户是否真要访问下一页，也不管此时是 WiFi 还是 2G。
更麻烦的是：Safari/iOS WebView 直到 iOS 16.4 才稳定支持 prefetch，旧版基本忽略；Firefox 默认关掉（network.prefetch-next=false）；Chrome Network 面板里甚至不显示它的缓存状态，排查困难。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 静态 prefetch 不适合“下一页”这种动态场景，它更适合 SPA 首页固定预取用户中心页这类确定路径
- 必须放在
<head>中且 HTML 解析时已存在 DOM，动态插入（如document.head.appendChild(link)）大多无效 - 跨域请求静默失败，连 DNS 查询都不会触发，Network 面板里什么也看不到
- 写了
as却写错类型（比如as="fetch"），会导致降级为as="document"，反而放大风险
用 hover 或可视区触发 prefetch 才算真正可控
用户把鼠标悬停在卡片上、滚动到某个模块可视区域——这些是明确的行为信号，代表“有可能点进去”。此时才注入 prefetch，既避免盲猜，又可结合网络条件兜底。
200ms 是常见延迟阈值：太短易误触（比如快速划过），太长失去意义（用户已点击）。关键是用 document.createElement('link') 动态创建并插入，而非依赖静态 HTML。
- 必须显式声明
as，例如link.as = 'script'，避免降级为 document - 路径要用绝对或根相对（如
/assets/AboutPage.abcd.js），不能用子路径相对写法 - React/Vue 中建议放在
useEffect或onMounted里执行，避免 SSR 渲染时报错 - 配合
navigator.onLine和navigator.connection.effectiveType做兜底，比如effectiveType === '2g' || 'slow-2g'时跳过
import() 比 prefetch 更简单可靠
如果你的“下一页”是代码分割后的模块（比如 React 的 lazy(() => import('./About'))），直接调用这个 import() 表达式，浏览器就会自动预取对应 chunk——它本质是 runtime prefetch，优先级略高于 rel="prefetch"，且天然兼容所有现代浏览器。
不需要手动管理 link 标签、不用操心 as 类型、不依赖 onload 时机，也不受 Safari 旧版限制。更重要的是：它只在真正需要时才触发，比如用户 hover 后调用 import('./Detail')，比任何行为监听都贴近真实意图。
-
import()返回 Promise，可 await，也可 catch 失败，有完整 JS 接口 - prefetch 没有任何 JS 可读接口，它不执行脚本、不解析 HTML、不触发 fetch，只是把文件丢进 HTTP 缓存
- 对非模块化资源（如纯 HTML 页面），仍需用动态
prefetch，但务必加网络兜底
真正容易被忽略的一点：prefetch 不提供任何 JS 可读接口，它不执行脚本、不解析 HTML、不触发 fetch，只是把文件丢进 HTTP 缓存——你没法知道它成功了没，也没法取消或重试。所以越靠近用户行为、越能感知上下文的方案，才越值得投入。
