async脚本执行时document.getElementById常返回null，因其下载完立即执行、不等待DOM构建完成；正确做法是依赖DOM的脚本用defer，纯上报类脚本才用async。
async 脚本执行时 document.getElementById 为 null 怎么办
直接结论：async 不适合任何依赖 DOM 的初始化逻辑，包括编辑器、表单绑定、元素样式修改等。它下载完就执行，完全不等 DOM 构建完成。
典型现象是控制台报 Cannot read property 'addEventListener' of null 或 document.getElementById('xxx') is null，但页面明明有那个元素。
- 把
<script async src="app.js"></script>改成<script defer src="app.js"></script>是最稳妥的修复 - 如果必须用 async（比如埋点 SDK），确保它内部不操作 DOM，也不依赖其他脚本导出的变量
- 内联脚本（
<script>...</script>）加async无效，浏览器会忽略——它只对带src的外链脚本起作用
defer 脚本为什么还是拿不到元素
defer 确保脚本在 DOM 解析完成后执行，但不是万能解药。常见失效场景是：脚本顺序错乱、跨域资源缺失、或初始化代码没封装好。
例如 Monaco 编辑器加载失败时，控制台可能只显示 MonacoEnvironment is not defined，而不是具体哪一行出错。
立即学习“前端免费学习笔记（深入）”；
- 所有带
defer的脚本必须按依赖顺序排列：vs/loader.js在前，monaco-editor/min/vs/editor/editor.main.js在后 - CND 上的资源（如
https://cdn.jsdelivr.net/npm/monaco-editor@0.48.0/min/vs/loader.js）必须加crossorigin="anonymous"，否则 Chrome 不报详细错误 - 初始化代码不能写在
defer脚本外部——比如<script defer src="monaco.js"></script><script>monaco.editor.create(...)</script>这种写法必然失败，因为第二个脚本不 defer，且执行时机不可控
DOMContentLoaded 事件里操作 DOM 还出错？检查这三点
写了 document.addEventListener('DOMContentLoaded', ...) 还报 null，大概率不是时机问题，而是别的干扰因素。
尤其在 SPA 或动态插入内容的场景下，DOMContentLoaded 只保证初始 HTML 解析完成，不保证后续 JS 插入的节点已存在。
- 确认目标元素是否由 JS 动态生成（比如 Vue 渲染的组件、AJAX 返回的表格行），这种情况下得监听对应容器的
MutationObserver，而不是靠全局 DOM 就绪事件 - 检查是否有多个同名 ID：HTML 规范要求 ID 唯一，但实际开发中常出现重复，
document.getElementById只返回第一个，可能不是你想要的那个 - 某些框架（如 Svelte、Qwik）会在 hydration 前禁用 DOM 访问，此时即使
DOMContentLoaded已触发，真实节点可能仍被占位符替代
ESM 模块脚本要不要加 defer
不用。type="module" 的脚本天然具有 defer 行为：并行下载、DOM 解析完成后按顺序执行、自动处理依赖拓扑。
但它带来新约束：不能用 document.write，也不能在模块顶层直接调用 monaco.editor.create()——因为此时 monaco 可能还没通过 import 加载完成。
- 正确写法是用动态导入：
import('monaco-editor').then(m => m.editor.create(...)) - 如果用了
import静态引入，确保路径可访问且无 CORS；本地双击打开 HTML 文件时，file:// 协议下 ESM 默认被禁用，必须起本地服务（如npx serve） - ESM 不支持
nomodulefallback 与defer混用，二者语义冲突，浏览器会忽略 defer
crossorigin，Chrome DevTools 里连堆栈都看不到，只能靠 Network 面板查 status code 和响应体。 
