Micro vs Macro tasks
In short
Microtasks and macrotasks are different "task queues" that are processed at different times inside the Event Loop.
- Macrotasks are "large" events: timers, network requests, DOM events.
- Microtasks are "instant" tasks that run right after the current code, but before the next macrotask.
Comparison table
| Criterion | Macrotasks (Task Queue) | Microtasks (Microtask Queue) |
|---|---|---|
| When they run | After the stack and all microtasks are cleared | Right after the current code (before a macrotask) |
| Queue | Task Queue | Microtask Queue |
| Examples | setTimeout, setInterval, setImmediate, event handlers, fetch, XHR | Promise.then, Promise.catch, queueMicrotask, MutationObserver |
| Priority | lower | higher |
| Number run at once | One per Event Loop iteration | All microtasks in a row, until the queue is empty |
| Source | External browser APIs (Web API) | Built-in microtasks of the JS engine |
| Typical purpose | Deferred execution, asynchronous events | Reactions to promise settlement, small chains of actions |
An example showing the difference
javascript
console.log('1');
setTimeout(() => console.log('2'), 0);
Promise.resolve().then(() => console.log('3'));
console.log('4');Output order:
javascript
1
4
3
2Explanation:
1and4-> run synchronously (on the stack).Promise.then(...)-> goes into the microtask queue.setTimeout(...)-> goes into the macrotask queue.- After the stack clears, all microtasks run -> printing
3. - Then the first macrotask runs -> printing
2.
An important detail
After every macrotask, the Event Loop:
- Runs all microtasks (until the queue is empty),
- Then takes the next macrotask,
- Repeats the cycle.
Visually
javascript
┌─────────────────────────────────────────────────────┐
│ Function calls (Call Stack) │
│─────────────────────────────────────────────────────│
│ Microtasks (Microtask Queue) │ ← run right after the stack
│─────────────────────────────────────────────────────│
│ Macrotasks (Task Queue) │ ← run after the microtasks
└─────────────────────────────────────────────────────┘Summary
| What | When | Example |
|---|---|---|
| Microtask | After the current code, before macrotasks | Promise.then, queueMicrotask |
| Macrotask | After all microtasks | setTimeout, setInterval, fetch |
| Event Loop | Ensures the stack is empty -> microtasks -> macrotask -> repeat | - |
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.