async属性仅控制脚本加载异步，不保证DOM就绪；必须通过document.readyState或DOMContentLoaded确保DOM可用后再绑定事件，否则会因元素不存在而报错。
不能靠 async 属性直接“异步绑定按钮事件”——它只控制脚本加载执行时机，不解决 DOM 尚未就绪的问题。真正要做的，是让事件绑定逻辑在 DOM 可用后安全运行，同时不阻塞页面渲染。
async 脚本里直接查 button 会报 Cannot read property 'addEventListener' of null
这是最常见错误现象：你写了 <script async src="init.js"></script>，然后在 init.js 里写 document.getElementById('my-btn').addEventListener(...)，但浏览器报错说找不到元素。
原因很直接：async 脚本下载完就立刻执行，而此时 HTML 还没解析完，#my-btn 根本不存在。
- async 不等于“等 DOM 加载完再执行”，它只表示“下载不阻塞，执行不保证顺序”
- 哪怕脚本体积很小、网络很快，也不能假设它一定在
<body>解析之后才跑 - IE10+ 支持
async，但行为更不可控；现代浏览器也仅保证“下载异步”，不承诺执行时机
正确做法：用 DOMContentLoaded 或 document.readyState 守住安全边界
无论脚本怎么加载，绑定事件前必须确认 DOM 已就绪。推荐用 document.readyState 判断，比监听 DOMContentLoaded 更轻量、兼容性更好（IE9+）。
立即学习“前端免费学习笔记（深入）”；
示例 init.js 内容：
function bindButton() {
const btn = document.getElementById('my-btn');
if (btn) {
btn.addEventListener('click', () => alert('clicked'));
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', bindButton);
} else {
bindButton();
}
- 不依赖
window.onload（等资源全加载完，太晚） - 不依赖
setTimeout（不确定延多久，不可靠） - 避免用
defer混搭async（执行顺序失控，容易引发$ is not defined类错误）
想真正“按需”绑定？用 import() 动态加载 + 手动触发
如果按钮点击才需要某段逻辑（比如图表渲染），不要在初始化时就加载全部 JS。用 import() 实现真正的按需异步绑定：
document.getElementById('chart-btn').addEventListener('click', async () => {
try {
const { renderChart } = await import('./chart.js');
renderChart();
} catch (err) {
console.error('Failed to load chart:', err);
}
});
-
import()是动态导入，支持 code splitting，Webpack/Vite 会自动切包 - 它不会像
async脚本那样提前加载无用代码 - 注意：不支持 IE，旧环境需用打包工具降级（如 Babel + dynamic-import-polyfill）
- 不能做条件加载（比如
if (env === 'prod') import('./a.js')），语法上不允许
内联脚本加 async 完全无效，别白费力气
有人写 <script async>document.getElementById('x').onclick = ...</script>，结果发现照样报错或没反应。
因为：async 属性只对带 src 的外部脚本生效；内联脚本加了 async，浏览器直接忽略，当作普通同步脚本执行——依然会因 DOM 未就绪而失败。
- ✅ 正确：
<script async src="bind.js"></script> - ❌ 错误：
<script async>...</script>或<script src="bind.js" async="true"></script>（async是布尔属性，不接受值）
核心就一点：async 控制加载，不控制时机；DOM 就绪与否，得自己判断。漏掉这层检查，再“异步”的写法也只是在报错边缘反复试探。
