
The JS Event Loop isn't just a queue , here's the mental model most tutorials get wrong
Most explanations of the event loop teach you the mechanics but leave you with the wrong intuition. They show you a call stack and a task queue and say "JavaScript runs one thing at a time" , which is true but incomplete.
What they miss:
The microtask queue is not part of the event loop cycle in the way the task queue is. It drains completely after every task , including tasks queued by microtasks, before the loop moves on. This is why Promise chains never interleave with setTimeout callbacks.
The render step sits between tasks, not between microtasks. Queue enough microtasks and you'll block painting without blocking the call stack in any obvious way.
setTimeout(fn, 0) is a task queue entry. Promise.resolve().then(fn) is a microtask. These are fundamentally different lanes , not just different timings.
I wrote a deep dive on this with an interactive visualizer that animates every queue in real time as you run snippets. The framing is unconventional , I mapped it to Vedic karma and dharma as a mental model layer, but the mechanics are spec-accurate.
If you've ever been surprised by async execution order, this should close the gap permanently.
Interactive version: https://beyondcodekarma.in/javascript/js-event-loop/