浏览器内联script模块中defer与DOMContentLoaded的交互异常问题

你对模块延迟的理解存在关键偏差：模块的同步代码会阻塞DOMContentLoaded，但异步代码（比如await挂起后的逻辑）不会。

具体执行流程拆解 #

你的代码实际执行顺序是这样的：

1. 浏览器解析到<script type="module">，因它是模块脚本，会延迟到DOM解析完成后再启动执行：
   • 先同步注册第一个DOMContentLoaded事件监听；
   • 遇到await fetch("foo.bar")时，模块执行被挂起，JavaScript引擎跳出当前模块，继续完成剩余的DOM解析工作；
2. DOM解析完成后，浏览器立刻触发DOMContentLoaded事件，此时第一个监听执行，输出DOMContentLoaded fired；
3. 等fetch请求完成后，模块的异步逻辑恢复执行，输出finished loading data，这时才注册第二个DOMContentLoaded监听——但事件已经触发过了，所以这个监听永远不会被调用。

修正你的理解误区 #

你之前的第二条理解不准确：模块只会用同步执行的部分阻止DOMContentLoaded，一旦模块执行中出现异步挂起（比如await、setTimeout、Promise.then等），浏览器会继续推进DOMContentLoaded的触发流程，不会等待异步代码完成。

模块脚本的"延迟执行"指的是它不会像普通同步脚本那样阻塞DOM解析，而是等DOM解析完再开始执行，但执行过程中的异步逻辑不会卡住DOMContentLoaded事件。

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