async 适合互不依赖的第三方脚本，下载完立即执行，不保证顺序；defer 适合主业务逻辑，DOM 构建完成后按书写顺序执行，可安全操作 DOM。
用好 async 和 defer 就是让脚本不卡页面，同时按需、有序地执行。
async 适合互不依赖的第三方脚本
它让脚本边下载边解析 HTML，一下载完就立刻执行，不管 DOM 建没建好。所以它不能操作 document，也不能依赖其他脚本。
- 典型场景：统计代码（如 Google Analytics）、广告 SDK、错误监控脚本
- 多个
async脚本谁先下完谁先跑，顺序不可控，别写成 A 依赖 B 的关系 - 只对外部脚本（带
src）有效；内联脚本加了也无效
defer 更适合主业务逻辑和 DOM 操作
它也是边下载边解析 HTML，但会等到整个 HTML 解析完成、DOM 树构建完毕后，再按顺序一个个执行——这意味着你能安全调用 document.getElementById 或绑定事件。
- 推荐把核心 JS（如初始化菜单、表单校验、轮播图）都加上
defer - 多个
defer脚本一定按它们在 HTML 中的书写顺序执行 - 执行时机在
DOMContentLoaded之前，但晚于 HTML 解析结束
别混用，也别放错位置
async 脚本放在 <head> 或 <body> 开头都没问题，但它可能比 DOM 还早执行，放底部反而容易出错；defer 脚本放哪儿都行，浏览器会自动等 DOM 就绪。
立即学习“前端免费学习笔记（深入）”；
- 避免一个页面里既有
async又有defer脚本相互依赖 - 不要给内联脚本加这两个属性（HTML5 规范不支持）
- 如果用了
type="module"，它默认自带defer行为，无需重复加
对比传统 script 标签更直观
没加任何属性的 <script src="xxx.js"></script> 是最慢的：它会停掉 HTML 解析，等脚本下完、执行完才继续——用户看到白屏时间最长。
- 加
async：不阻塞解析，但执行时机不可控 - 加
defer：不阻塞解析，执行时机可控、安全 - 两者都不阻塞渲染，但只有
defer能稳稳操作 DOM
