async脚本必然乱序，因其语义是“下载完立即执行”，不等dom、不排队、不保序；合并后仍需保序应改用defer，确保dom就绪后执行。

多个async脚本合并引入时为什么必然乱序

因为async的语义就是“下载完立刻执行”，不等 DOM、不排队、不保序——哪怕你把 a.js 和 b.js 合并成一个 bundle.js，只要它被标记为 async，浏览器就只管下载执行，不会做任何顺序协调。真正出问题的不是“合并”，而是用 async 去承载有依赖关系的逻辑。

合并后仍需保序？别用async，改用defer

如果你合并的脚本里包含初始化逻辑、DOM 操作、或前后依赖（比如先加载工具函数再调用），async 就不该出现在这个 <script></script> 标签上。改用 defer 是最直接有效的解法：

Markdown to HTML

{"answer":"将 Markdown 转换为内嵌 CSS、样式精美的独立 HTML。完美适用于新闻简报、文档、报告及邮件模板。"}

下载

• defer 对单个外部脚本（哪怕它是合并后的 bundle）依然生效，保证在 DOM 解析完成后、DOMContentLoaded 前执行
• 即使你只写一个 <script src="bundle.js" defer></script>，它也比多个 async 更可控——没有竞态，不依赖下载快慢
• 注意：不要写 <script async defer src="..."></script>，现代浏览器会忽略 defer，按 async 行为执行

合并脚本里混了统计/埋点代码怎么办

如果 bundle.js 里既含主业务逻辑，又含 Google Analytics 这类纯上报脚本，强行用 defer 可能拖慢埋点采集时机。这时该拆，不该合：

• 把埋点脚本单独抽出来，用 <script async src="analytics.js"></script> —— 它本就不该和 DOM 操作耦合
• 主逻辑打包为 app.js，用 <script src="app.js" defer></script>
• 避免在同一个文件里塞两类行为冲突的代码：一个要快、一个要稳，合并只会让取舍更难

动态插入合并脚本时怎么避免执行时机失控

用 document.createElement('script') 插入合并后的脚本，默认行为接近 async：下载不阻塞，但执行时机不可控。想保序就得绕开默认行为：

• 不要依赖插入顺序来推断执行顺序——动态创建的 script 元素之间无执行保障
• 若必须动态加载且需顺序，优先用 import()：await import('./bundle.js')，天然串行、可 await、错误可捕获
• 如果非得用动态 script，至少监听 onload 回调，并在回调里触发下一步，别假设“插完就可用”

真正容易被忽略的是：合并脚本本身不解决顺序问题，它只是把乱序风险从“多个请求”转移到“单个文件内部”。而 async 属性不会因为你合并了文件就突然变守序——它的行为契约没变。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！