The Event Loop & Async Execution Model

Understanding the event loop isn't about memorizing output puzzles. It's about having a scheduling mental model — predicting when your code runs relative to rendering, user input, and other async operations.

The Architecture

┌─────────────────────────────────────────────────────────────┐
│                    JavaScript Runtime                        │
│  ┌──────────────┐    ┌──────────────────────────────────┐   │
│  │  Call Stack   │    │       Web APIs / Node APIs       │   │
│  │              │    │  (setTimeout, fetch, DOM events,  │   │
│  │  main()     │───→│   requestAnimationFrame, I/O)     │   │
│  │  fn()       │    └───────────┬──────────────────────┘   │
│  │  ...        │                │                          │
│  └──────┬───────┘                │                          │
│         │                        │                          │
│    Event Loop                    ▼                          │
│    ┌─────────────────────────────────────────────────┐      │
│    │  1. Drain Microtask Queue (ALL)                 │      │
│    │     Promise.then, queueMicrotask, MutationObserver│    │
│    │                                                  │      │
│    │  2. Pick ONE Macrotask                          │      │
│    │     setTimeout, setInterval, I/O callbacks      │      │
│    │                                                  │      │
│    │  3. Render (if needed, ~16ms for 60fps)         │      │
│    │     requestAnimationFrame → Style → Layout      │      │
│    │     → Paint → Composite                         │      │
│    │                                                  │      │
│    │  4. requestIdleCallback (if time remaining)     │      │
│    │                                                  │      │
│    │  → Go to step 1                                 │      │
│    └─────────────────────────────────────────────────┘      │
└─────────────────────────────────────────────────────────────┘

Microtasks vs Macrotasks

This distinction is the core of event loop understanding:

Microtasks (Higher Priority)	Macrotasks (Lower Priority)
`Promise.then/catch/finally`	`setTimeout` / `setInterval`
`queueMicrotask()`	`setImmediate` (Node)
`MutationObserver`	I/O callbacks
`process.nextTick` (Node)	UI rendering
`await` continuations	`requestAnimationFrame`*

*rAF runs at a specific point in the render cycle, between microtasks and the next macrotask.

The Critical Rule

ALL microtasks drain before the next macrotask or render. This means:

// Microtask chain blocks rendering
Promise.resolve().then(() => {
  // This runs before any setTimeout, before any render
  Promise.resolve().then(() => {
    // This ALSO runs before any setTimeout or render
    // You can chain infinitely — it will block everything
  });
});
setTimeout(() => console.log('macro'), 0); // Waits for ALL microtasks

The Complete Execution Order

console.log('1 - sync');
 
setTimeout(() => console.log('2 - macro'), 0);
 
Promise.resolve()
  .then(() => console.log('3 - micro'))
  .then(() => console.log('4 - micro (chained)'));
 
queueMicrotask(() => console.log('5 - micro (queued)'));
 
requestAnimationFrame(() => console.log('6 - rAF'));
 
console.log('7 - sync');

Output:

1 - sync
7 - sync
3 - micro
5 - micro (queued)
4 - micro (chained)
2 - macro
6 - rAF (next render frame)

Why This Order?

Synchronous code runs to completion (1, 7)
Call stack empty → drain microtask queue (3, 5, 4) — note: chained .then creates a new microtask
Render step: rAF callbacks run (6)
Pick next macrotask (2)

The Render Pipeline Integration

One frame (~16ms at 60fps):
 
├── Execute macrotask (or microtask flush)
├── Drain microtask queue
├── requestAnimationFrame callbacks
├── Style recalculation
├── Layout
├── Paint
├── Composite
├── requestIdleCallback (if time remains in frame)
└── → Next frame

Why This Matters for UI

// ❌ Blocks rendering — microtask loop
function busyMicrotasks() {
  let i = 0;
  function loop() {
    if (i++ < 100000) {
      queueMicrotask(loop); // 100K microtasks — no render until done
    }
  }
  loop();
}
 
