The Event Loop, Microtasks, and Macrotasks: A Visual Explanation

I’ve spent the better part of a decade writing JavaScript that pretends to be synchronous. I’ve built real‑time dashboards, complex state machines, and APIs that handle thousands of requests per second. And for years, I thought I understood the event loop. I’d nod along to talks, recite “non‑blocking I/O,” and move on. Then one night, I was debugging a bug that only happened in production. A setTimeout with 0 milliseconds was delaying a UI update just enough that a user could click a button twice. I added a Promise.resolve().then() , and suddenly the timing changed. I sat there, staring at my screen, realizing I didn’t actually know the order of things. I knew the words “microtask” and “macrotask,” but I didn’t feel them. That night, I went down a rabbit hole that changed how I see our runtime. I stopped treating the event loop as a technical specification and started seeing it as a choreographed dance a piece of visual art that runs inside every Node.js process and every browser tab.