Advanced JavaScript — Event Loop, Microtasks & Async Internals

The JavaScript event loop is the hidden engine that powers asynchronous behaviour in browsers, Node.js, mobile runtimes, UI frameworks, and high-performance servers. Although JavaScript is single-threaded, it achieves concurrency using a sophisticated scheduling system built around the call stack, task queues, microtask queues, Web APIs, and the event loop cycle. Understanding this system is essential for writing non-blocking code, fixing race conditions, preventing UI freezes, and optimising back-end performance. Most bugs in async JavaScript come from not understanding when something executes — not how it executes.

The event loop is designed around one rule: JavaScript never pauses the main thread. Instead, long-running operations (network requests, timers, DOM events, I/O, file operations) run in the background through browser/Node APIs. Once finished, they push callbacks into queues, which the event loop processes in a strict order.

🔥 Call Stack — The Execution Engine

The call stack is a LIFO (Last In, First Out) structure. Each time a function executes, the engine creates a new execution context and pushes it onto the stack.

function a() {
  b();
}
function b() {
  console.log("B");
}
a();

Stack order: global() → a() → b() → console.log()

When the stack is empty, the event loop may process queued callbacks. A blocked stack freezes everything — this is why infinite loops freeze your browser.

🔥 Web APIs / Node APIs — Async Work is Not Done by JavaScript

JavaScript itself cannot do asynchronous work. Instead, browsers have Web APIs and Node.js has C++ bindings and libuv threadpool.

setTimeout(() => console.log("Done"), 1000);

setTimeout does not wait inside JavaScript. It is delegated to browser timers. When done, the callback is pushed to the macrotask / task queue.

🔥 Macrotask Queue (Task Queue) — Timers, I/O, Rendering

Macrotasks (also called "tasks") include: setTimeout, setInterval, setImmediate (Node), requestAnimationFrame, DOM events, File I/O callbacks, Network callbacks, MessageChannel, Script parsing.

console.log(1);
setTimeout(() => console.log(2), 0);
console.log(3);

Output: 1 3 2. Even setTimeout(...,0) is never immediate — it always waits for the next loop cycle.

🔥 Microtask Queue — Higher Priority Than Everything Else

Microtasks include: Promise callbacks (.then, .catch, .finally), MutationObserver, queueMicrotask(), async/await continuations, some V8 internal jobs.

Microtasks run before any macrotasks — and after each synchronous execution block.

console.log("A");

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

console.log("C");

Output: A C B. This is because microtasks run after the call stack empties but before any macrotasks.

🔥 Microtasks Can Starve the Event Loop

Because microtasks run before macrotasks, infinite microtask scheduling blocks timers and event handlers:

function loop() {
    Promise.resolve().then(loop);
}
loop();

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

The timer never fires. This is called microtask starvation and is a real source of production bugs.

🔥 Event Loop Order — The Golden Rule

Every cycle works like this:

1. Execute everything in the call stack
2. Execute the entire microtask queue (until empty)
3. Render updates (browser only)
4. Execute one macrotask
5. Repeat forever

This priority system means: Promises always beat setTimeout, await resolves before timers, UI updates may be delayed if microtasks are heavy.

🔥 Promises vs setTimeout — Why Promises Always Win

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

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

Output: Promise Timeout. Because Promise callbacks = microtasks, setTimeout = macrotask. Microtasks always run first.

🔥 Async/Await — It's Just Syntactic Sugar Over Promises

async function test() {
    console.log(1);
    await null;
    console.log(2);
}
test();
console.log(3);

Output: 1 3 2. Because await splits function into two parts. The second part becomes a microtask.

🔥 Long Example: Understanding Full Async Flow

console.log("start");

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

Promise.resolve()
  .then(() => {
    console.log("promise1");
    return Promise.resolve();
  })
  .then(() => console.log("promise2"));

console.log("end");

Execution order:

1. "start" — sync
2. "end" — sync
3. Microtask queue: "promise1"
4. Microtask queue: "promise2"
5. Macrotask: "timeout"

Final output: start end promise1 promise2 timeout

🔥 The Major Async Queues of JavaScript

1. Microtask Queue (Highest Priority)

