JS Asynchronous

JavaScript Asynchronous Architecture: The Event Loop & Microtasks

JavaScript executes code on a single thread. Asynchronous non-blocking concurrency is enabled by the runtime Event Loop, which orchestrates execution across the Call Stack, Web APIs, Macrotask Queue, and Microtask Queue.

Event Loop Architecture & Queues

flowchart TD
    CallStack["1. Call Stack (Synchronous Code Execution)"]
    WebAPIs["Web APIs (Timers, Fetch, DOM Events)"]
    MicroQueue["Microtask Queue (Promises, queueMicrotask, MutationObserver)"]
    MacroQueue["Macrotask Queue (setTimeout, setInterval, I/O)"]

    CallStack -->|Offload Async Tasks| WebAPIs
    WebAPIs -->|Promises Resolve| MicroQueue
    WebAPIs -->|Timer/IO Ready| MacroQueue

    CallStack -->|Stack Clears| EventLoop{"Event Loop Processing"}
    EventLoop -->|Priority 1: Drain ALL Microtasks| MicroQueue --> CallStack
    EventLoop -->|Priority 2: Process 1 Macrotask| MacroQueue --> CallStack

Queue Priority Matrix

Practical Code Example

// Demonstrating Event Loop execution order (Sync vs Microtasks vs Macrotasks)

console.log("1. Synchronous Start");

// Macrotask (setTimeout)
setTimeout(() => {
  console.log("5. Macrotask (setTimeout 0ms)");
}, 0);

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

// Microtask (queueMicrotask)
queueMicrotask(() => {
  console.log("3b. Microtask (queueMicrotask)");
});

console.log("2. Synchronous End");

// Output Order:
// 1. Synchronous Start
// 2. Synchronous End
// 3. Microtask 1 (Promise.then)
// 3b. Microtask (queueMicrotask)
// 4. Microtask 2 (Promise.then chain)
// 5. Macrotask (setTimeout 0ms)

Best Practices & Gotchas

• Microtasks Have Higher Priority Than Macrotasks: All microtasks in the Microtask Queue execute before the Event Loop picks up the next macrotask from setTimeout.
• Infinite Microtask Loops Freeze the UI Thread: Recursively queuing microtasks (function loop() { Promise.resolve().then(loop); }) starves the macrotask queue and completely freezes browser UI rendering.
• Single-Threaded CPU Blocking: Heavy synchronous loops (for (let i=0; i<1e9; i++)) block the call stack, preventing microtasks and event listeners from executing.

Self-Check Challenge

Predict the exact console output sequence of a script containing console.log("A"), setTimeout(() => console.log("B"), 0), and Promise.resolve().then(() => console.log("C")).