animation frame queue vs micro task queue

Issue

I guess that the microTask is processed in any steps.

And I tested these things, but I'm not sure that my assumption is right.

Test 1 - macroTask & microTask

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

results

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

Test 2 - microTask & animation frame

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

results

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

I was surprised when I first saw the results of this test. Because I thought that all tasks in the animation frame queue will be processed at once.

But, now I think that "while processing the animation frame callback functions, check if the microTaskQueue is empty, and if there is a task inside, process it, and call the next animation frame callback (inserted by requestAnimationFrame function."

Am I right, or am I missing something important?

Solution

The microtask queue is visited every time the JS call stack is empty, as part of clean after running a script.

3. If the JavaScript execution context stack is now empty, perform a microtask checkpoint.

This step is entered in between all the animation callback execution, from the invoke algorithm.

Note that the event-loop processing also has a few hard-coded microtask checkpoints, e.g at step 7, but also in other callbacks execution.

Answered By - Kaiido