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
(相当于同步脚本)
- CSS:
-
示例网络瀑布流:
textHTML > preload-CSS > preload-JS > 其他资源
prefetch:
-
优先级固定为
Lowest
-
示例网络瀑布流:
textHTML > 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当:
- 资源在未来可能使用
- 不需要立即加载的非关键资源
- 想为后续导航提前缓存
通过合理组合这两种技术,可以显著提升页面加载性能和用户体验。