Mastering the JavaScript Event Loop: Microtasks, Macrotasks, and Call Stack Execution

JavaScript is celebrated for its ability to handle asynchronous concurrency despite executing on a single main thread. To build high-performance web applications, developers must understand the execution cycle managed by the Event Loop inside modern engines like V8 or SpiderMonkey.

1. The Core Architecture: Call Stack & Web APIs

The JavaScript runtime splits operations across four primary structures:

• Call Stack (LIFO): Tracks execution contexts. When a function is invoked, it is pushed onto the stack. When execution completes, it is popped off. If the stack is blocked, the entire browser tab freezes.
• Web APIs: Browser background threads that handle asynchronous timers, AJAX HTTP network requests, and DOM event listeners. In Node.js, these are managed by C++ APIs via libuv worker pools.
• Microtask Queue: A high-priority queue holding callbacks for Promise resolutions (.then, .catch), async/await resume hooks, MutationObserver triggers, and queueMicrotask blocks.
• Macrotask Queue: A standard priority queue containing callbacks for setTimeout, setInterval, network triggers, and I/O handlers.

2. The Execution Lifecycle & Render Pipeline

The Event Loop processes tasks in a deterministic execution sequence:

1. Evaluate Sync Code: The engine executes the global script synchronously until the Call Stack is empty.
2. Flush the Microtask Queue: The loop continuously processes microtasks until the Microtask Queue is completely empty. If a microtask adds another microtask, it is executed within the current cycle. This can lead to main-thread starvation if not managed carefully.
3. Render GUI updates: The browser evaluates if a repaint is needed (typically every 16.7ms for 60fps) and executes style calculations, layout layouts, and pixels painting.
4. Execute One Macrotask: The loop takes exactly one task from the Macrotask Queue, pushes its callback onto the Call Stack, and runs it to completion. Once the Call Stack is empty, it returns to flush the Microtask Queue.

3. Code Trace Challenge: Visualizing the Order

To see this coordination in action, trace the output order of this script:

console.log("1. Main Script Start");

setTimeout(() => {
  console.log("2. Macrotask (Timeout)");
}, 0);

Promise.resolve().then(() => {
  console.log("3. Microtask 1");
}).then(() => {
  console.log("4. Microtask 2");
});

console.log("5. Main Script End");

Step-by-Step Traversal:

• Steps 1 & 5: Synchronous statements run instantly, logging 1. Main Script Start and 5. Main Script End.
• Step 2: setTimeout schedules its callback in the Macrotask Queue via the Web API thread.
• Steps 3 & 4: The first Promise callback is placed in the Microtask Queue. When the Call Stack empties, the loop flushes it, logging 3. Microtask 1. This returns a resolved promise, immediately queueing and logging 4. Microtask 2 in the same microtask phase.
• Step 5: The Event Loop proceeds to execute the single pending macrotask, logging 2. Macrotask (Timeout).

Final Console Logs: 1 -> 5 -> 3 -> 4 -> 2.

4. Main-Thread Optimization & Avoidance of Starvation

Executing long-running CPU calculations (such as parsing huge JSON arrays or manipulating image filters) on the main thread keeps the Call Stack blocked. This prevents user input interactions, resulting in poor Core Web Vitals scores.

To prevent this, delegate heavy processes to background Web Workers or split execution frames using requestIdleCallback or async chunks.