prefetch 是浏览器空闲时预取用户下一步大概率访问的资源，非当前页加速；preload 才用于高优先级同步加载首屏必需资源，二者不可混淆。
prefetch 不是用来“加速当前页”的，它是浏览器在空闲时悄悄下载用户下一步大概率需要的资源，目标是让跳转或后续操作更快——但前提是路径对、缓存稳、时机准。
prefetch 和 preload 完全不是一回事
很多人一看到“预加载”就下意识写 rel="preload"，结果关键字体卡住首屏，或者非关键图片抢带宽。记住：preload 是高优先级、强制、同步触发，必须配 as 属性（如 as="font"）；prefetch 是低优先级、空闲时才发请求、不保证完成，且不需要 as（浏览器按后缀或 MIME 自动推断）。
-
preload适合当前页马上要用的资源：比如首屏 JS、关键 CSS、渲染必需的字体 -
prefetch只适合“用户离开当前页后大概率访问”的资源：比如搜索页的第2页 HTML、个人中心入口的 JS chunk、商品详情页的评论组件 - 同一资源既
preload又prefetch，Chrome 会发两次请求，纯属浪费
写了 prefetch 却没看到网络请求？先查这三件事
DevTools Network 面板里搜不到 prefetch 请求，不等于没生效，更可能是被策略拦截或条件未满足：
- Firefox 默认关掉 prefetch：需手动设
network.prefetch-next = true（about:config） - Safari 对非脚本类资源（如 HTML、图片）prefetch 支持极弱，甚至忽略
- 页面还没触发
load事件（比如有长任务阻塞主线程），浏览器就不会启动 prefetch - href 是协议相对路径（如
//cdn.example.com/xxx.js），会被当成非法协议直接丢弃
验证是否真发起：Network → Filter 输入 prefetch，勾选 “All”，找 initiator: Other 且 Priority: low 的条目。
prefetch 路径和缓存配置必须严格匹配
哪怕只差一个斜杠或少一个头，prefetch 就白做：
- href 必须是绝对路径或相对于当前页面的合法 URL，不能是
/fonts/xxx.woff2这种带路径的preconnect写法（那是另一回事） - 响应头必须含
Cache-Control: public, max-age=31536000，否则下次跳转时缓存失效，prefetch 彻底无意义 - 字体类资源若跨域，prefetch 不报错但加载失败（
as="font"才要 CORS，prefetch 不需要，但实际加载时仍受同源策略影响）
动态添加 prefetch 要注意时机和 as 值
服务端渲染或首屏后根据用户行为追加 prefetch（比如鼠标悬停卡片时预取详情页），得手动创建 link 元素：
const link = document.createElement('link');
link.rel = 'prefetch';
link.href = '/profile-page.js';
// 注意：这里不加 as 更稳妥，加了反而可能被某些浏览器忽略
document.head.appendChild(link);
但别在 DOMContentLoaded 前就 append，否则可能被浏览器忽略；也别在用户已跳转后还执行，毫无意义。真正容易被忽略的是：prefetch 的资源类型越明确（如 JS、HTML），浏览器调度越准；混用模糊路径（比如 .js 后缀但返回 JSON）会导致降级为 document 类型，后续使用时可能出错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
