Why Your UI Doesn't Freeze: Inside JS Event Loop and Microtask Queues
Introduction JavaScript powers interactive web apps through its single-threaded model paired with clever async handling. This post breaks down the event loop and microtasks, explaining how they prevent blocking while keeping code predictable. Core Components Call Stack : Executes JS synchronously, one frame at a time (LIFO). Web APIs : Browser handles timers, fetch, DOM outside the JS thread. Task Queue (Macrotasks) : Holds callbacks from setTimeout, events, I/O. Microtask Queue : Prioritizes Promises, queueMicrotask, MutationObserver. Event Loop : Monitors stack; when empty, processes microtasks first, then macrotasks. How the Event Loop Works JS runs synchronously on the call stack. Async ops delegate to Web APIs. Completed callbacks queue: Promises → microtask queue; others → task queue. Loop checks: drain all microtasks, then one macrotask, repeat. Microtasks vs Macrotasks Aspect Microtasks Macrotasks Priority Higher (always before next macrotask) Lower Examples Promise.then(), que...