ES6 import在HTML引入与代码内引入的执行顺序差异确认

场景1：多个并列<script type="module">标签引入 #

对应代码：

<script type="module" src="one.js"></script>
<script type="module" src="two.js"></script>
<script type="module" src="three.js"></script>

该场景的执行顺序是否有保障，取决于标签是否携带async属性：

• 若所有标签均未添加async属性：可以100%保证three.js的执行时机晚于one.js和two.js。HTML规范明确规定，不带async的type="module"脚本默认具备defer行为，多个同类型脚本会并行下载资源，待DOM解析完成后，严格按照标签在HTML中的出现顺序依次执行。
• 若任意标签添加了async属性：无法保证执行顺序。带async的module脚本会在资源下载完成后立即执行，执行时机完全由资源下载速度决定，和标签顺序无关。

场景2：单个module脚本内部批量导入模块 #

对应代码：

<script type="module">
  import 'one.js'
  import 'two.js'
  import 'three.js'
</script>

该场景下可以100%确认three.js一定会在one.js和two.js执行完成后再执行。ES模块规范强制规定：同一个模块内的import语句会按照声明顺序加载依赖，所有依赖模块的顶层代码全部执行完成后，才会执行当前模块的代码，该顺序和资源下载速度无关。 #

两种引入方式的核心差异 #

• 执行顺序的约束来源不同：场景1的执行顺序由HTML脚本加载规则约束，受async属性配置影响；场景2的执行顺序由ES模块标准强制约束，无额外配置时会始终按import声明顺序执行
• 模块关系不同：场景1的三个脚本是平级的独立顶层模块，互相之间无依赖关联；场景2的三个脚本是同一个父模块的依赖，属于同一个模块依赖树的组成部分

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