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当

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

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

相关推荐
止观止30 分钟前
Remix框架:高性能React全栈开发实战
前端·react.js·前端框架·remix
萌萌哒草头将军1 小时前
🚀🚀🚀 深入探索 Node.js v22.18.0 新特性;默认支持运行 ts 文件了!
前端·typescript·node.js
安心不心安1 小时前
React ahooks——副作用类hooks之useThrottleFn
前端·javascript·react.js
秋田君1 小时前
Vue3 + WebSocket网页接入弹窗客服功能的完整实现
前端·javascript·websocket·网络协议·学习
浪里行舟1 小时前
一网打尽 Promise 组合技:race vs any, all vs allSettled,再也不迷糊!
前端·javascript·vue.js
Antonio9152 小时前
【网络编程】WebSocket 实现简易Web多人聊天室
前端·网络·c++·websocket
tianzhiyi1989sq3 小时前
Vue3 Composition API
前端·javascript·vue.js
今禾3 小时前
Zustand状态管理(上):现代React应用的轻量级状态解决方案
前端·react.js·前端框架
用户2519162427113 小时前
Canvas之图形变换
前端·javascript·canvas
今禾3 小时前
Zustand状态管理(下):从基础到高级应用
前端·react.js·前端框架