preload 与 prefetch 深度比较

`preload` 与 `prefetch` 深度比较

<link rel="preload"> 和 <link rel="prefetch"> 都是现代浏览器提供的资源提示(Resource Hints)，但它们在加载策略和使用场景上有显著区别。以下是两者的详细对比：

核心区别对照表

特性	preload	prefetch
加载意图	当前页面必定使用的关键资源	未来页面/操作可能使用的资源
下载优先级	高优先级（与当前页面渲染相关）	最低优先级（浏览器空闲时加载）
触发时机	HTML解析时立即触发	浏览器空闲时触发
缓存行为	短期缓存（随页面生命周期）	长期缓存（通常5分钟以上）
资源类型	必须指定`as`属性（script/style等）	可不指定`as`（但推荐指定）
使用时限	Chrome中需在3秒内使用（否则警告）	无使用时间限制
适用场景	首屏关键CSS/JS、字体、图片	下一个页面的资源、非关键功能代码

工作原理图解

text 复制代码

PRELOAD 工作流:
[HTML解析] → [立即高优先级下载] → [当前页面使用]
                      ↑
                阻塞其他非关键资源

PREFETCH 工作流:
[浏览器空闲] → [低优先级下载] → [存入长期缓存]
                                   ↓
                              [未来页面/操作使用]

具体差异分析

1. 加载优先级对比

preload：

优先级等同于对应资源类型的默认最高级
- CSS：Highest
- 字体：Highest
- 脚本：High（相当于同步脚本）

示例网络瀑布流：

text 复制代码

HTML > preload-CSS > preload-JS > 其他资源

prefetch：

优先级固定为Lowest

示例网络瀑布流：

text 复制代码

HTML > CSS > JS > 图片... [空闲时] > prefetch资源

2. 浏览器处理方式

preload：

html 复制代码

<!-- 浏览器会立即以高优先级请求 -->
<link rel="preload" href="critical.js" as="script">
<!-- 如果3秒内没有使用，Chrome会警告： -->
<!-- The resource https://example.com/critical.js was preloaded using link preload but not used within a few seconds... -->

prefetch：

html 复制代码

<!-- 浏览器会在空闲时悄悄下载 -->
<link rel="prefetch" href="next-page.js" as="script">
<!-- 即使用户永远不访问下一页，也不会产生警告 -->

3. 实际应用场景

preload适用场景：

首屏关键CSS/JS
自定义字体文件
首屏大图（Hero Image）
即将执行的异步模块

prefetch适用场景：

下一个路由页面的资源
用户可能点击的功能模块（如购物车、编辑器）
分析统计脚本等非关键资源

代码示例对比

正确使用preload

html 复制代码

<!-- 首页关键CSS -->
<link rel="preload" href="critical.css" as="style" onload="this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="critical.css"></noscript>

<!-- 首屏必须的字体 -->
<link rel="preload" href="font.woff2" as="font" crossorigin>

<!-- 即将使用的组件 -->
<link rel="preload" href="product-carousel.js" as="script">

正确使用prefetch

html 复制代码

<!-- 下一个页面资源 -->
<link rel="prefetch" href="next-page-bundle.js" as="script">

<!-- 用户可能查看的图片 -->
<link rel="prefetch" href="product-zoom.jpg" as="image">

<!-- 非首屏功能 -->
<link rel="prefetch" href="analytics.js" as="script">

混合使用策略

最佳实践是组合使用两者：

html 复制代码

<head>
  <!-- 当前页面关键资源 -->
  <link rel="preload" href="main.css" as="style">
  <link rel="preload" href="main.js" as="script">
  
  <!-- 下一页可能用到的资源 -->
  <link rel="prefetch" href="checkout.js" as="script">
  <link rel="prefetch" href="checkout.css" as="style">
</head>

常见误区

错误替换：

html 复制代码

<!-- 错误：本该preload的关键资源用了prefetch -->
<link rel="prefetch" href="above-the-fold.css" as="style">

<!-- 错误：本该prefetch的非关键资源用了preload -->
<link rel="preload" href="next-page.js" as="script">

缺少as属性：

html 复制代码

<!-- 可能被浏览器忽略 -->
<link rel="preload" href="asset.js">

过度预加载：

html 复制代码

<!-- 同时preload太多资源会适得其反 -->
<link rel="preload" href="1.css" as="style">
<link rel="preload" href="2.css" as="style">
...
<link rel="preload" href="10.css" as="style">

性能影响实测数据

根据Google案例研究：

优化方式	LCP提升	FCP提升
正确preload关键CSS	20-30%	15-25%
prefetch下一页资源	无直接影响	但可减少后续导航延迟60-70%

浏览器兼容性

特性	Chrome	Firefox	Safari	Edge
preload	50+	56+	11.1+	17+
prefetch	8+	2+	5+	12+

总结选择策略

用preload当：
- 资源在当前页面必定使用
- 需要高优先级加载
- 资源对核心用户体验至关重要
用prefetch当：
- 资源在未来可能使用
- 不需要立即加载的非关键资源
- 想为后续导航提前缓存

通过合理组合这两种技术，可以显著提升页面加载性能和用户体验。