What is the difference between the microtask queue and the macrotask (callback) queue?

Question

Accepted Answer

JavaScript's event loop manages two distinct task queues: the microtask queue and the macrotask (callback) queue. **The microtask queue** handles high-priority, short operations that need to be executed immediately after the current operation completes, before any rendering or new macrotasks. **The macrotask queue** handles lower-priority, longer operations that are executed in rounds, with the event loop taking one macrotask per iteration. The critical difference is that microtasks are processed in a single batch until the queue is empty, whereas macrotasks are processed one at a time, with the event loop potentially rendering the page between them. This ordering is fundamental to understanding JavaScript's asynchronous behavior and avoiding subtle bugs. console.log('1: Start');

setTimeout(() => console.log('2: setTimeout (macrotask)'), 0);

Promise.resolve().then(() => console.log('3: Promise (microtask)'));

queueMicrotask(() => console.log('4: queueMicrotask (microtask)'));

console.log('5: End');

// Output order:
// 1: Start
// 5: End
// 3: Promise (microtask)
// 4: queueMicrotask (microtask)
// 2: setTimeout (macrotask)

// Explanation:
// - Synchronous code runs first
// - All microtasks (Promise, queueMicrotask) run before any macrotask
// - setTimeout callback (macrotask) runs after all microtasks are processed **Also known as**: Task queue, callback queue, event queue **Sources**: setTimeout, setInterval, setImmediate (Node.js), I/O operations, UI rendering, message events, requestAnimationFrame **Processing model**: One macrotask is taken from the queue per event loop iteration **Priority**: Lower priority than microtasks **Browser rendering**: May occur between macrotasks **Order**: Tasks are executed in FIFO (First In, First Out) order **Also known as**: Job queue, microtask queue **Sources**: Promise callbacks (then, catch, finally), queueMicrotask, MutationObserver, process.nextTick (Node.js) **Processing model**: All microtasks are processed until the queue is empty before moving to the next macrotask **Priority**: Higher priority than macrotasks **Browser rendering**: Microtasks block rendering until the queue is empty **Potential issue**: Recursively adding microtasks can cause infinite loops and freeze the page // Example 1: Microtask starvation (DO NOT DO THIS)
function recursiveMicrotask() {
  queueMicrotask(recursiveMicrotask); // Infinite loop! Blocks the page
}

// Example 2: Proper microtask usage (batch updates)
let pendingUpdates = [];
let updateScheduled = false;

// Example 3: Async/await uses microtasks
async function demo() {
  console.log('A');
  await Promise.resolve(); // Microtask
  console.log('B');
}

demo();
console.log('C');
// Output: A, C, B (not A, B, C)
// Because await's continuation is scheduled as a microtask 1. Execute all synchronous code in the current call stack 2. Process all microtasks (Promise callbacks, queueMicrotask, MutationObserver) until queue is empty 3. Perform one macrotask from the macrotask queue 4. Possibly render the page (browser specific) 5. Return to step 2 (process microtasks again) if any were added during macrotask 6. Repeat the loop // This example demonstrates how microtasks can be added during macrotask execution
setTimeout(() => {
  console.log('Macro 1');
  Promise.resolve().then(() => console.log('Micro 2 (from Macro 1)'));
}, 0);

Promise.resolve().then(() => {
  console.log('Micro 1');
  setTimeout(() => console.log('Macro 2 (from Micro 1)'), 0);
});

console.log('Sync');

// Output order:
// Sync
// Micro 1
// Macro 1
// Micro 2 (from Macro 1)
// Macro 2 (from Micro 1)

// Explanation:
// 1. Sync runs
// 2. Micro 1 runs (Promise callback)
// 3. Macro 1 runs (setTimeout callback)
// 4. Micro 2 runs (microtask added during Macro 1)
// 5. Macro 2 runs (setTimeout added during Micro 1) Understanding the microtask/macrotask distinction is crucial for avoiding subtle bugs in asynchronous JavaScript. For example, Promise callbacks and queueMicrotask are processed before setTimeout even with a 0ms delay, which can lead to unexpected ordering. Additionally, while macrotasks allow the browser to render between them (keeping the UI responsive), microtasks can block rendering if they are continuously added, potentially causing performance issues. Modern JavaScript patterns like React's batching rely on microtasks to batch state updates efficiently before rendering.

What is the difference between the microtask queue and the macrotask (callback) queue?

Scenario Questions

Follow-up Questions