必须用 defer。因为只有 defer 能确保脚本执行时 DOM 已完整构建，避免 getElementById 返回 null；async 执行时机不可控，可能早于或晚于 DOM 就绪；内联脚本加 defer 无效；type="module" 脚本自带 defer 语义。
脚本操作DOM却报document.getElementById返回null，该用defer还是async
必须用 defer。这不是“推荐”，而是浏览器行为强制保证：只有 defer 脚本能确保执行时 document.body、document.head 和所有已声明的元素节点全部就位。常见错误如 TypeError: Cannot read property 'addEventListener' of null，基本就是把本该 defer 的初始化逻辑错配了 async 或没加属性。
-
defer脚本一定在 HTML 解析完成、DOMContentLoaded触发前执行，此时 DOM 树已完整构建 -
async脚本一下载完就中断解析执行，可能发生在<body>标签都还没出现的时候 - 多个
defer脚本严格按 HTML 中书写顺序执行，适合「库 + 业务」链式依赖，例如：<script src="vue.js" defer></script>后接<script src="app.js" defer></script> -
defer对没有src的内联脚本无效——<script defer>init();</script>中的init()会立刻运行，属性被忽略
async脚本为什么总在DOMContentLoaded之前或之后乱跑
async 没有固定执行时机，它只认“谁先下完谁先跑”，和 DOM 构建进度无关。它可能在 <html> 刚开始解析时就执行（如果脚本极小且 CDN 极快），也可能在 </body> 闭合后才执行（如果网络卡顿）。这种不可控性不是 bug，是规范定义的行为。
- 写
window.addEventListener('DOMContentLoaded', ...)在async脚本里是冗余的——它自己可能早于、等于或晚于该事件触发 - 若需确保 DOM 稳定后再上报数据，
async不可靠，应换defer；若只需“越快越好”且不碰 DOM（如navigator.sendBeacon），async才合适 - 多个
async脚本之间无任何顺序保障，analytics.js和ads.js谁先执行，完全取决于各自下载速度 - 别把主业务脚本（如
main.js）设为async：体积大 + 执行慢 = 频繁中断 HTML 解析，白屏时间不可预测
Webpack/Vite 构建产物加了defer却没效果，怎么回事
因为现代构建工具默认输出的 <script type="module"> 脚本，本身就具备 defer 语义。再手动加 defer 属性不会报错，但也不会改变行为——浏览器直接忽略。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 验证方式：检查生成的 HTML 中脚本是否含
type="module"；若有，则defer属于多余 - 模块脚本天然按顺序执行、自动延迟到 DOM 就绪后，无需额外干预
- 如果你强行混用
async和defer（如<script async defer src="a.js"></script>），浏览器按规范只执行async行为，defer被静默忽略 - 服务端渲染（SSR）场景中，常有人把初始化逻辑塞进
<head>里的同步脚本，误以为加defer就能延迟——其实因无src，属性根本无效
动态创建script标签比写死async/defer更可控吗
是的，尤其当你需要精确控制加载时机（比如用户点击后才加载地图 SDK）、兼容旧浏览器（IE9 及以下），或者脚本内容由后端动态决定时，document.createElement('script') 是更底层、更灵活的选择。
立即学习“前端免费学习笔记（深入）”；
- 它不受 HTML 解析阶段限制，可在任意 JS 时机触发，比如
button.addEventListener('click', () => { loadMapSDK(); }) - 可手动监听
script.onload或script.onerror，比依赖DOMContentLoaded更精准对应单个资源 - 注意：动态插入的脚本默认是异步的（类似
async），如需保序或等 DOM 就绪，得自行判断并加延时或事件监听 -
document.write()在defer/async脚本中会直接报错，而动态创建方式天然规避此问题
defer 只约束外链脚本的**顶层执行时机**，不管它内部的动态行为。哪怕加了 defer，如果脚本里用了 import() 加载子模块，那些子模块的加载与执行仍不受控制，得靠代码自己兜底。 
