动画帧队列与微任务队列

Question

我猜microTask是按任何步骤处理的。

我测试了这些东西，但我不确定我的假设是否正确。

测试1- macroTask & microTask

for (let i = 0; i < 2; i += 1) {
  setTimeout(() => {
    console.log('-- macro --')
    queueMicrotask(() => console.log('** micro **'));
  });
}

结果

-- macro --
** micro **
-- macro --
** micro **

测试2- microTask和动画框架

for (let i = 0; i < 3; i += 1) {
  requestAnimationFrame(() => {
    console.log('@@ animation callback @@');
    queueMicrotask(() => {
      console.log('** micro **');
    });
  });
}

结果

@@ animation callback @@
** micro **
@@ animation callback @@
** micro **
@@ animation callback @@
** micro **

当我第一次看到这个测试的结果时，我感到很惊讶。因为我认为动画帧队列中的所有任务都将被一次处理。

但是，现在我认为“在处理动画框架回调函数时，检查microTaskQueue是否为空，如果其中有任务，则处理它，然后调用下一个动画帧回调(由函数插入)”。

我说的对吗，还是我错过了一些重要的东西？

Answer 1

每次JS调用堆栈为空时，都会访问微任务队列，作为运行脚本后进行清理的一部分。

1. 如果JavaScript执行上下文堆栈现在为空，则执行一个微任务检查点。

此步骤是在所有动画回调执行之间从调用算法输入的。

注意，事件循环处理也有一些硬编码的微任务检查点，例如在步骤7，但在其他回调执行中也是如此。