JavaScript Event Loop Workflow

1. Call Stack Execution

2. Web APIs Processing

3. Callback Queue Check

4. Microtask Queue Priority

5. Render Queue (if needed)

Main Thread

Call Stack

main()

Memory Heap

Objects, closures, and variables
Garbage collection happens here

→

Event Loop

EVENT
LOOP

Microtask Queue

Promise.resolve()

Callback Queue (Macrotasks)

setTimeout callback

DOM event callback

←

Web APIs / Node.js APIs

setTimeout(fn, 1000)

fetch('/api/data')

DOM events

Intersection Observer

→

Execution Priority & Task Types

1. Synchronous Code (Highest)

Direct function calls, variable assignments, loops

2. Microtasks

Promise callbacks, queueMicrotask(), MutationObserver

3. Render Tasks

requestAnimationFrame, style calculations, layout

4. Macrotasks

setTimeout, setInterval, setImmediate, I/O callbacks

5. Idle Callbacks (Lowest)

requestIdleCallback when browser is idle

Real-world Execution Example:

console.log('1: Synchronous');

setTimeout(() => console.log('2: Macrotask (setTimeout)'), 0);

Promise.resolve().then(() => console.log('3: Microtask (Promise)'));

queueMicrotask(() => console.log('4: Microtask (queueMicrotask)'));

requestAnimationFrame(() => console.log('5: Render task (rAF)'));

console.log('6: Synchronous');

// Output order: 1, 6, 3, 4, 5, 2

Key Insights for Senior Developers:

🔄 Single-threaded execution: JavaScript runs on one thread, but Web APIs enable concurrency
⚡ Microtask priority: Always drain microtask queue before next macrotask
🎯 Render blocking: Long-running tasks block rendering, use time-slicing
🚀 Performance: Understanding the event loop is crucial for optimizing async operations
🧠 Memory leaks: Closures in callbacks can create memory leaks if not handled properly