浏览器中的事件循环如何同时处理事件队列、作业队列、渲染队列？

Question

上周我开始使用 nodejs 学习 Javascript 后端。在使用 async 函数时，我想全面了解这一点，并开始研究这个主题。
我找到了Jake Archibald's presentation in jsconf，并试图了解什么是事件循环以及事件循环如何在不同的队列中运行以及它可以处理哪些队列。

我认为本演示文稿中的一张图表非常有助于理解所有内容。

但我想知道事件循环如何处理由承诺回调组成的作业队列。
我们可以为这个队列添加另一个路由到这个图表中吗？

。 （我试图将它实现到图表中:)）

我想知道的另一个问题是，事件循环对渲染队列有什么作用？ 事件循环是否将其发送到另一个地方？因为我们知道事件循环将事件队列或作业队列中的函数发送到 javascript 引擎中的调用堆栈来运行这些。
但是渲染队列有请求动画帧和其他样式元素。
事件循环是否将请求动画帧部分发送到 javascript 引擎并将其他布局、样式和绘制部分发送到布局引擎？

Answer 1

此图过度简化了事情的运作方式，要详细了解会发生什么，我邀请您直接访问the specs，这些天实际上已经变得非常可读且易于导航。

从那里你会看到

[t]microtask-queue 不是任务队列。

如果我们自己走过于简化的道路，只用我们感兴趣的东西来解释事件循环例程，

• 来自其他进程和先前任务的消息将在各种task-sources 中排队新任务，它们本身以更少的task-queues 结尾。 （这提供给 Jake 图表的左循环）。
• 在每次迭代中，事件循环的第一步是从这些任务队列中的一个中选择第一个任务（根据需要进行选择，这样可以确定任务的优先级）。
• 在这个 main 任务完成后（规范中的第 7 步），事件循环将查看称为 microtask-checkpoint 的 microtask 队列。
• 仅适用于自上次迭代以来活动显示监视器确实发出其 SYNC 脉冲的文档（在 60Hz 监视器上每 16.67 毫秒一次），它updates the rendering（Jake 图中的右循环，规范中的步骤 11.6~11.15 )。
• 在这些步骤中，它将执行一些任务，例如触发 UI 事件、更新动画和运行动画帧回调。每次这些算法invokes a callback 中的一个时，用户代理都必须执行一个新的 microtask-checkpoint clean up after running 算法，因此例如每个动画帧回调都会与这样的检查点交错，这些算法中的some 甚至直接执行微任务检查点。

所以这意味着 microtask-checkpoint 不只是在事件循环中的单点执行，它在主任务之后执行一次，并且在每次回调执行后多次执行 更新渲染步骤。

用户代理不能仅仅延迟微任务，它必须在排队的任务完成后立即执行，即从事件循环的角度来看，微任务是同步执行的。

同样，“渲染队列”也不是任务队列，它必须在浏览器有"rendering opportunity"时运行，它不能成为任务优先级机制的一部分（more here） .

---

因为我们知道事件循环将事件队列或作业队列中的函数发送到javascript引擎中的调用堆栈来运行这些。

不完全是。首先要记住，javascript 执行只是浏览器的一部分，许多任务根本不涉及 javascript，例如，即使您确实从 web 浏览器中禁用了 javascript，事件循环仍然必须运行，它仍然需要更新渲染，它仍然需要发送表单，它仍然需要对网络事件做出反应，比如加载媒体等。
事件循环的作用是运行任务的步骤，但这些步骤可能有很多不同，它们不一定会在任何地方发送任何东西。

此外，规范根本没有说明应该如何分配计算，但关于渲染，我们可以假设简而言之，从update the rendering 到第 14 步的所有内容都应该在同一个过程中完成（它必须顺序运行），但是步骤 15（“更新渲染”）实际上会将所有内容 绘制 到监视器可以（我认为它在所有现代浏览器中）传递给另一个进程，专门用于此渲染任务。
你可以查看Chromium's documentation 解释他们如何管理浏览器进程和渲染器之间的相互通信。