async让脚本下载不阻塞html解析，但下载完成立即执行、不等dom就绪、不保序；仅适用于完全独立、无依赖、不操作dom的外部脚本，如统计埋点。
async 属性到底让脚本怎么“异步”
它不阻塞 HTML 解析，但一旦下载完成就立即执行，不管 DOM 是否就绪、其他脚本是否在排队。这意味着 async 脚本的执行时机不可预测，也不保证顺序——哪怕你在 HTML 里写在前面，它也可能比后面加载的脚本更晚执行。
适用场景很明确：独立、无依赖、不操作 DOM 的脚本，比如分析统计（如 Google Analytics）、广告 SDK、埋点上报。
-
async只对**外部脚本**生效（即带有src的<script></script>），内联脚本加了也无效 - 多个
async脚本之间**不保证执行顺序**，哪怕它们的src在 HTML 中前后排列 - 它和
defer完全不同：defer等 DOM 解析完才按序执行；async是“谁先下完谁先跑”
常见错误：把 async 当 defer 用
最典型的问题是：给一个依赖 jQuery 或操作 document.body 的脚本加了 async，结果报错 ReferenceError: $ is not defined 或 Cannot read property 'appendChild' of null。
这是因为脚本可能在 里就触发执行，而此时 还没解析，甚至 jQuery 自身都还没下载完。
- 如果你的脚本需要访问 DOM 元素，别用
async——改用defer，或把脚本移到前 - 如果脚本依赖另一个外部库（比如 A.js 依赖 B.js），
async无法保证 B 先执行，必须用模块化方案（如 ES modules +import）或手动管理加载顺序 - 调试时注意：Chrome DevTools 的 Network 面板里，
async脚本的 “Initiator” 通常是parser，但执行时间线可能跳得很早
async 和动态 import() 的区别在哪
async 是 HTML 层级的加载策略，控制的是整个 <script src="..."></script> 的行为；而 import() 是 JS 运行时的动态导入，返回 Promise，能精确控制加载时机和错误捕获。
比如你想等用户点击按钮后再加载某个功能模块，async 做不到——它一进页面就开始下载。这时候就得用：
button.addEventListener('click', async () => {
const { renderChart } = await import('./chart.js');
renderChart();
});
-
async无法做条件加载、按需加载、错误重试 -
import()支持 code splitting，配合 webpack/vite 能自动切包；async脚本始终是完整文件加载 - 兼容性注意：
async属性 IE10+ 支持；import()需要现代浏览器或打包工具降级处理
检查 async 是否生效的实操方法
别光看代码写了 async 就以为万事大吉。实际效果要看网络请求和执行时序。
- 打开 Chrome DevTools → Network → 切到
JS类型，刷新页面，观察脚本的Start Time是否明显早于DOMContentLoaded时间点 - 在脚本开头加
console.log('loaded:', Date.now())，再对比document.addEventListener('DOMContentLoaded', ...)的时间戳 - 禁用缓存后反复刷新，确认脚本执行顺序是否随机变动（这是
async的标志性行为） - 如果发现脚本仍阻塞解析，检查是否误写了
type="module"—— 模块脚本默认表现类似defer，async属性会被忽略
真正难的不是加个 async 属性，而是判断这个脚本到底适不适合异步加载——它依赖什么、修改什么、是否容错。很多时候，多花两分钟理清依赖链，比盲目加属性更省事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
