Microtask Queue vs Callback Queue in Asynchronous JavaScript

JavaScript uses the Event Loop to handle asynchronous operations without blocking the main thread. When asynchronous operations complete, their callbacks are placed in different queues, and the Event Loop moves them to the Call Stack for execution.

• Callback Queue stores tasks such as setTimeout() callbacks and other asynchronous events.
• Microtask Queue stores tasks such as Promise callbacks and MutationObserver callbacks.
• The Microtask Queue has higher priority than the Callback Queue.
• The Event Loop processes microtasks before taking the next task from the Callback Queue.

Callback Queue

The Callback Queue, also called the Task Queue or Macrotask Queue, stores callbacks that are ready to execute after asynchronous operations complete.

For example, when the timer in setTimeout() expires, its callback is added to the Callback Queue.

setTimeout(() => {
    console.log("Timer callback");
}, 0);

console.log("End");

The setTimeout() callback does not execute immediately. It is added to the Callback Queue after the timer expires and is executed when the Call Stack is available and the Event Loop selects it.

Microtask Queue

The Microtask Queue stores callbacks that are executed after the current synchronous code finishes but before the next task from the Callback Queue.

Common sources of microtasks include:

• Promise callbacks such as .then(), .catch(), and .finally()
• queueMicrotask()
• MutationObserver callbacks

For example:

Promise.resolve().then(() => {
    console.log("Promise callback");
});

console.log("End");

Promise callbacks are placed in the Microtask Queue and are processed before the next Callback Queue task.

Microtask Queue vs Callback Queue