相同代码在Chrome与Firefox中执行结果不一致的原因探究

这个差异的核心是Chrome和Firefox对外部脚本加载完成后的执行任务在宏任务队列中的插入位置处理逻辑不同，具体拆解如下：

• 当页面解析到内联脚本时，会立即同步执行内联代码，其中的setTimeout回调会被加入宏任务队列等待执行。
• 紧接着解析到外部脚本标签，浏览器异步加载该脚本，加载完成后会生成一个“执行外部脚本”的任务，加入宏任务队列。
  • Chrome的处理：把“执行外部脚本”任务放到宏任务队列的尾部，此时队列里已经有之前setTimeout的任务，所以先执行定时器回调（输出setTimeout-external-111），再执行外部脚本。
  • Firefox的处理：把“执行外部脚本”任务插入到宏任务队列的当前待执行任务之前（或者说赋予了外部脚本执行任务更高的优先级），所以先执行外部脚本（输出external-222），再处理定时器回调。

HTML标准只规定了外部脚本加载完成后要在当前解析流程暂停时执行，但没有明确要求该任务与已存在的宏任务（比如定时器）的优先级顺序，因此不同浏览器厂商根据自己的调度策略做了不同实现，这就是导致输出顺序差异的根本原因。

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