本文详解如何可靠监听多个动态加载脚本的完成状态，重点解决“按顺序加载、全部就绪后统一执行”的核心需求，涵盖 onload 局限性分析、Promise.all() 动态加载方案、defer 语义保障及现代事件选择策略。
本文详解如何可靠监听多个动态加载脚本的完成状态，重点解决“按顺序加载、全部就绪后统一执行”的核心需求，涵盖 `onload` 局限性分析、`promise.all()` 动态加载方案、`defer` 语义保障及现代事件选择策略。
在前端开发中，动态懒加载（Lazy Loading）多个 JavaScript 文件是优化首屏性能的常用手段。但当这些脚本存在依赖关系（例如 file2.js 依赖 file1.js 的全局变量，file3.js 又依赖前两者），仅靠为最后一个 <script> 标签添加 onload="allJsLoaded()" 是不可靠的——原因在于：onload 仅表示该脚本资源下载并执行完毕，不保证其依赖的前置脚本已执行完成。尤其在无 defer 或 async 控制时，浏览器可能因网络波动、缓存差异或解析时机导致执行顺序与声明顺序不一致。
✅ 正确方案：基于 Promise 的可控加载链
最健壮、可预测的方式是显式管理每个脚本的加载生命周期，并用 Promise.all() 聚合所有完成信号：
function loadScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.type = 'text/javascript';
script.async = false; // 关键：禁用 async 以保持顺序（若需严格串行）
script.onload = () => resolve({ src, status: 'loaded' });
script.onerror = () => reject(new Error(`Failed to load ${src}`));
document.head.appendChild(script);
});
}
// 按序加载全部脚本，全部成功后执行回调
const scriptUrls = ['file1.js', 'file2.js', 'file3.js'];
Promise.all(scriptUrls.map(loadScript))
.then(() => {
console.log('✅ All scripts loaded and executed in order');
allJsLoaded(); // 安全调用
})
.catch(err => {
console.error('❌ Script loading failed:', err);
});⚠️ 注意：Promise.all() 本身不强制执行顺序，但 map(loadScript) 中每个 loadScript() 返回的 Promise 会按数组索引顺序被创建和追加到 DOM；配合 script.async = false（即同步阻塞式加载），可确保浏览器按声明顺序下载并执行，从而满足依赖前提。
? 替代方案：使用 defer + DOMContentLoaded（适用于静态 HTML）
若脚本可提前写入 HTML（非完全动态），推荐语义化更清晰的原生方案：
立即学习“Java免费学习笔记（深入）”；
<script defer src="file1.js"></script>
<script defer src="file2.js"></script>
<script defer src="file3.js"></script>
<script>
// 所有 defer 脚本执行完毕后触发（DOM 构建完成且所有 defer 脚本执行完）
document.addEventListener('DOMContentLoaded', () => {
// 此时 file1.js ~ file3.js 已按序执行完毕
allJsLoaded();
});
</script>✅ defer 的关键优势：
- 浏览器并行下载所有 defer 脚本，但严格按 HTML 中出现顺序执行；
- 执行时机在 DOM 解析完成之后、DOMContentLoaded 事件触发之前；
- 不阻塞 HTML 解析，兼顾性能与顺序可靠性。
❌ 为什么不推荐 window.onload 或 document.addEventListener('load')？
- window.onload 等待所有资源（图片、CSS、iframe 等）加载完毕，延迟显著，且与脚本执行完成无直接关联；
- document.addEventListener('load') 实际无效（Document 对象不触发 load 事件），正确写法应为 window.addEventListener('load', ...)，但同样存在上述问题；
- 单独监听最后一个 <script> 的 onload 无法感知前置脚本是否真正“可用”（如是否定义了预期的全局函数/类）。
? 进阶建议：运行时依赖校验（防“假完成”）
即使脚本加载完成，也可能因语法错误或执行异常导致依赖未就绪。可在 allJsLoaded() 中加入轻量校验：
function allJsLoaded() {
// 校验关键依赖是否存在
if (typeof jQuery !== 'undefined' && typeof isotope === 'function') {
console.log('✅ Dependencies confirmed — proceeding...');
initApp();
} else {
console.warn('⚠️ Critical dependencies missing — retry or fallback');
}
}✅ 总结：按场景选择最优策略
| 场景 | 推荐方案 | 关键特性 |
|---|---|---|
| 完全动态加载 + 强依赖顺序 | Promise.all() + async=false | 最高可控性，支持错误捕获与重试 |
| 静态 HTML + 可预知脚本列表 | defer + DOMContentLoaded | 语义清晰、零 JS 逻辑、浏览器原生保障 |
| 需兼容极老浏览器（IE8-） | document.write()（不推荐）或 onload 链式回调（复杂易错） | 已属历史方案，新项目应避免 |
无论采用哪种方式，核心原则不变：不要假设加载顺序等于执行顺序，必须通过机制（defer、Promise、显式回调）显式声明和验证依赖完成状态。
