The JavaScript Event Loop Explained: Microtasks, Macrotasks and Execution Contexts
A visual step-by-step breakdown of how single-threaded JavaScript handles asynchronous operations, Promise microtask queues, setTimeout timers, and UI render ticks.
## Single-Threaded Non-Blocking Concurrency
JavaScript is single-threaded: it has exactly **one Call Stack** and executes one statement at a time. Yet, web applications handle thousands of concurrent network requests, UI clicks, and animations seamlessly.
This magic is powered by the **Event Loop** operating in coordination with browser Web APIs / Node.js libuv:
```text
[ Synchronous Call Stack ] βββββΆ (Runs statements to completion)
β
βΌ (Stack Empty)
[ Microtask Queue ] ββββββββββββΆ (Promise.then, queueMicrotask, MutationObserver)
β * Drained COMPLETELY before moving on!
βΌ
[ Animation Frame Queue ] ββββββΆ (requestAnimationFrame, UI Layout Repaint)
β
βΌ
[ Macrotask Queue (Task) ] βββββΆ (setTimeout, setInterval, I/O, setImmediate)
* Executes ONE single macrotask per tick!
```
π
76 Claps
ποΈ 304 views
•
π Share
More from Python & Backend