17370845950

link rel="prefetch" 不能“

取数据”，它仅在浏览器空闲时下载资源存入HTTP缓存，不执行脚本、不触发API、不提供JS可读接口；需同源、置于head、页面未卸载且空闲时才生效。

什么是 link rel="prefetch"，它真能“取数据”吗

不能。link rel="prefetch" 不会执行脚本、不触发 API 请求、不解析 HTML 或 JSON，它只做一件事：在浏览器空闲时，把指定的资源（通常是 JS、CSS、HTML 文档）下载并存入 HTTP 缓存。后续导航或资源加载时，若匹配缓存键，就能复用——但它不会主动“取数据”供 JS 直接读取，也不提供回调或 Promise。

link rel="prefetch" 的正确写法和生效条件

必须满足三个前提才可能触发预取：

• 资源 URL 必须同源（协议、域名、端口一致），跨域会静默忽略
• 必须放在 中，且在首次渲染前已存在 DOM（动态插入的 link 大多无效）
• 浏览器需处于空闲状态（无高优先级请求、CPU/网络负载低），且当前页面生命周期未结束（比如还没跳转或关闭）

典型写法：

as 属性必须准确标注资源类型，否则可能降级为低优先级 fetch，甚至被忽略；as="fetch" 是无效值，不要写。

为什么你写了 prefetch 却没看到 network 请求

常见原因包括：

• Chrome 仅在用户可能导航到该页面（如页面含对应 ）时才提升 prefetch 优先级，纯静态 prefetch 可能延迟数秒甚至跳过
• DevTools 的 Network 面板默认过滤掉“prefetch”类型的请求，需勾选 prefetch 或取消所有过滤器才能看到
• 资源已被强缓存（Cache-Control: immutable 或 max-age 很大），浏览器直接从磁盘缓存读取，不发新请求
• 使用了 rel="preload" 混淆概念——preload 是高优先级强制加载，prefetch 是低优先级投机加载，二者不可互换

想真正“预取数据”，该用什么替代方案

如果目标是提前获取 JSON、API 响应等可被 JS 使用的数据，prefetch 不适用。可行路径有：

• 页面加载后，用 fetch() + cache.put() 手动存入 Cache API，后续通过 cache.match() 读取
• 对关键接口，在服务端启用 HTTP/2 Server Push（已逐步弃用）或 HTTP/3 的 QPACK 推送能力（需服务器支持）
• 在 SPA 中，路由切换前用 fetch() 预加载下一页所需数据，配合 Suspense 或 loading 状态管理
• 利用 rel="prerender"（仅 Chromium 支持）预渲染整个页面，但开销大、兼容性差，且不适用于数据驱动场景

真正容易被忽略的是：预取的价值高度依赖用户行为预测。没有点击流分析或埋点反馈支撑的 prefetch，往往只是往缓存里塞了一堆没人用的字节。