// ✅ Yields to renderer — uses macrotasks
function yieldingWork() {
  let i = 0;
  function chunk() {
    const end = Math.min(i + 1000, 100000);
    while (i < end) processItem(i++);
    if (i < 100000) setTimeout(chunk, 0); // Yields between chunks
  }
  chunk();
}

Timing APIs and When to Use Each

setTimeout(fn, 0) — "Do this later"

// Defers to next macrotask — after microtasks AND potentially after a render
setTimeout(() => {
  // Good for: breaking up long synchronous work
  // Bad for: anything that needs to happen before next paint
}, 0);

Minimum delay: Browsers clamp nested setTimeout to 4ms after 5 levels of nesting.

queueMicrotask(fn) — "Do this ASAP, but after current task"

queueMicrotask(() => {
  // Runs before any macrotask or render
  // Good for: state updates that must be consistent before next render
  // Bad for: heavy work (blocks rendering)
});

requestAnimationFrame(fn) — "Do this before next paint"

requestAnimationFrame(() => {
  // Synchronized with display refresh (~60fps)
  // Good for: DOM measurements, animations, visual updates
  // Each callback gets a DOMHighResTimeStamp
  element.style.transform = `translateX(${position}px)`;
});

requestIdleCallback(fn) — "Do this when you have free time"

requestIdleCallback((deadline) => {
  while (deadline.timeRemaining() > 0 && tasks.length > 0) {
    processTask(tasks.shift());
  }
  if (tasks.length > 0) {
    requestIdleCallback(processRemainingTasks);
  }
}, { timeout: 2000 }); // Force execution after 2s even if busy

Good for: Analytics, prefetching, non-critical computations.

Comparison

API	Priority	When it runs	Use for
`queueMicrotask`	Highest	Before next task/render	Critical state consistency
`requestAnimationFrame`	High	Before next paint	Visual updates, animations
`setTimeout(fn, 0)`	Medium	Next macrotask	Yielding, deferring work
`requestIdleCallback`	Lowest	When browser is idle	Background work, analytics

async/await and the Event Loop

await pauses the function and schedules the continuation as a microtask:

async function example() {
  console.log('A');        // Sync
  await Promise.resolve(); // Pauses here, schedules rest as microtask
  console.log('B');        // Runs as microtask
}
 
console.log('1');
example();
console.log('2');
 
// Output: 1, A, 2, B

The code after await is essentially the .then() callback — it runs after the current synchronous code completes.

Node.js Differences

Node.js has additional phases:

   ┌───────────────────────────┐
┌─>│           timers          │  setTimeout, setInterval
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     pending callbacks     │  System-level callbacks
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │        poll (I/O)         │  File, network callbacks
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │       setImmediate        │  After I/O, before timers
│  └─────────────┬─────────────┘
│  ┌─────────────┴─────────────┐
│  │     close callbacks       │  socket.destroy(), etc.
│  └───────────────────────────┘

process.nextTick runs before any other microtask — it's even higher priority than Promise.then.

Common Pitfalls

Microtask Starvation

// This freezes the browser — rendering never gets a chance
function infinite() {
  Promise.resolve().then(infinite);
}
infinite(); // ☠️ Blocks ALL macrotasks and rendering

The "setTimeout is not a timer" Misconception

setTimeout(fn, 100); // "Run fn after AT LEAST 100ms, not exactly 100ms"

If the main thread is busy for 200ms, the callback won't run until 200ms+ even though 100ms was specified.

Promise.resolve() vs new Promise(resolve => resolve())

// Both create resolved promises, but:
Promise.resolve(value); // If value is a Promise, returns it as-is (no wrapping)
new Promise(resolve => resolve(value)); // Always creates a new Promise wrapper

Interview Signal

Senior candidates demonstrate:

The full loop — Microtasks → render → macrotask, not just "microtask before macrotask"
Render integration — Where rAF fits, why microtask floods block painting
Practical scheduling — Choosing the right API for the right timing need
Starvation awareness — Understanding that microtasks can block everything
Node.js awareness — process.nextTick, setImmediate, the poll phase