Microtasks vs Macrotasks
Key Differences
| Aspect | Microtasks | Macrotasks |
|---|---|---|
| Priority | High | Low |
| Examples | Promises, queueMicrotask, MutationObserver | setTimeout, setInterval, setImmediate, I/O, UI rendering |
| Execution | After current task, before next macrotask | After all microtasks are cleared |
| Queue Type | Microtask Queue (Job Queue) | Callback Queue (Task Queue) |
Example 1: Execution Order Demonstration
JavaScript Editor
Microtask Sources
Promise.then/catch/finallyqueueMicrotask()MutationObservercallbacksprocess.nextTick()(Node.js)- Some browser-specific APIs
Macrotask Sources
setTimeout/setIntervalsetImmediate(Node.js)- I/O operations
- UI rendering
- Event listeners (click, scroll, etc.)
requestAnimationFrame
Example 2: Mutation Observer (Microtask)
JavaScript Editor
Example 3: queueMicrotask API
JavaScript Editor
⚠️ Common Pitfalls
Microtask Starvation
If you keep adding microtasks recursively, macrotasks never get a chance to run.
JavaScript Editor
Blocking Between Microtasks
Microtasks run to completion - long-running microtasks block rendering.
JavaScript Editor
Exercise: Fix the Task Ordering Issue
JavaScript Editor
