如何批量加载页面初始化所需JS，其余JS在DOM加载后批量加载？

嘿，我明白你现在的困扰——明明按想法放置了核心脚本，也加了DOM加载后的监听器，但脚本就是没法并行下载。别着急，咱们一步步来解决：

一、先搞定初始核心脚本的并行下载 #

对于页面加载必需的核心脚本，直接把它们放在<head>标签里就行啦！现代浏览器默认会并行下载多个脚本文件，只要你不是用动态加载的方式逐个添加，它们会同时开始下载的。比如：

<head>
  <!-- 这些核心脚本会同时开始下载 -->
  <script src="./core-script-1.js"></script>
  <script src="./core-script-2.js"></script>
  <script src="./core-script-3.js"></script>
</head>

要是这些脚本不需要阻塞DOM解析，还可以给它们加上async属性，但如果是页面渲染必须依赖的脚本，保持默认引入方式就好，浏览器依然会并行下载它们。

二、DOM就绪后，让第三方脚本也并行起飞 #

你之前的问题大概率出在动态加载的方式上——如果是逐个创建脚本元素并添加到DOM，有些浏览器会串行处理这些请求，导致没法同时下载。咱们换个方式，一次性创建所有需要的脚本元素，让浏览器同时发起请求：

// 等DOM完全加载好再动手
document.addEventListener('DOMContentLoaded', () => {
  // 把所有第三方脚本的URL列成数组
  const thirdPartyScripts = [
    'https://your-cdn.com/script-a.js',
    'https://your-cdn.com/script-b.js',
    'https://your-cdn.com/script-c.js'
  ];

  // 遍历数组，一次性创建并插入所有脚本
  thirdPartyScripts.forEach(src => {
    const scriptTag = document.createElement('script');
    scriptTag.src = src;
    // 加上async，让脚本下载完就执行，不阻塞其他操作
    scriptTag.async = true;
    document.body.appendChild(scriptTag);
  });
});

这样写的话，浏览器会同时发起所有第三方脚本的下载请求，完美实现并行加载。

为啥之前的方法没用？ #

如果你的代码是先创建第一个脚本、添加到DOM，等它加载完再处理第二个，那自然是串行的。而上面的方式是一次性把所有脚本元素都插入DOM，浏览器会立刻并行处理这些请求。

三、额外检查点 #

• 打开浏览器的F12网络面板，看看脚本的请求开始时间是不是差不多——如果还是串行，可能是服务器端限制了并发请求数，但这种情况很少见。
• 如果第三方脚本之间没有依赖关系，async属性一定要加上，这样脚本下载完成后就会执行，不会拖慢页面交互。

附上你提供的截图参考：


从截图里能看到你的第二组脚本是串行加载的，用上面的方法应该就能解决啦！

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