静态 不可靠，应改用行为触发+动态注入+明确类型+网络兜底：用户 hover/滚动时延迟200ms注入 as="script" 预取 JS chunk，或直接执行 import() 实现更兼容的运行时预取。
直接在 HTML 中写死 <link rel="prefetch" href="/next-page.html"> 并不能可靠实现“后台静默预取下一页资源”，反而容易浪费流量、触发不可控下载、且在 Safari/iOS 上长期支持不佳。真正可行的方式是：**行为触发 + 动态注入 + 类型明确 + 网络兜底**。
别硬写进 HTML，它不“静默”也不“可控”
静态 prefetch 会在页面 onload 后由浏览器自动发起，但一旦开始就无法中止——哪怕用户已切走、刷新或关闭标签页。尤其当 as="document" 时，会连带拉取该 HTML 引用的 JS/CSS/图片，几秒内可能消耗 1–2 MB 流量，而用户根本没点进去。Safari 直到 iOS 16.4 才稳定支持，旧版 WebView 基本忽略。
- 跨域 prefetch 会被静默忽略（必须同源）
- Chrome Network 面板默认不显示 prefetch 请求，需手动勾选“prefetch”过滤器
- 资源若已被强缓存（如
Cache-Control: immutable），浏览器直接读磁盘，不会发新请求——看起来像“没生效”
用鼠标悬停或进入可视区动态注入
这是目前最实用的平衡方案：用户表现出明确意图（比如 hover 卡片、滚动到“下一页”按钮）时，再创建 link 标签并插入 head。这样既避免盲猜，又保留预取收益。
- 延迟 200ms 触发，防止误触；太短易抖动，太长失去意义
- 只 prefetch 当前可确定的 chunk 路径，例如
/assets/DetailPage.abcd.js，不要写/detail这类 HTML 地址 - 记得同时 prefetch 对应 CSS（如果分离）和关键字体（字体更推荐
rel="preload"） - React/Vue 中放在
useEffect或onMounted里执行，避免 SSR 渲染时报错
代码示例：安全预取 JS chunk
显式声明 as="script" 是关键——它避免降级为 as="document"，也规避 nonce/token 导致的渲染失败：
立即学习“前端免费学习笔记（深入）”；
const prefetchResource = (url) => {
const link = document.createElement('link');
link.rel = 'prefetch';
link.as = 'script'; // 必须写明类型
link.href = url;
document.head.appendChild(link);
};
card.addEventListener('mouseenter', () => {
setTimeout(() => prefetchResource('/assets/DetailPage.abcd.js'), 200);
});
更简单可靠的替代：直接调用 import()
如果你的“下一页”已是代码分割模块（如 React 的 lazy(() => import('./About'))），直接执行这个 import() 表达式即可。浏览器会自动预取对应 chunk，本质是 runtime prefetch，优先级略高于 rel="prefetch"，且兼容所有现代浏览器（含 Safari）。
- 无需操作 DOM，无跨域限制
- 天然感知网络条件（如省流模式下自动跳过）
- 预取失败不影响主流程，错误可捕获处理
