prefetch是浏览器在当前页加载完成后低优先级预取下一页可能用到的资源并缓存，适用于spa首页预取用户中心js、电商列表页预取高点击商品页等场景，但不解决首屏性能问题。
prefetch 不是预加载当前页资源的工具，它只在当前页空闲时低优先级下载“可能用到的下一页资源”，滥用会导致带宽浪费、缓存污染，甚至干扰真实用户行为统计。
prefetch 是什么，什么时候该用
prefetch 是浏览器在 onload 之后、空闲时发起的低优先级请求，目标是把后续导航（比如点击跳转）可能需要的资源提前放进 HTTP 缓存。它不保证执行——用户开省流模式、网络是 2G、内存吃紧时，浏览器会直接跳过。
- 典型场景：SPA 中首页 prefetch 用户中心页的
user-center.chunk.js；电商列表页 prefetch 点击率最高的 2～3 个商品详情页的 JS/CSS - 它不能解决首屏慢：因为请求发起太晚，对 LCP、FCP 没帮助
- 它不适合加载字体、首屏图片、核心 CSS：这些必须用
preload，否则照样 FOIT 或布局抖动 - 同源限制严格：跨域 prefetch 在多数浏览器中被忽略，即使服务端开了 CORS 也没用
怎么写 prefetch 才生效
最简写法就是一行 <link rel="prefetch" href="/next-page.js">，但实际生效依赖几个硬性条件：
-
href必须是绝对路径或相对于当前页面的合法 URL；不能是//cdn.example.com/xxx.js这种协议相对路径（会被当成非法协议） - 不需要
as属性：浏览器自动按后缀或 MIME 推断类型；加了反而可能被忽略 - 不能和
preload混用同一资源：比如既preload又prefetch同一个main.js，Chrome 会发两次请求 - 要配合强缓存：返回头必须含
Cache-Control: public, max-age=31536000，否则下次跳转时缓存失效，prefetch 白做
示例：<link rel="prefetch" href="/js/profile-page.js"> —— 放在 里即可，不用等 DOM 加载完。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
为什么 DevTools 里看不到 prefetch 请求
常见现象：写了 prefetch，但在 Chrome DevTools 的 Network 面板里找不到对应请求，或显示为 Priority: low 但状态是 cancelled 或 pending 很久。
- 请求确实没发：页面还没触发
onload（比如有长任务阻塞主线程），或者用户快速跳走了，浏览器主动取消 - 被浏览器策略拦截：Firefox 默认关掉 prefetch（
network.prefetch-next设为false）；Safari 对 prefetch 支持有限，尤其对非脚本类资源 - 路径 404 或 CORS 报错：prefetch 不报 JS 错误，但 Network 面板里能看到失败请求，状态码是 404 或
net::ERR_FAILED - 验证方式：打开 Network → Filter 输入
prefetch，勾选 “All” 而非 “XHR”，再刷新页面观察是否出现带initiator: Other和Priority: low的条目
prefetch 和 preload 容易搞混的坑
二者都用 <link>，但语义、时机、作用域完全不同，混用等于自废性能优化。
- 把
preload当成prefetch用：比如给搜索页的search.js写<link rel="preload" href="/search.js" as="script">放在首页 —— 它会在首页解析 HTML 早期就抢带宽，拖慢首屏，且资源只能被首页用，跳转后无法复用 - 把
prefetch当成preload用：比如给首屏 banner 图写<link rel="prefetch" href="/hero.jpg">—— 图片在 onload 后才开始下载，用户已经看到白图或 placeholder 了 - 服务端渲染（SSR）中动态注入出错：首页 SSR 时根据路由预判用户下一步，但判断逻辑有误（比如所有用户都 prefetch 后台管理页），导致大量无效请求
- 构建工具插件误配：Webpack 的
preload-webpack-plugin默认只处理 preload，若错误配置成对所有异步 chunk 插入 prefetch，会批量污染缓存
真正关键的边界在于：当前页「立刻要用」的资源，只考虑 preload；当前页「大概率不会用，但下一跳很可能用」的资源，才轮到 prefetch。这个判断一旦出错，优化就变成负优化。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
