JavaScript中预取Prefetch与预加载Preload策略

2301_764150562026-04-17 9:25

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它们解决的问题层级不同：通义听悟阿里云通义听悟是聚焦音视频内容的工作学习AI助手，依托大模型，帮助用户记录、整理和分析音视频内容，体验用大模型做音视频笔记、整理会议记录。