The JavaScript Event Loop Explained in Detail

// This single code snippet uses all four components
 
console.log("1: Call stack (sync)");
 
setTimeout(() => {
  console.log("4: Task queue (setTimeout)");
}, 0);
 
fetch("/api").then(() => {
  console.log("3: Microtask queue (Promise)");
});
 
console.log("2: Call stack (sync)");
 
// Output:
// 1: Call stack (sync)
// 2: Call stack (sync)
// 3: Microtask queue (Promise)  -- runs before setTimeout!
// 4: Task queue (setTimeout)

console.log("A"); // 1: Sync
 
setTimeout(() => console.log("B"), 0); // Web API -> task queue
 
Promise.resolve()
  .then(() => console.log("C"))  // -> microtask queue
  .then(() => console.log("D")); // -> microtask queue (added when C runs)
 
queueMicrotask(() => console.log("E")); // -> microtask queue
 
console.log("F"); // 2: Sync

// DANGEROUS: Infinite microtask loop — blocks the event loop
function recurse() {
  Promise.resolve().then(recurse);
}
recurse();
// setTimeout below NEVER fires because microtask queue never empties
setTimeout(() => console.log("Never"), 0);

async function main() {
  console.log("A"); // Sync
 
  await Promise.resolve(); // Suspend here, add continuation as microtask
 
  console.log("B"); // Runs as microtask after "D"
 
  await Promise.resolve();
 
  console.log("C"); // Runs as second microtask
}
 
main();
console.log("D"); // Sync, runs before B
 
// Output: A, D, B, C

async function fetchUser() {
  console.log("1: Start fetch");
  const res = await fetch("/user"); // Suspends here
  console.log("3: Got response"); // Microtask when fetch resolves
  const data = await res.json();    // Suspends again
  console.log("4: Parsed data");   // Microtask when json() resolves
  return data;
}
 
console.log("0: Before async call");
fetchUser();
console.log("2: After async call (sync)");
 
// 0: Before async call
// 1: Start fetch
// 2: After async call (sync)
// 3: Got response    (after network, as microtask)
// 4: Parsed data     (after JSON parse, as microtask)

// These three DOM mutations all happen in one frame
element.style.width = "100px";
element.style.height = "100px";
element.style.background = "red";
// Browser doesn't repaint between these lines
// All changes are batched into one render cycle
 
// BUTs:
element.offsetHeight; // FORCED REFLOW — reads layout, forces immediate recalculation
element.style.width = "200px"; // Now triggers TWO layouts (expensive)

// Node.js specific ordering
const { setImmediate } = require('timers');
 
setTimeout(() => console.log("setTimeout"), 0);
setImmediate(() => console.log("setImmediate")); // Runs in 'check' phase
 
// In Node.js, the order of setTimeout(fn, 0) vs setImmediate is non-deterministic
// from the main module. Inside an I/O callback, setImmediate always runs first
 
process.nextTick(() => console.log("nextTick")); // Like queueMicrotask, runs first

// Full demonstration
console.log("[1] Sync start");
 
setTimeout(() => console.log("[6] Timeout 1"), 0);
setTimeout(() => console.log("[7] Timeout 2"), 0);
 
new Promise((resolve) => {
  console.log("[2] Promise executor (sync!)");
  resolve();
})
  .then(() => {
    console.log("[4] Promise then 1");
    queueMicrotask(() => console.log("[5] Nested microtask"));
  });
 
console.log("[3] Sync end");
 
// Execution order:
// [1] Sync start
// [2] Promise executor (sync!) -- executor runs synchronously!
// [3] Sync end
// [4] Promise then 1            -- microtask
// [5] Nested microtask          -- microtask added during microtask drain
// [6] Timeout 1                 -- first macrotask
// [7] Timeout 2                 -- second macrotask (next iteration)

// BAD: One 500ms task freezes the UI
function expensiveOperation() {
  const start = Date.now();
  while (Date.now() - start < 500) {} // Block for 500ms
  console.log("Done");
}
expensiveOperation();
// UI is frozen for 500ms
 
// GOOD: Break work into chunks using setTimeout to yield to rendering
function expensiveInChunks(items) {
  const CHUNK_SIZE = 100;
  let index = 0;
 
  function processChunk() {
    const end = Math.min(index + CHUNK_SIZE, items.length);
    for (; index < end; index++) {
      processItem(items[index]);
    }
 
    if (index < items.length) {
      setTimeout(processChunk, 0); // Yield — allows rendering and other tasks
    }
  }
 
  processChunk();
}