async立即下载并执行，可能在dom解析完成前运行；defer并行下载但延迟至dom解析完成后、domcontentloaded前按序执行。
async 和 defer 都不阻塞 HTML 解析，但执行时机完全不同
浏览器遇到 <script async></script> 会立即开启下载，下载完立刻执行，哪怕 DOM 还没解析完；而 <script defer></script> 虽然也并行下载，但必须等到整个 HTML 解析结束、DOMContentLoaded 触发前才执行。
这意味着：async 脚本可能在 还没开始解析时就运行，此时调用 document.getElementById 很可能返回 null；defer 脚本则能安全访问完整 DOM 树。
-
async不保证执行顺序 ——analytics.js和ads.js谁先下完谁先跑 -
defer严格按 HTML 中声明顺序执行 ——jquery.js一定在app.js之前执行 - 两者都只对带
src的外部脚本生效；内联脚本加async或defer会被忽略
什么时候该用 async：独立、无依赖、可随时执行的脚本
典型场景是埋点统计、广告 SDK、错误监控等 —— 它们不操作 DOM，也不依赖其他 JS，早执行晚执行不影响功能。
比如 Google Analytics 的加载：
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
- 脚本内容不读写 DOM，也不调用其他 JS 模块
- 多个
async脚本之间没有调用关系 - 不能在其中使用
document.write（会清空当前文档） - 如果脚本本身有副作用（如修改全局变量），且被其他脚本依赖，则
async会导致不可预测的竞态
什么时候该用 defer：需要 DOM 就绪或存在执行顺序要求的脚本
适用于初始化逻辑、UI 组件挂载、依赖 jQuery 或 Vue 等框架的入口文件。只要脚本里要查元素、绑定事件、或依赖前面加载的库，就必须用 defer。
例如：
<script defer src="lib/jquery.min.js"></script><br><script defer src="js/main.js"></script>
-
main.js里用了$("#header").show()→ 必须等 DOM 就绪 → 必须defer - 两个
defer脚本即使网络延迟不同，也会按标签顺序串行执行 - 如果页面中混用
defer和普通同步脚本（没加属性），后者仍会阻塞解析，破坏整体优化效果 -
defer脚本不会触发load事件，但会在DOMContentLoaded前完成
容易被忽略的兼容性和陷阱
async 和 defer 在 IE9+、所有现代浏览器中都支持，但行为细节仍有差异：IE10/11 对多个 defer 脚本的顺序保证不如 Chrome 稳定；Safari 曾在某些版本中把 defer 脚本误放到 load 之后执行。
- 动态插入的
<script></script>元素默认自带async=true，即使你没写 —— 想让它按顺序执行？得显式设script.async = false -
document.write在async或defer脚本里调用会直接报错或清空页面 - 服务器端渲染（SSR）场景下，
defer脚本可能比服务端吐出的 DOM 还早执行（尤其配合流式传输时），需加防护判断 - 不要给同一个脚本同时加
async和defer—— 浏览器会优先采用async，defer被忽略
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
