Event Loop — Microtasks vs Macrotasks

console.log("1: Start");          // → Call stack: runs immediately

setTimeout(() => {
  console.log("2: Timeout");       // → Web API handles the timer
}, 0);                              //   then pushes callback to macrotask queue

fetch("/api/data")                  // → Web API handles the network request
  .then(() => {
    console.log("3: Fetch done");   //   then pushes .then() to microtask queue
  });

console.log("4: End");             // → Call stack: runs immediately

// Output: "1: Start", "4: End", "3: Fetch done", "2: Timeout"

while (true) {
  // 1. Run all synchronous code (call stack)
  executeSyncCode();

  // 2. Drain ALL microtasks
  while (microtaskQueue.length > 0) {
    executeMicrotask(microtaskQueue.shift());
  }

  // 3. Render if needed (~60fps)
  if (shouldRender()) {
    runRAFCallbacks();
    render();
  }

  // 4. Pick ONE macrotask
  if (macrotaskQueue.length > 0) {
    executeMacrotask(macrotaskQueue.shift());
  }
  // → back to step 2
}

// Each of these creates a macrotask:

setTimeout(() => console.log("timeout"), 0);

setInterval(() => console.log("interval"), 1000);

// DOM event handlers are also macrotasks
button.addEventListener("click", () => {
  console.log("click handler");  // macrotask
});

// MessageChannel
const channel = new MessageChannel();
channel.port1.onmessage = () => console.log("message");
channel.port2.postMessage("");

// Each of these creates a microtask:

Promise.resolve().then(() => console.log("promise"));

queueMicrotask(() => console.log("queueMicrotask"));

// async/await — code after await is a microtask
async function example() {
  console.log("before await");     // sync — runs immediately
  await fetch("/api");
  console.log("after await");      // microtask — runs when promise resolves
}

// MutationObserver
const observer = new MutationObserver(() => {
  console.log("DOM mutated");      // microtask
});

Promise.resolve()
  .then(() => {
    console.log("micro 1");
    // This schedules ANOTHER microtask — it runs immediately
    // before any macrotask, in the same flush
    Promise.resolve().then(() => console.log("micro 2"));
  });

setTimeout(() => console.log("macro 1"), 0);

// Output:
// "micro 1"
// "micro 2"    ← runs before macro, even though scheduled later
// "macro 1"

console.log("1");

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

Promise.resolve().then(() => {
  console.log("3");
});

console.log("4");

console.log("start");

setTimeout(() => console.log("timeout"), 0);

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

console.log("end");

setTimeout(() => {
  console.log("timeout 1");
  Promise.resolve().then(() => console.log("promise inside timeout"));
}, 0);

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

Promise.resolve().then(() => {
  console.log("promise 1");
});

Promise.resolve().then(() => {
  console.log("promise 2");
});

console.log("sync");

┌─────────────────────────────────────────────────────┐
│                    CALL STACK                       │
│  (executes one function at a time, LIFO)            │
│  ┌─────────────────────────────────────────┐        │
│  │  Currently executing function           │        │
│  └─────────────────────────────────────────┘        │
└──────────────────────┬──────────────────────────────┘
                       │
                       │  When stack is empty...
                       ▼
┌──────────────────────────────────────────────────────┐
│                   EVENT LOOP                         │
│                                                      │
│   1. Stack empty?                                    │
│   2. Drain ALL microtasks  ◄──┐                      │
│   3. Render (if needed)       │                      │
│   4. Pick ONE macrotask ──────┘  (then back to 2)    │
│                                                      │
└───────┬──────────────────────────────┬───────────────┘
        │                              │
        ▼                              ▼
┌───────────────────┐    ┌─────────────────────────┐
│  MICROTASK QUEUE  │    │    MACROTASK QUEUE      │
│  (high priority)  │    │    (normal priority)    │
│                   │    │                         │
│  • Promise.then() │    │  • setTimeout()         │
│  • queueMicrotask │    │  • setInterval()        │
│  • await resume   │    │  • DOM events           │
│  • MutationObs.   │    │  • MessageChannel       │
│                   │    │                         │
│  Drained FULLY    │    │  Picked ONE at a time   │
│  between tasks    │    │                         │
└───────────────────┘    └─────────────────────────┘

                    ┌──────────────┐
                    │   WEB APIs   │
                    │  (browser)   │
                    │              │
                    │  • Timers    │
                    │  • fetch()   │
                    │  • DOM       │
                    │              │
                    │  Runs async  │
                    │  work, then  │
                    │  pushes to   │
                    │  queues      │
                    └──────────────┘

── Tick Start ──────────────────────────────────────

  Call Stack:  [script]  → runs all sync code
                         → schedules setTimeout (→ macrotask queue)
                         → schedules Promise.then (→ microtask queue)
               [empty]

  Microtask Queue:  [promise callback]
                    → execute promise callback
                    → (if it creates more microtasks, run those too)
                    [empty]

  Render:  (browser may paint here — ~16ms budget)

  Macrotask Queue:  [setTimeout callback]
                    → execute ONE setTimeout callback
                    → back to microtask drain

── Tick End ────────────────────────────────────────

// ❌ DANGER: Infinite microtask loop — freezes the browser
function recurse() {
  Promise.resolve().then(() => recurse());
}
recurse();
// The microtask queue never empties.
// setTimeout callbacks, click handlers, and rendering
// are ALL blocked. The page is frozen.

// ✅ SAFE: Use setTimeout to yield to the event loop
function safeRecurse() {
  setTimeout(() => safeRecurse(), 0);
}
// Each iteration is a macrotask, so microtasks and
// rendering get a chance to run between iterations.

// ❌ Blocks UI for ~2 seconds
button.addEventListener("click", () => {
  // Heavy sync computation — nothing else runs
  for (let i = 0; i < 1_000_000_000; i++) { /* ... */ }
  updateUI();  // UI only updates AFTER the loop
});

// ✅ Break work into chunks with setTimeout
button.addEventListener("click", () => {
  let i = 0;
  function chunk() {
    const end = Math.min(i + 1_000_000, 1_000_000_000);
    for (; i < end; i++) { /* ... */ }
    if (i < 1_000_000_000) {
      setTimeout(chunk, 0);  // Yield to event loop
    } else {
      updateUI();
    }
  }
  chunk();
});

// Modern approach: scheduler.yield() (Chrome 129+)
async function processItems(items) {
  for (const item of items) {
    processItem(item);

    // Yield to the event loop — lets browser render
    // and higher-priority tasks run
    await scheduler.yield();
  }
}

// Classic approach: setTimeout chunking
function processItemsClassic(items) {
  let index = 0;
  function chunk() {
    const deadline = performance.now() + 5; // 5ms budget
    while (index < items.length && performance.now() < deadline) {
      processItem(items[index++]);
    }
    if (index < items.length) {
      setTimeout(chunk, 0); // Yield
    }
  }
  chunk();
}