静态写死 预取HTML极危险：后台持续下载、浪费流量、缓存污染、Safari支持差；应改用行为触发+动态注入+import()运行时预取。
把 硬编码到 HTML 里，指望它预加载“下一页”——这种做法，基本等同于在用户不知情时，悄悄下载一个可能永远也用不到的页面。尤其在移动端，这极易造成流量浪费、触发缓存污染，而且 Safari 和 iOS 的支持度一直是个老大难问题。所以，这哪里是性能优化？分明是在项目里埋雷。
为什么静态写死 rel="prefetch" 很危险
浏览器一旦发起 prefetch 请求，这事儿就停不下来了。即使用户切换了标签页、甚至关闭了当前页面，下载任务依然会在后台持续进行。麻烦还不止于此：
- 风险最高的，是
as="document"（也就是预取 HTML 文档）。它会连带加载该 HTML 中引用的所有 JS、CSS 和图片，实际消耗的流量和资源远超预期。更棘手的是，如果服务端返回的动态页面包含了 nonce 或 token，预取的内容被缓存后，真正渲染时反而会直接失败。 - 移动端用户在 2G 或慢速网络下，几秒钟内就可能被这种“静默下载”消耗掉 1–2 MB 的流量，而用户压根还没点进那个页面。
- Safari 对
prefetch的支持直到 iOS 16.4 才趋于稳定，此前的版本和 WebView 基本会忽略这个指令，写了也等于白写。 - 在 Chrome DevTools 的 Network 面板里，你很难直接看到
prefetch资源的缓存状态——因为它走的是标准的 HTTP 缓存，而非内存缓存，排查问题相当困难。
真正可用的方案：行为触发 + 动态注入 + 网络兜底
预取，得在用户表现出明确意图时才进行。这才是可控、可测、有退路的工程实践。关键动作包括：
- 使用
document.createElement('link')动态插入标签，而不是在 HTML 里静态写死。这样做的好处是能按需创建、加入条件判断和错误捕获逻辑。 - 触发时机要选好，比如在卡片上监听
mouseenter（鼠标悬停）事件，或者用IntersectionObserver监测元素进入可视区域。通常还会加上 200ms 左右的延迟，防止用户只是快速划过而误触发。 - 只预取确定路径的静态资源，比如 Vite 等构建工具打包后生成的
/assets/DetailPage.xxxx.js这类文件。避免直接写/detail这样的 HTML 路由地址，以免引发上述的连带加载问题。 - 记得同时预取该页面拆分出的 CSS（如果存在）以及关键字体文件（不过字体更推荐用
preload）。 - 在 React 或 Vue 这类框架中，记得把预取逻辑放在
useEffect或onMounted生命周期里执行，避免在服务端渲染（SSR）时因操作 DOM 而报错。
来看一个示例代码：
立即学习“前端免费学习笔记（深入）”；
const prefetchResource = (url) => {
const link = document.createElement('link');
link.rel = 'prefetch';
link.as = 'script'; // 显式声明 as，避免降级为 document
link.href = url;
document.head.appendChild(link);
};
card.addEventListener('mouseenter', () => {
setTimeout(() => prefetchResource('/assets/DetailPage.abcd.js'), 200);
});
比 prefetch 更简单可靠的替代方案：直接调用 import()
如果你的“下一页”是通过代码分割生成的模块（例如 React 中的 lazy(() => import('./About'))），那么直接执行这个 import() 表达式，浏览器就会自动预取对应的代码块（chunk）。这本质上是一种运行时的预取，其优先级通常略高于 rel="prefetch"，并且天然兼容所有现代浏览器。
- 无需手动管理
link标签的生命周期，省心省力。 - 天然规避了跨域、路径解析、缓存策略不一致等配置陷阱。
- 在用户悬停后调用
import('./About')，比动态注入prefetch标签的语义更清晰，调试也更友好。 - 需要注意一点：不要在模块尚未定义时就提前调用
import()，否则会触发真实的加载，而非预取。
当然，这里还有个复杂点：无论用哪种方式预取，目标资源都必须有强缓存策略（例如 Cache-Control: public, max-age=31536000），否则用户跳转后依然要重新发起请求。而动态注入的时机选择、网络条件判断（比如检测 na vigator.connection.effectiveType 为 2g 时就跳过预取）、以及降级回退逻辑，才是真正决定优化效果的关键。这些复杂的问题，可不是靠一行静态的 标签就能解决的。
