Microtask Queue vs Macrotask Queue in JavaScript

Microtask Queue vs Macrotask Queue in JavaScript

JavaScript has two callback queues with different priorities. Understanding them explains all async timing.

Microtask Queue

Contains callbacks from:

• Promise.then, .catch, .finally
• queueMicrotask(fn)
• MutationObserver
• process.nextTick (Node.js, even higher priority than promises)

The event loop drains all microtasks before any macrotask and before rendering. This means if you keep adding microtasks, macrotasks never run.

Macrotask Queue (Task Queue)

Contains callbacks from:

• setTimeout, setInterval
• setImmediate (Node.js)
• I/O callbacks (network, file system)
• UI events (click, input, scroll)
• MessageChannel, postMessage

The event loop takes one macrotask, then drains all microtasks generated by it, then takes the next macrotask.

Priority

setTimeout(() => console.log("timeout"), 0);
Promise.resolve().then(() => console.log("promise"));
queueMicrotask(() => console.log("microtask"));
``
**Output**: `promise, microtask, timeout` (or `microtask, promise, timeout`   microtasks run in FIFO order).

All microtasks run before the macrotask (`timeout`).

### Why the Distinction?

- **Microtasks** are for short, high-priority work that should run before rendering (promise resolution).
- **Macrotasks** are for longer, user-facing work (timers, events, I/O).

### Starvation

```js
function recursive() {
  Promise.resolve().then(recursive);
}
recursive();
setTimeout(() => console.log("never"), 0);
// "never" is never logged   microtasks starve the macrotask queue
``
If microtasks keep adding more microtasks, macrotasks never run. The page freezes.

### Rendering

The browser renders between macrotasks. Microtasks run before rendering, so long microtasks can delay the paint.

### The Takeaway

Microtasks (promises, queueMicrotask) are drained completely before any macrotask and before rendering. Macrotasks (timers, events, I/O) run one at a time with microtasks drained after each. Microtasks can starve macrotasks. This priority difference explains why promises always run before setTimeout.