JavaScript中预取Prefetch与预加载Preload策略-js教程-PHP中文网

preload用于立即加载当前导航关键资源，如css、首屏图片；prefetch用于空闲时预载后续可能访问的资源，如路由组件。二者不可混用，且需配合as属性、crossorigin等正确配置。

javascript中预取prefetch与预加载preload策略

预取（Prefetch）和预加载（Preload）都是浏览器资源提示机制，但目标不同：Preload 是让浏览器立即获取当前导航必需的关键资源，而 Prefetch 是让浏览器在空闲时提前下载将来可能用到的资源。用错场景会导致性能下降或浪费带宽。

Preload 告诉浏览器：“这个资源马上就要用，别等解析完 HTML 再发起请求”。它强制提前触发 fetch，且不阻塞页面渲染，适合 CSS、关键字体、首屏 hero 图、核心 JS 模块等。

必须通过 <link rel="preload"> 声明，且需指定 as 属性（如 as="script"、as="font"），否则浏览器无法确定优先级和 CORS 行为
不支持跨域匿名请求的资源（如字体）要加 crossorigin 属性，否则会重复请求
不能滥用：对非首屏、非关键资源 Preload 可能抢占带宽，反而拖慢主内容加载

Prefetch 针对的是用户“下一步可能访问”的内容，比如下一页的 JS、某个路由组件、搜索建议接口的 JSON 模板。浏览器只在空闲时（CPU 和网络负载低）才发起请求，且优先级极低。

javascript-pro

专注现代 ECMAScript、异步编程、性能优化和全栈的 JavaScript 专家，适用于现代开发

下载

常用 <link rel="prefetch"> 声明，通常放在中，也可由 JS 动态注入
适用于 SPA 中按需路由（如点击“订单页”前 prefetch 对应 chunk）、登录后 prefetch 个人中心资源等场景
注意兼容性：Safari 对 prefetch 支持较弱（iOS 16.4+ 才稳定），部分安卓 WebView 可能忽略；可降级为 IntersectionObserver 触发懒加载

它们解决的问题层级不同：

例如：CDN 域名用 preconnect，首屏大图用 preload as="image"，下一屏组件包用 prefetch as="script"。

硬编码 link 标签不够智能，实际项目中常结合用户行为动态触发：

鼠标悬停导航项 200ms 后 prefetch 对应页面资源
表单输入完成且焦点离开时 prefetch 搜索建议接口响应模板
利用 document.createElement('link') + rel="preload" 在 React useEffect 或 Vue onMounted 中按需注入
服务端渲染（SSR）时根据首屏数据预判，生成对应 preload 标签，避免客户端 JS 竞争资源

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南