DOMContentLoaded 事件和任务队列

Question

我听说事件循环处理模型中有三个队列有任务。

1. MacroTaskQueue ：该队列具有 setTimeout、setInterval 等回调函数
2. MicroTaskQueue ：该队列具有 Promise、mutationOberver 等回调函数
3. AnimationFrameQueue ：该队列具有 requestAnimationFrame 回调函数。

所以，我想知道

• 谁触发了 DOMContentLoaded 事件？
• DOMContentLoaded 的回调函数在哪里排队？ MacroTaskQueue 还是 MicroTaskQueue？
• 最后，

var a = 10;
console.log(a);

setTimeout(function b() { console.log('im b'); }, 1000);

在这段代码中，

var a = 10;
console.log(a);

这段代码是否也在 MacroTaskQueue 或 MicroTaskQueue 中排队？

或者只有 b 在（分钟）1000ms 后在 MacroTaskQueue 中排队？

我在黑洞里。请帮助我：D

Answer 1

您所谓的“MacroTaskQueue”实际上是由几个 任务队列< /a>，其中 任务正在排队。 （请注意，规范仅使用多个任务源，实际上可能有一个任务队列）。在 事件循环的开头处理时，浏览器将从哪个任务队列中选择要执行的下一个“主”任务。重要的是要理解这些任务很可能根本不意味着任何 JavaScript 执行，JS 只是浏览器所做的一小部分。

在单个事件循环迭代期间，微任务队列将被访问和清空多次。例如，每次 JS 调用堆栈有已清空（即几乎每次 JS 回调执行后），如果还不够，则 事件循环处理模型。

虽然与队列类似，但动画帧回调实际上存储在有序映射中，而不是本身存储在队列中，这允许从这些回调之一“排队”新回调，而不会立即将其出队。更重要的是，许多其他回调也同时执行 时间，例如滚动事件、调整大小事件、Web 动画步骤+事件、ResizeObserver 回调等。但是这个“更新渲染”步骤仅偶尔发生一次，通常以显示器刷新率发生。

但是，这并没有对 DOMContentLoaded 说太多。

谁触发 DOMContentLoaded 事件？

此事件作为文档解析步骤的一部分被触发，在 "结束” 部分。浏览器必须首先在 DOM 操作任务源上排队一个任务。该任务最终将被浏览器选择，作为事件循环第一步的一部分。一旦执行该任务的步骤，该事件将被触发并分派到文档上。这只是浏览器调度事件算法的一部分< em>调用和内部调用直到调用我们监听器的回调。
请注意，这个文档解析步骤本身作为一项任务非常有趣，因为这是最明显的地方，您将在“主”任务中交错有多个微任务检查点（例如在每个

DOMContentLoaded 的回调函数在哪里排队？

回调函数没有排队，它概念上存储在 EventTarget 的 事件监听器列表中。事实上，它存储在内存中，因为这里的 EventTarget 是一个 DOM 对象（文档），它可能附加到这个 DOM 对象，尽管这是一个实现细节，规范没有什么可说的，因为这对我们的 web 来说是透明的-开发人员。

MacroTaskQueue 还是 MicroTaskQueue？

我希望你现在能更好地理解，两者都不是。任务队列和微任务队列只存储任务和微任务，不存储回调。回调存储在其他地方，具体取决于它们的回调类型（例如，计时器和事件存储在不同的“概念”位置），然后某些任务或微任务的步骤将调用它们。

此代码是否也在 MacroTaskQueue 或 MicroTaskQueue 中排队？

这取决于该脚本是从哪里解析的。如果它内联在经典的

queueMicrotask(() => {
  console.log("in microtask");
  eval(document.querySelector("[type=myscript]").textContent);
  console.log("still in microtask");
});
console.log("in parsing task");

<script type="myscript">
var a = 10;
console.log(a);
setTimeout(function b() { console.log('im b'); }, 1000);
</script>

理论上甚至是可能的按规范微任务变成了“宏”任务，尽管显然没有浏览器再实现这一点。
综上所述，虽然我个人觉得所有这些东西都很有趣，但作为一名网络开发人员，你不应该在这方面阻止自己。