preload 与 prefetch 深度比较

preloadprefetch 深度比较

<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>

常见误区

  1. 错误替换

    html 复制代码
    <!-- 错误:本该preload的关键资源用了prefetch -->
    <link rel="prefetch" href="above-the-fold.css" as="style">
    
    <!-- 错误:本该prefetch的非关键资源用了preload -->
    <link rel="preload" href="next-page.js" as="script">
  2. 缺少as属性

    html 复制代码
    <!-- 可能被浏览器忽略 -->
    <link rel="preload" href="asset.js">
  3. 过度预加载

    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+

总结选择策略

  1. 用preload当

    • 资源在当前页面必定使用
    • 需要高优先级加载
    • 资源对核心用户体验至关重要
  2. 用prefetch当

    • 资源在未来可能使用
    • 不需要立即加载的非关键资源
    • 想为后续导航提前缓存

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

相关推荐
江城开朗的豌豆几秒前
聊聊useEffect:谁说副作用不能“优雅”?
前端·javascript·react.js
!执行2 分钟前
开发electron时候Chromium 报 Not allowed to load local resource → 空白页。
前端·javascript·electron
top_designer6 分钟前
告别“复制粘贴”式换肤:我用Adobe XD组件变体与CC库,构建多品牌设计系统架构
前端·ui·adobe·系统架构·ux·设计师·adobe xd
赛博切图仔21 分钟前
面试手写 Promise:链式 + 静态方法全实现
前端·javascript·面试
掘金安东尼26 分钟前
互联网不再由 URL 为核心入口
前端·人工智能·github
Moment29 分钟前
面试官:用户访问到一个不存在的路由,如何重定向到404 Not Found的页面 ❓❓❓
前端·javascript·面试
前端小巷子32 分钟前
深入 Vue3 computed
前端·vue.js·面试
未来的旋律~43 分钟前
Web程序设计
前端
全宝43 分钟前
实现一个有意思的眼球跟随卡片
前端·javascript·css
全宝1 小时前
用css做一枚拟物风格的按钮
前端·css·svg