如何让浏览器按定义顺序同步执行module脚本与普通JS脚本

首先明确核心规则：你观察到的执行顺序是HTML标准明确定义的默认行为，不是浏览器bug：

• 不带async/defer属性的普通脚本（type="text/javascript"，即你提到的vanilla脚本）是解析阻塞型资源：浏览器解析到标签位置会立刻暂停DOM解析，拉取（外部脚本场景）并执行脚本，执行完成才会继续解析后续内容。
• 所有type="module"脚本默认自带defer语义，你写的defer="false" async="false"对这类脚本完全无效：浏览器解析到module脚本时不会阻塞解析，会等整个DOM树解析完成、所有普通阻塞脚本全部执行完毕后，再按照module标签在文档中出现的先后顺序执行。这就是你测试时普通脚本two/four先输出、module脚本one/three后输出的根本原因。

以下是可落地的实现方案，按改造成本从低到高排序：

方案1：统一所有脚本为module类型（最推荐） #

这是成本最低、最符合标准设计的实现方式，不需要额外编写加载调度逻辑：把所有普通脚本也加上type="module"属性，此时所有脚本都会遵循module的执行规则：等DOM解析完成后，严格按照标签在文档中出现的先后顺序执行，同时支持你需要的远程模块导入能力。
修改后的示例代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

<script type="module">
    // 可正常编写远程import逻辑
    console.log('one');
</script>

<script type="module">
    // 原有普通脚本逻辑无需改动，module环境兼容绝大多数常规JS语法
    console.log('two');
</script>

<script type="module">
    console.log('three');
</script>

<script type="module">
    console.log('four');
</script>

</body>
</html>

修改后控制台输出顺序为one -> two -> three -> four，完全匹配书写顺序。
注意：module脚本默认运行在严格模式下，如果原有普通脚本依赖非严格模式的特殊写法，需要提前做适配，绝大多数常规业务代码无需调整。

方案2：手动实现脚本执行调度（适合必须保留普通阻塞脚本的场景） #

如果因兼容性等特殊原因不能把所有脚本改为module类型，可以手动接管脚本执行流程，绕过浏览器的默认执行逻辑：

1. 给所有需要按顺序执行的script标签添加自定义标记，同时把原生type属性改为浏览器无法识别的类型（比如text/ordered-script），避免浏览器解析到标签时自动执行。
2. 在所有有序脚本之前编写一段调度逻辑，按DOM顺序遍历所有标记过的脚本标签，逐个创建可执行的script标签插入页面，等前一个脚本执行完成后再处理下一个。
   核心调度代码示例：

// 该段逻辑需放在body最开头，所有有序脚本之前
const orderedScripts = document.querySelectorAll('script[data-ordered]');
async function executeBySequence() {
  for (const scriptNode of orderedScripts) {
    const targetType = scriptNode.dataset.scriptType;
    const scriptContent = scriptNode.textContent;
    const scriptSrc = scriptNode.getAttribute('src');
    await new Promise((resolve) => {
      const executableScript = document.createElement('script');
      if (targetType === 'module') executableScript.type = 'module';
      if (scriptSrc) executableScript.src = scriptSrc;
      if (scriptContent) executableScript.textContent = scriptContent;
      executableScript.onload = resolve;
      executableScript.onerror = resolve; // 可根据业务需求扩展错误处理逻辑
      document.body.appendChild(executableScript);
      // 普通非module脚本插入后会同步执行，执行完成后直接进入下一轮
      if (targetType !== 'module') resolve();
    })
  }
}
executeBySequence();

对应的脚本标签写法示例：

<script data-ordered data-script-type="module" type="text/ordered-script">
  console.log('one');
</script>
<script data-ordered data-script-type="text/javascript" type="text/ordered-script">
  console.log('two');
</script>

该方案灵活性最高，但需要自行处理内联代码、外部资源加载、错误边界等逻辑，仅建议特殊场景使用。

方案3：基于事件的依赖编排 #

如果脚本之间有明确的依赖关系，不需要强制全局顺序的话，可以在前置脚本执行完成后触发自定义事件，后续依赖对应逻辑的脚本监听事件触发后再执行。这种方式适合依赖关系清晰的大型项目，但改造成本高于方案1。

重要提示：不要尝试通过修改module脚本的async/defer属性值让它像普通脚本一样阻塞解析，这不符合规范定义：给module脚本加async属性才会让它加载完成后立刻执行、不保证顺序，不加async的module脚本默认就是延迟执行模式，没有原生配置可以修改这个行为。

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