async适合独立无依赖脚本(如统计代码),下载完立即执行且不保证顺序;defer适合需操作DOM且有依赖的初始化脚本,按序执行于DOM构建完毕后。

Async 和 defer 都是用来优化脚本加载的,但它们的执行时机和适用场景完全不同:async 适合完全独立、不依赖其他脚本的资源(比如统计代码),defer 更适合需要按顺序执行、且依赖 DOM 的初始化脚本。
async:异步下载 + 下载完立即执行
浏览器遇到带 async 的 script 标签时,会立即开始下载脚本,同时继续解析 HTML。一旦下载完成,就**立刻中断 HTML 解析,执行该脚本**——不管它在文档中什么位置、也不管其他脚本是否已加载。
- 多个 async 脚本的执行顺序不确定,谁先下完谁先执行
- 不保证执行顺序,也不等待 DOM 构建完成
- 适合互不依赖的第三方脚本,如 Google Analytics、广告 SDK
defer:异步下载 + DOM 解析完再按序执行
带 defer 的脚本也会异步下载,但浏览器会**等整个 HTML 解析完成(即 DOM 构建完毕)、但在触发 DOMContentLoaded 事件之前**,才按它们在文档中出现的顺序依次执行。
- 多个 defer 脚本一定按书写顺序执行
- 能安全操作 DOM,因为此时 DOM 已就绪
- 适合主业务逻辑、模块初始化等需要 DOM 且有依赖关系的脚本
普通 script(无属性):阻塞式加载与执行
默认行为是同步阻塞:浏览器暂停 HTML 解析,下载并执行脚本后才继续。这是性能最差的方式,尤其对首屏渲染影响明显。
立即学习“前端免费学习笔记(深入)”;
- 放在
中容易导致白屏时间变长 - 除非脚本极小或必须同步执行(如某些 polyfill 检测逻辑),否则应避免
怎么选?看三个关键点
- 是否依赖其他脚本?→ 依赖就用 defer,不依赖可考虑 async
- 是否需要操作 DOM?→ 需要就用 defer 或放
前 - 是否可以晚于页面交互?→ 统计、上报类脚本通常用 async 即可



















