详解HTML外部脚本加载：async与defer标签属性-html教程-PHP中文网

必须用 defer。因为只有 defer 能确保脚本执行时 dom 已完整构建，避免 getelementbyid 返回 null；async 执行时机不可控，可能早于或晚于 dom 就绪；内联脚本加 defer 无效；type="module" 脚本自带 defer 语义。

详解html外部脚本加载：async与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 脚本一下载完就中断解析执行，可能发生在标签都还没出现的时候
多个 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 构建进度无关。它可能在刚开始解析时就执行（如果脚本极小且 CDN 极快），也可能在闭合后才执行（如果网络卡顿）。这种不可控性不是 bug，是规范定义的行为。

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

写 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"></script> 脚本，本身就具备 defer 语义。再手动加 defer 属性不会报错，但也不会改变行为——浏览器直接忽略。

验证方式：检查生成的 HTML 中脚本是否含 type="module"；若有，则 defer 属于多余
模块脚本天然按顺序执行、自动延迟到 DOM 就绪后，无需额外干预
如果你强行混用 async 和 defer（如 <script async defer src="a.js"></script>），浏览器按规范只执行 async 行为，defer 被静默忽略
服务端渲染（SSR）场景中，常有人把初始化逻辑塞进里的同步脚本，误以为加 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 脚本中会直接报错，而动态创建方式天然规避此问题