Prefetch 和 Prerender 是什么
1.预加载（prefetch）
定义：prefetch 是一种资源预加载技术，利用浏览器空闲时间提前获取用户未来可能需要的资源（如脚本、样式表、图片等），并缓存到本地，但不执行或渲染这些资源
核心功能：
- 加载非关键资源（不影响当前页面渲染的资源）；
- 适用于预测用户可能访问的下一个页面资源；
- 通过缓存提升后续导航速度；
- 不阻塞页面主线程，优先级较低
rel=“subresource”表示当前页面必须加载的资源，应该放到页面最顶端先加载，有最高的优先级； rel="prefetch"表示当subresource所有资源都加载完后，开始预加载这里指定的资源，有最低的优先级；
拓展：DNS Prefetch
定义：DNS Prefetch 是一种优化技术，通过提前解析域名对应的 IP 地址并缓存结果，减少后续请求时的 DNS 解析时间；（就是提前dns解析获取ip地址）
用途：适用于页面中存在跨域资源（如第三方 CDN 资源、统计脚本、字体文件等），提前解析这些域名，改善资源连接的效率
例子： 页面中使用了 Google Fonts 或第三方统计脚本，需提前解析域名。
<!-- 预解析第三方域名 -->
<link rel="dns-prefetch" href="//fonts.googleapis.com">
<link rel="dns-prefetch" href="//analytics.example.com">
后续请求这些域名的资源时，跳过 DNS 查询步骤，直接使用缓存的 IP 地址；
DNS Prefetch 验证：通过 chrome://net-internals/#dns 可查看 DNS 缓存状态，确认域名是否预解析成功
| 特性 | Prefetch | DNS Prefetch |
|---|---|---|
| 优化目标 | 资源下载 | DNS 解析延迟 |
| 操作层级 | 网络请求（资源内容） | 域名解析（IP 地址） |
| 优先级 | 低（浏览器空闲时触发） | 高（尽早解析） |
| 典型场景 | 预加载下一页的 JS/CSS 文件 | 预解析第三方域名（如 CDN） |
| 资源消耗 | 较高（涉及资源下载） | 极低（仅解析 DNS） |
2.预渲染（prerender）
需要考虑兼容性，当前chrome浏览器支持
定义：prerender 是一种页面级预加载技术，会提前加载并渲染整个目标页面的 HTML、CSS、JavaScript 等资源，甚至模拟用户访问行为，将页面完全渲染到隐藏的标签页中
核心功能：
- 预渲染整个页面（包括执行 JS 和 CSS）；
- 适用于用户极可能访问的下一个页面（如分页的“下一页”）；
- 用户在跳转时可立即展示完整页面，实现“秒开”效果；
- 需要更多带宽和计算资源，需谨慎使用。
两者的区别
| 特性 | Prefetch | Prerender |
|---|---|---|
| 作用范围 | 单资源（如 JS、CSS、图片） | 完整页面（HTML + 子资源） |
| 执行行为 | 仅下载资源，不执行 | 下载资源并执行 JS/CSS |
| 优先级 | 低（空闲时加载） | 高（强制加载并渲染） |
| 适用场景 | 预加载未来可能用到的资源 | 预渲染用户极可能访问的页面 |
| 带宽消耗 | 低 | 高 |
例子
1. Prefetch 使用场景
- 场景：用户鼠标悬停在导航链接时，预加载目标页面的关键资源。
- 代码示例：
<!-- 预加载一个 CSS 文件 -->
<link rel="prefetch" href="next-page.css" as="style">
<!-- 预加载一个 JavaScript 文件 -->
<link rel="prefetch" href="next-page.js" as="script">
<!-- 预加载一个图片 -->
<link rel="prefetch" href="next-page-banner.jpg" as="image">
2. Prerender 使用场景
- 场景：用户浏览商品列表页时，预渲染排名靠前的商品详情页。
- 代码示例：
<!-- 预渲染一个完整页面 -->
<link rel="prerender" href="https://example.com/product-detail-1">
注意事项
Prefetch：
- 跨域资源需设置
crossorigin属性； - 避免滥用，否则可能浪费带宽。
Prerender：
- 仅 Chrome 和 IE 支持6；
- 需确保目标页面确实会被用户访问，否则成本过高。
验证效果
在 Chrome DevTools 的 Network 面板中：
- Prefetch：资源会显示为
Preload类型的请求，优先级标记为Low； - Prerender：会触发完整的页面请求链，并在
Application面板的Prerender部分查看状态。
