Microtasks vs Macrotasks (Event Loop Deep Dive)0%
Custom Promise Implementation

Microtasks vs Macrotasks (Event Loop Deep Dive)

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Microtasks vs Macrotasks (Event Loop Deep Dive)

Mastering the JavaScript Event Loop requires understanding the boundary between the Microtask Queue (Job Queue) and the Macrotask Queue (Task Queue). Misunderstanding task scheduling leads to subtle race conditions, delayed rendering frames, and interface freezes.

1. The Two Asynchronous Queues

JavaScript categorizes asynchronous callbacks into two distinct queues with vastly different execution priorities:

Output
┌──────────────────────────────────────────────────────────────┐
│ THE EVENT LOOP CYCLE │
├──────────────────────────────────────────────────────────────┤
│ 1. Execute one MACROTASK from the Task Queue │
│ 2. Execute ALL MICROTASKS in the Microtask Queue │
│ (until the microtask queue is COMPLETELY EMPTY!) │
│ 3. Perform UI Render / Repaint (if necessary, ~16ms/60fps) │
│ 4. Repeat cycle! │
└──────────────────────────────────────────────────────────────┘
Queue TypeAPIs & TriggersDrain Behavior
Microtask QueuePromise.then/catch/finally, queueMicrotask(), process.nextTick (Node), MutationObserverDrained completely to zero items before moving to rendering or next macrotask
Macrotask QueuesetTimeout, setInterval, setImmediate (Node), I/O events, UI clicks/keyboard eventsExecutes one single task, then cedes control to microtasks and rendering

2. Execution Order Tracing

Analyze this classic interview test case:

JavaScript
console.log('1. Script Start (Sync)');
 
setTimeout(() => {
console.log('2. setTimeout (Macrotask)');
}, 0);
 
Promise.resolve().then(() => {
console.log('3. Promise 1 (Microtask)');
}).then(() => {
console.log('4. Promise 2 (Microtask)');
});
 
queueMicrotask(() => {
console.log('5. queueMicrotask (Microtask)');
});
 
console.log('6. Script End (Sync)');

Execution Step-by-Step:

  1. 1
    Synchronous code runs first:
  • Logs 1. Script Start (Sync)
  • Schedules setTimeout callback in Macrotask Queue.
  • Schedules Promise 1 in Microtask Queue.
  • Schedules queueMicrotask in Microtask Queue.
  • Logs 6. Script End (Sync)
  1. 1
    Call Stack is now empty! Event Loop checks Microtask Queue:
  • Runs Promise 1 -> logs 3. Promise 1 (Microtask) -> schedules Promise 2 in Microtask Queue!
  • Runs queueMicrotask -> logs 5. queueMicrotask (Microtask).
  • Runs Promise 2 -> logs 4. Promise 2 (Microtask).
  • Microtask Queue is now completely empty.
  1. 1
    Event Loop checks Macrotask Queue:
  • Runs setTimeout callback -> logs 2. setTimeout (Macrotask).

Final Console Output Order: 1 -> 6 -> 3 -> 5 -> 4 -> 2

3. Microtask Starvation (UI Freeze)

Because the engine must drain the entire Microtask Queue before rendering or moving to the next macrotask, recursively scheduling microtasks will freeze the browser completely:

JavaScript
// DANGER: Freezes browser tab completely! UI never repaints!
function infiniteMicrotask() {
Promise.resolve().then(infiniteMicrotask);
}
// infiniteMicrotask(); // Call stack never yields to UI paint!

4. When to Use queueMicrotask()

The queueMicrotask() standard API allows you to schedule a function to run asynchronously after the current synchronous function finishes, but before browser rendering or timer macrotasks:

JavaScript
function trackTelemetry(event) {
// Enqueue telemetry without blocking current synchronous work,
// but ensure it executes before the next render frame:
queueMicrotask(() => {
sendBeacon('/analytics', event);
});
}
Interactive Quiz

Practice Quiz

Question 1
What is the execution priority between the Microtask Queue and the Macrotask Queue?
Question 2
Which of the following schedules a callback in the Microtask Queue?
Question 3
What happens if microtasks recursively enqueue new microtasks indefinitely?
Question 4
How many macrotasks does the Event Loop execute before checking the microtask queue?
Question 5
What standard Web API allows developers to explicitly enqueue a callback into the microtask queue without creating a dummy Promise?
Next Lesson

Custom Promise Implementation

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Top-Level Await in ES ModulesCustom Promise Implementation

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext