Preload 用于提前加载当前页关键资源，解析 HTML 早期触发、高优先级；Prefetch 用于预取后续页面资源，onload 后低优先级执行、可跨页面复用。

Preload 和 Prefetch 都是 HTML5 提供的资源提示机制，用于优化页面加载性能，但它们的触发时机、用途和浏览器处理方式有本质区别。正确使用能显著提升首屏渲染速度或后续路由体验。

Preload：强制提前加载当前页面必需的关键资源

Preload 告诉浏览器“这个资源我马上就要用”，浏览器会在 HTML 解析过程中尽早发起请求（通常在 CSS/JS 解析前），且不阻塞 DOM 渲染，适用于字体、关键 JS/CSS、重要图片等。

• 必须通过 声明，且需指定 as 属性（如 as="script"、as="font"、as="image"），否则可能被忽略或加载错误
• 不带 as 的 preload 可能被当成普通 fetch，无法复用到后续资源加载中
• 示例：（注意字体需加 crossorigin）
• 不能用于跨域资源（除非服务端支持 CORS 且声明了 crossorigin）

Prefetch：预取可能被后续导航用到的资源

Prefetch 是一种低优先级提示，告诉浏览器“用户**很可能**会访问下一个页面，提前把它的资源缓存起来”。它在当前页面空闲时（如 onload 后）才发起请求，不影响当前页性能。

• 常用在 SPA 路由切换前，预加载下一页的 JS/CSS；或在首页 prefetch 搜索页的 bundle
• 写法：，无需 as，浏览器按 URL 自动推断类型
• 仅对同源资源有效（部分浏览器对跨域 prefetch 支持有限）
• 注意：prefetch 不保证执行，浏览器可能根据网络条件（如 2G）、内存压力或用户设置（如“节省流量”模式）跳过它

关键区别与选型建议

• 时机不同：preload 在解析 HTML 早期就加载；prefetch 在当前页加载完成后才开始
• 优先级不同：preload 是高优先级，可能抢占带宽；prefetch 是最低优先级，不影响当前体验
• 作用域不同：preload 资源只能被当前页面使用；prefetch 资源可被后续页面复用（如跳转后直接从 HTTP 缓存读取）
• 不要用 prefetch 加载首屏关键资源（太晚）；也不要用 preload 加载不确定是否会被访问的资源（浪费带宽）

配合 HTTP 缓存与现代构建工具更有效

单独使用 link 标签只是提示，真正发挥效果依赖合理缓存策略：

立即学习“前端免费学习笔记（深入）”；

• 确保预加载资源返回正确的 Cache-Control（如 public, max-age=31536000 对静态资源）
• Webpack/Vite 等工具可通过插件自动注入 preload（如 webpack-preload-plugin）或生成 prefetch hint
• 服务端渲染（SSR）中可在生成 HTML 时动态注入基于路由的 prefetch，例如首页渲染时 prefetch 用户中心页的 chunk