DOMContentLoaded 永远不会在模块内触发

Question

我对在特定 ES6 模块加载场景中未触发的事件感到困惑。这是一个支持我的示例的 Codepen 项目： https://codepen.io/fchristant/project/editor/AYQkGJ

考虑这个非常简单的模块app.js：

console.log('in module');
document.addEventListener('DOMContentLoaded', (event) => {
  console.log('DCL:2');
});

我正在使用来自文档头部脚本标签的动态 ES6 导入：

<script>
  (async () => {
    const module = await import("./js/app.js");
    console.log('async done');
   })();
</script>

所以，这个调用代码是一个非模块（同步脚本）动态加载模块。因为它位于文档的头部，而不是异步或延迟，所以我希望它立即运行，并且以阻塞方式执行。

这是我的期望，但不是正在发生的事情。特别是，问题是模块中的事件永远不会被触发。而且看起来是因为现在听已经太晚了，事件已经发生了。考虑到文档头部的阻塞脚本，这怎么可能？它看起来是非阻塞的，但我不明白为什么。

需要明确的是，讨论的重点不是这是否是一个好主意，我首先感兴趣的是为什么这不起作用的概念性答案。或者换句话说：非模块脚本如何以同步方式动态加载模块？

Answer 1

等待文件domcontentloaded中发生该事件index.html。在事件的回调中导入您想要在事件触发时运行的模块。

// app.js
export function start() {
  console.log('in module');
  console.log('DCL:2');
}

<!-- index.html -->
<script>
  document.addEventListener('DOMContentLoaded', async (event) => {
    const module = await import("./js/app.js");
    module.start();
    console.log('async done');
  });
</script>

或者，如果您不需要任何模块，而只是希望在渲染 DOM 之前将所有内容逐一加载，则只需使用传统的渲染阻塞<script>标签即可。

<script src="./js/app.js"></script>
<script>
  console.log('module loaded');
</script>