一张图搞懂 preload、prefetch、defer、async 的区别

Posted on

浏览器里经常遇到这四个关键词，但它们的区别很容易混淆。一句话版先记住：

  • preload：当前页马上要用，高优先级先下载。
  • prefetch：下一页可能要用，低优先级闲时下载。
  • defer：JS 下载不阻塞解析，DOM 完成后按顺序执行。
  • async：JS 下载不阻塞解析，下载完立刻执行，顺序不可控。

下面分别展开。

资源提示类：preload / prefetch

这俩都是 <link> 标签上的 rel 属性，告诉浏览器「提前搞个资源」。

preload

1
2
3
<link rel="preload" href="font.woff2" as="font" crossorigin>
<link rel="preload" href="hero.jpg" as="image">
<link rel="preload" href="critical.js" as="script">
  • 高优先级：浏览器会把它当成「当前页面马上要用」的关键资源，在渲染早期就下载。
  • 下载完不执行，只是放进缓存。真正用到的时候（比如 <img src="hero.jpg">）直接从缓存取。
  • 适合：关键字体、首屏大图、核心 JS/CSS。

⚠️ 用错会浪费带宽——不要 preload 那些当前页根本用不上的东西。

prefetch

1
2
<link rel="prefetch" href="/next-page.html">
<link rel="prefetch" href="next-page.css">
  • 低优先级：浏览器在网络空闲时才下载。
  • 同样下载完不执行，只是预热缓存，给下一个页面准备的。
  • 适合：用户大概率会点的下一跳页面资源。

一图对比

1
2
3
           优先级    时机            用途           执行时机
preload     高       当前页渲染早期   当前页关键资源   不执行，仅缓存
prefetch    低       网络空闲时       下一页候选资源   不执行，仅缓存

Script 类：defer / async

这俩是 <script> 标签的属性，解决的是「JS 会阻塞 HTML 解析」的问题。

没有属性时

1
<script src="blocking.js"></script>

浏览器解析到这行 → 暂停 DOM 解析 → 下载 JS → 执行 JS → 继续解析。页面明显会卡。

async

1
2
<script src="a.js" async></script>
<script src="b.js" async></script>
  • 下载阶段不阻塞 DOM 解析。
  • 下载完成那一刻，不管 DOM 解析到哪了，立刻暂停解析，执行脚本。
  • 多个 async 脚本谁先下载完谁先执行，顺序完全不可控。
  • 适合：独立的、不依赖其他脚本的第三方脚本（统计、广告等）。

defer

1
2
<script src="a.js" defer></script>
<script src="b.js" defer></script>
  • 下载阶段不阻塞 DOM 解析。
  • 下载完不立即执行，等到 HTML 解析完成、DOMContentLoaded 之前，按书写顺序依次执行。
  • 适合：有依赖关系的脚本、需要操作 DOM 的脚本。

时序对比

1
2
3
4
5
HTML 解析:  ──|──────────────────────|── DOMContentLoaded
              │                      │
无属性:       │ 下载 → 执行 (阻塞)    │
async:        │ 下载... (并行) → 下载完立刻执行
defer:        │ 下载... (并行)        │ ← 此时按顺序执行

一张表收齐

关键字 载体 谁用？ 阻塞？ 执行/优先级 典型场景
preload <link rel> 当前页 — 高优先级下载，只缓存不执行 关键字体、首屏图
prefetch <link rel> 下一页候选 — 低优先级闲时下载，只缓存不执行 用户大概率跳转的页面
defer <script> 当前页 JS 下载不阻塞 DOM 完成后按顺序执行 有依赖链的业务脚本
async <script> 当前页 JS 下载不阻塞 下载完立刻执行，顺序随机 独立第三方脚本（GA等）

选型口诀

  1. 当前页马上要用 → preload，下一页才要用 → prefetch。
  2. JS 有顺序依赖 → defer，独立无依赖 → async。
  3. 字体记得加 crossorigin，否则 preload 了也白预载。
  4. 不要滥用 preload——它抢带宽，多了反而拖慢真正的关键资源。

记住这四句话，下次面试或做性能优化就不会再混了。