rel="prefetch"仅在onload后空闲时低优先级预加载资源进http缓存，需正确设置as属性、避免跨域、慎用as="document"，动态注入更可控，且不提供js接口。
rel="prefetch" 不是“加了就快”，它只在页面 onload 后、浏览器空闲时，低优先级下载资源进 HTTP 缓存——写错或乱用，流量白跑，缓存还被污染。
为什么写了 rel="prefetch" 却看不到 Network 请求
不是代码错了，而是根本没触发：
- Chrome DevTools 默认过滤
prefetch类型请求，必须手动勾选 “prefetch” 或清空所有过滤器才能看见 - 资源已被强缓存（比如
Cache-Control: immutable），浏览器直接从磁盘读，压根不发新请求 - 页面还没完成
onload（例如有长任务阻塞主线程），或者用户已跳转/关闭标签页，prefetch被中止 - 目标 URL 跨域（协议、域名、端口任一不同），浏览器静默忽略，Network 里连
OPTIONS都没有 -
as属性缺失或写错（如as="fetch"），导致降级为低优先级fetch，甚至被完全忽略
as 属性必须写对，否则等于没写
浏览器靠 as 判断资源类型，从而设置正确请求头、缓存策略和加载优先级。漏掉或写错，请求可能被丢到最后，甚至失败。
- 预取 JS 文件：
<link rel="prefetch" href="/assets/detail.4f9c.js" as="script"> - 预取 HTML 页面：
<link rel="prefetch" href="/pages/checkout.html" as="document"> - 预取 CSS 文件：
<link rel="prefetch" href="/css/detail.css" as="style"> -
as="fetch"和as="json"是无效值，别写；as="document"会连带加载该 HTML 中引用的所有 JS/CSS/图片，实际流量远超预期
硬编码在 HTML 里非常危险，尤其移动端
静态写死 <link rel="prefetch"> 在 中，等于强制所有用户无差别下载一个可能永远用不到的资源。
- 用户切页或关闭标签页后，
prefetch请求仍后台持续下载，浏览器不会中止 -
as="document"风险最高：预取的 HTML 若含服务端动态nonce或 token，缓存后校验失败，页面直接白屏 - Safari 直到 iOS 16.4 才稳定支持，旧版 WebView 完全忽略，写了等于白加
- 更可控的做法是：用
document.createElement('link')动态注入，在mouseenter或元素进入视口时触发，配合 200ms 延迟防误触
真正想“预取数据”？prefetch 根本不适用
rel="prefetch" 不执行脚本、不触发 fetch、不解析 JSON，它只把文件塞进 HTTP 缓存——JS 拿不到数据，也收不到回调。
- 要提前获取 API 数据，该用
fetch()+cache.put()存入 Cache API，后续通过cache.match()读取 - 在 SPA 中，路由切换前主动
fetch下一页所需数据，配合 Suspense 或 loading 状态管理 - 如果资源已是代码分割模块（如 React 的
import('./About')），直接调用import()表达式，浏览器自动预取 chunk，比rel="prefetch"更可靠、兼容性更好
最易被忽略的一点：prefetch 不提供任何 JS 可读接口，它只是把文件丢进 HTTP 缓存——你得确保后续导航真能命中这个缓存，且资源本身没被服务端动态篡改。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
