Preload用于立即加载当前导航关键资源，如CSS、首屏图片；Prefetch用于空闲时预载后续可能访问的资源，如路由组件。二者不可混用，且需配合as属性、crossorigin等正确配置。
预取（Prefetch）和预加载（Preload）都是浏览器资源提示机制，但目标不同：Preload 是让浏览器立即获取当前导航必需的关键资源，而 Prefetch 是让浏览器在空闲时提前下载将来可能用到的资源。用错场景会导致性能下降或浪费带宽。
Preload 用于关键路径资源
Preload 告诉浏览器：“这个资源马上就要用，别等解析完 HTML 再发起请求”。它强制提前触发 fetch，且不阻塞页面渲染，适合 CSS、关键字体、首屏 hero 图、核心 JS 模块等。
- 必须通过
<link rel="preload">声明，且需指定as属性（如as="script"、as="font"），否则浏览器无法确定优先级和 CORS 行为 - 不支持跨域匿名请求的资源（如字体）要加
crossorigin属性，否则会重复请求 - 不能滥用：对非首屏、非关键资源 Preload 可能抢占带宽，反而拖慢主内容加载
Prefetch 用于未来导航资源
Prefetch 针对的是用户“下一步可能访问”的内容，比如下一页的 JS、某个路由组件、搜索建议接口的 JSON 模板。浏览器只在空闲时（CPU 和网络负载低）才发起请求，且优先级极低。
- 常用
<link rel="prefetch">声明，通常放在<head>中，也可由 JS 动态注入 - 适用于 SPA 中按需路由（如点击“订单页”前 prefetch 对应 chunk）、登录后 prefetch 个人中心资源等场景
- 注意兼容性：Safari 对
prefetch支持较弱（iOS 16.4+ 才稳定），部分安卓 WebView 可能忽略；可降级为 IntersectionObserver 触发懒加载
别混淆 preload/prefetch/preconnect/dns-prefetch
它们解决的问题层级不同：
立即学习“Java免费学习笔记（深入）”；
- preconnect：提前建立 DNS 查询 + TCP 连接 + TLS 握手（适合第三方 CDN 域名）
- dns-prefetch：仅做 DNS 查询（兼容性更好，但作用更弱）
- preload：已知资源 URL，立即获取并放入内存缓存，供当前页面使用
- prefetch：URL 已知，但属于后续导航，延迟获取，存入 HTTP 缓存
例如：CDN 域名用 preconnect，首屏大图用 preload as="image"，下一屏组件包用 prefetch as="script"。
运行时动态控制更灵活
硬编码 link 标签不够智能，实际项目中常结合用户行为动态触发：
- 鼠标悬停导航项 200ms 后 prefetch 对应页面资源
- 表单输入完成且焦点离开时 prefetch 搜索建议接口响应模板
- 利用
document.createElement('link')+rel="preload"在 ReactuseEffect或 VueonMounted中按需注入 - 服务端渲染（SSR）时根据首屏数据预判，生成对应 preload 标签，避免客户端 JS 竞争资源
