prefetch 是 标签的 rel 值，用于浏览器空闲时预加载未来页面可能用到的资源，不执行、不渲染、不阻塞当前页；适用于用户行为可预测场景（如明确翻页），应仅预取最可能访问的1–2页静态资源，并置于 中，配合 as 属性声明类型。
prefetch 是什么，什么时候该用它
prefetch 是 <link> 标签的一个 rel 值，告诉浏览器“这个资源很可能马上要用，趁现在空闲时提前拉下来”，但它**不执行、不渲染、不阻塞当前页面**。适用于用户行为可预测的场景，比如翻页按钮明显、分页逻辑固定、或用户大概率会点击“下一页”。
别把它和 preload 混了：preload 是为当前页面关键资源提前三加载（比如首屏字体、核心 JS），而 prefetch 是为**后续页面/路由**做准备。
常见误用是给所有分页链接都加 prefetch，结果预加载了 10 页，浪费带宽又拖慢首屏。实际只需预取最可能被访问的 1–2 页即可。
怎么写 prefetch 才生效
直接在 <link> 就行，关键是路径和类型要对：
- 目标资源必须是真实存在的静态文件（如
page-2.html、chunk-abc.js），不能是动态路由（如 /posts?page=2）——浏览器不会执行 JS 或发带参数的请求
- 如果下一页是 SPA 路由（如 React Router 的
/next），得明确知道它最终加载的 JS chunk 名，prefetch 对应的 chunk-xxx.js，而不是 URL 路径
- 推荐加上
as 属性说明资源类型，帮助浏览器设置正确的请求头和优先级：as="document"（HTML）、as="script"、as="style"
<link rel="prefetch" href="page-2.html" as="document">
page-2.html、chunk-abc.js），不能是动态路由（如 /posts?page=2）——浏览器不会执行 JS 或发带参数的请求/next），得明确知道它最终加载的 JS chunk 名，prefetch 对应的 chunk-xxx.js，而不是 URL 路径as 属性说明资源类型，帮助浏览器设置正确的请求头和优先级：as="document"（HTML）、as="script"、as="style"
注意：href 必须是绝对路径或相对于当前 HTML 的相对路径；相对路径不要以 // 开头，否则会被当成协议无关 URL，容易 404。
prefetch 和 next/link（React）或 （Vue）冲突吗
不冲突，但有重叠。比如 Next.js 的 <link prefetch="{true}"> 默认就用了 prefetch（底层也是插入 <link rel="prefetch">），你再手动加一条，浏览器会去重，只发一次请求。
但要注意：
- Next.js v13+ App Router 默认开启自动 prefetch，无需手动加；Pages Router 则需显式设
prefetch={true}
- Vue Router 的
<router-link></router-link> 不自动 prefetch，得自己监听 hover 或 focus 事件，动态插入 <link> 标签
- 手动 prefetch 的资源不会被框架缓存机制接管，比如 webpack 的 code splitting chunk 名变了，你的静态
href 就会失效
为什么加了 prefetch 却没看到请求
这是最常遇到的问题。原因通常有三个：
- 浏览器策略限制：Chrome 在低电量模式、2G 网络、或内存紧张时会忽略
prefetch；Safari 对 prefetch 支持有限（仅部分版本支持 as="document"）
- 资源已缓存：如果目标 HTML 或 JS 已在 HTTP 缓存中，DevTools 的 Network 面板默认不显示“from memory cache”或“from disk cache”的请求，得勾选 “Disable cache” 再测试
- 时机太晚：把
<link> 放在
验证是否生效，打开 DevTools → Network → 过滤 prefetch，刷新页面，看有没有 status 200 的请求，且 Initiator 显示为 “Other”（不是 JS 或用户操作触发）。
真正难的是判断“用户下一步到底点哪”——静态 prefetch 只能猜一个路径，更复杂的预测得靠用户行为埋点 + 动态插入，那已经超出纯 HTML 能力了。
<link prefetch="{true}"> 默认就用了 prefetch（底层也是插入 <link rel="prefetch">），你再手动加一条，浏览器会去重，只发一次请求。
但要注意：
- Next.js v13+ App Router 默认开启自动 prefetch，无需手动加；Pages Router 则需显式设
prefetch={true} - Vue Router 的
<router-link></router-link>不自动 prefetch，得自己监听 hover 或 focus 事件，动态插入<link>标签 - 手动 prefetch 的资源不会被框架缓存机制接管，比如 webpack 的 code splitting chunk 名变了，你的静态
href就会失效
为什么加了 prefetch 却没看到请求
这是最常遇到的问题。原因通常有三个：
- 浏览器策略限制：Chrome 在低电量模式、2G 网络、或内存紧张时会忽略
prefetch；Safari 对 prefetch 支持有限（仅部分版本支持 as="document"）
- 资源已缓存：如果目标 HTML 或 JS 已在 HTTP 缓存中，DevTools 的 Network 面板默认不显示“from memory cache”或“from disk cache”的请求，得勾选 “Disable cache” 再测试
- 时机太晚：把
<link> 放在
prefetch；Safari 对 prefetch 支持有限（仅部分版本支持 as="document"）<link> 放在 验证是否生效，打开 DevTools → Network → 过滤 prefetch，刷新页面，看有没有 status 200 的请求，且 Initiator 显示为 “Other”（不是 JS 或用户操作触发）。
真正难的是判断“用户下一步到底点哪”——静态 prefetch 只能猜一个路径，更复杂的预测得靠用户行为埋点 + 动态插入，那已经超出纯 HTML 能力了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
