rel="prefetch"仅在当前页onload后低优先级预取下一页高概率访问的静态资源，如详情页html、路由专用js/css；不可用于首屏资源或动态url，需同源或配cors，且必须写入并指定as属性。

用 rel="prefetch" 提前下载下一页资源，是提升多页应用体验的关键手段。它不抢当前页面带宽，只在浏览器空闲时悄悄拉取后续可能用到的脚本、样式或 HTML，用户点进下一页时几乎秒开。

哪些资源适合 prefetch

只预取用户行为路径中高概率访问的资源：

• 下一页的 HTML 页面（如列表页 → 详情页）
• 下一页专用的 JS 模块（如 product-detail.js）
• 下一页用到的 CSS（非全局样式，避免污染当前渲染）
• 用户完成表单后跳转页的静态资源（如提交成功页的图标、字体）

正确写法与注意事项

prefetch 是声明式提示，不是强制加载，需配合合理时机和资源粒度：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

• 写在 中即可，无需 JS 触发；示例：
  <link rel="prefetch" href="/detail.html">
<link rel="prefetch" href="/js/product-detail.js">
• 优先级低于 preload，不会影响当前页面关键资源加载
• 资源必须与当前页面同源，或服务端明确支持 CORS（跨域 prefetch 需 crossorigin 属性）
• 避免预取整包 bundle 或未拆分的巨型 JS——应基于路由或功能模块做细粒度拆分

结合用户行为动态触发

静态 prefetch 覆盖有限，更精准的做法是监听用户意图：

• 鼠标悬停在“查看详情”按钮 300ms 后，动态插入 prefetch 标签
• 滚动到底部 80% 时，预取下一页列表数据或分页 JS
• 表单输入完成且校验通过后，预取提交结果页资源
• 使用 document.createElement('link') 创建并 append 到 head，确保尽早生效

与 preload、preconnect 协同使用

单一 prefetch 效果有限，组合策略更有效：

• 对目标域名先 rel="preconnect"，减少 DNS 和 TLS 开销
• 下一页核心 JS 用 rel="modulepreload"（ESM 场景）或 rel="preload"（传统 script）进一步提权
• prefetch 的 HTML 或 JS 进入缓存后，后续导航直接复用，无需重复请求

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