This queue instantly executes after every synchronous block. It contains: Promise reactions (then, catch, finally), queueMicrotask(), MutationObserver, Async/await continuation jobs.

Microtasks can "starve" the event loop — meaning they can block macrotasks indefinitely if scheduled too aggressively.

function loop() {
  queueMicrotask(loop);
}
loop();

setTimeout(() => console.log("Timeout never runs"), 0);

2. Animation Frame Queue (Browser Only)

This queue runs before the browser draws a new frame (ideally at 60fps). Used for: smooth animations, games, physics engines, canvas rendering, UI transitions.

requestAnimationFrame(() => {
  console.log("Runs before the next frame is painted");
});

3. Macrotask Queue (Lower Priority)

This includes: Timers (setTimeout, setInterval), UI events, I/O callbacks, MessageChannel, Script execution, Network callbacks (XHR), setImmediate (Node.js).

The event loop processes ONE macrotask per turn.

🔥 How Browsers Render Pages During the Event Loop

The browser executes tasks in this order:

1. Run JavaScript
2. Run all microtasks
3. Render UI changes (paint, style recalc, layout)
4. Run the next macro task

If microtasks run too long, the browser skips rendering cycles, causing: Lag, Frozen animations, Slow interactions, Delayed clicks, Janky scrolling.

🔥 How Node.js Differs From Browsers

Node.js uses libuv, which introduces more granular queues: Next Tick Queue (highest priority in Node), Promise/Microtask Queue, Timers Phase, Pending Callbacks, Idle/Prepare, Poll Phase, Check Phase (setImmediate), Close Callbacks.

setTimeout(() => console.log("Timeout"), 0);
setImmediate(() => console.log("Immediate"));

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

Output order varies between browser and Node. Promises always run before both.

🔥 Async Generators, Streams & the Event Loop

Async generators (async function*) create sequences of values pulled over time. Under the hood, each yield schedules a microtask before returning control to the caller.

async function* streamData() {
  yield "A";
  await new Promise(r => setTimeout(r, 0));
  yield "B";
  yield "C";
}

(async () => {
  for await (const v of streamData()) {
    console.log(v);
  }
})();

Output order: A B C. Microtasks schedule between each step. This model is used heavily in: live chat streams, video decoding pipelines, sensor feeds, AI inference batching, WebSocket data, game engines, backend log streams.

🔥 The Browser's Rendering Pipeline & The Event Loop

Each frame (ideally 16.6ms per frame) follows:

1. Handle user input
2. Run JavaScript
3. Run microtasks
4. Recalculate styles
5. Recalculate layout
6. Update layers
7. Paint
8. Commit frame to screen

If your JavaScript uses too many microtasks, the browser delays layout and painting. This causes: low FPS, stuttering animations, delayed click responses, broken transitions.

🔥 How requestIdleCallback() Helps

This function runs code only when: the browser is idle, CPU load is low, no urgent tasks exist.

requestIdleCallback(() => {
  console.log("Browser is idle, running safe work");
});

Great for: preloading assets, warm caching, indexing content, analytics batching, preparing UI transitions.

🔥 Network, Fetch & the Event Loop

Network requests (fetch) don't run inside JS. They run inside browser networking threads. When they finish, they schedule a macrotask.

console.log("Start");
fetch("url").then(() => console.log("Fetch done"));
console.log("End");

Output: Start End Fetch done

🔥 Professional Strategy for Predictable Async Code

1. Keep microtask chains short
2. Offload heavy computation
3. Prefer requestAnimationFrame for visual updates
4. Prefer requestIdleCallback for non-urgent tasks
5. Use Web Workers for anything CPU-heavy
6. Log execution order when debugging
7. Avoid deep Promise nesting
8. Test on slow devices
9. Remember Node and Browser ordering differ
10. Never rely on timers for precise orchestration

🔥 Final Example — Full Event Loop Ordering Breakdown

console.log("Start");

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

Promise.resolve()
  .then(() => console.log("Microtask 1"))
  .then(() => console.log("Microtask 2"));

requestAnimationFrame(() => console.log("Animation Frame"));

console.log("End");

Expected output: Start End Microtask 1 Microtask 2 Animation Frame Macrotask

This single example demonstrates the entire async system.