懒加载多个JS文件：按序加载完成后调用allJsLoaded()的实现疑问

仅监听最后一个script的onload是否足够？ #

这得看你是否真的实现了严格的同步串行加载：

• 如果确实是强制同步（比如动态创建script时显式设置async=false，确保浏览器按插入顺序加载执行，前一个脚本加载完成后才会启动下一个），那理论上最后一个脚本的onload触发时，前面的所有脚本肯定已经加载完成，此时调用allJsLoaded()是可行的。但这种方式有明显漏洞：如果前面某个脚本加载失败（比如404），浏览器会跳过错误继续加载后续脚本，最后一个的onload仍会触发，但依赖的脚本其实没加载成功，会导致allJsLoaded()执行时出错。
• 如果是默认动态创建的脚本（没设置async=false），那本质是异步加载的——多个脚本会并行请求，加载完成顺序不一定和插入顺序一致。这种情况下，最后一个脚本的onload触发时，前面的脚本可能还在加载，完全不可靠。

更优的实现方案 #

1. 串行加载+全链路错误处理（适合需要按顺序执行脚本的场景） #

通过Promise链逐个加载脚本，确保前一个加载成功后再启动下一个，全部完成后触发回调，同时能捕获任何一个脚本的加载失败：

const scriptUrls = ['file1.js', 'file2.js', 'file3.js'];

function loadScript(url) {
  return new Promise((resolve, reject) => {
    const script = document.createElement('script');
    script.src = url;
    script.onload = () => resolve();
    script.onerror = () => reject(new Error(`加载失败: ${url}`));
    document.head.appendChild(script);
  });
}

// 按顺序加载所有脚本
scriptUrls.reduce((chain, url) => {
  return chain.then(() => loadScript(url));
}, Promise.resolve())
.then(allJsLoaded)
.catch(err => {
  console.error(err);
  // 这里可以加错误处理逻辑，比如重试或提示用户
});

2. 并行加载+全局状态跟踪（适合无需严格执行顺序的场景） #

如果只是需要所有脚本加载完成后执行回调，不需要按顺序执行，可并行加载所有脚本，用计数器跟踪完成情况，同时监听错误：

const scriptUrls = ['file1.js', 'file2.js', 'file3.js'];
let loadedCount = 0;
let loadFailed = false;

function checkCompletion() {
  if (loadedCount === scriptUrls.length && !loadFailed) {
    allJsLoaded();
  } else if (loadFailed) {
    console.error('存在脚本加载失败');
    // 错误处理逻辑
  }
}

scriptUrls.forEach(url => {
  const script = document.createElement('script');
  script.src = url;
  script.onload = () => {
    loadedCount++;
    checkCompletion();
  };
  script.onerror = () => {
    loadFailed = true;
    console.error(`加载失败: ${url}`);
    checkCompletion();
  };
  document.head.appendChild(script);
});

3. 用ES模块动态import（现代浏览器推荐） #

如果你的脚本是ES模块，直接用import()配合Promise.all是最简洁可靠的方式，原生支持加载状态跟踪：

Promise.all([
  import('./file1.js'),
  import('./file2.js'),
  import('./file3.js')
])
.then(allJsLoaded)
.catch(err => console.error('模块加载失败:', err));

内容的提问来源于stack exchange，提问作者vbrin27