Summary
The event loop is the browser and JavaScript runtime mechanism that coordinates call stack execution, tasks, microtasks, rendering, timers, and async callbacks.
Interview Points
- JavaScript runs on a call stack; async work is scheduled back through queues.
- Macrotasks include timers, events, and network callbacks.
- Microtasks include promise callbacks and run before the browser moves to the next task.
- Rendering happens between event loop turns when the main thread is free.
- Too many microtasks or long synchronous work can starve rendering and input.
2-3 Minute Interview Script
“The event loop is how JavaScript stays single-threaded while still supporting async behavior. Synchronous code runs on the call stack. When we call async APIs like timers, fetch, or DOM events, the browser schedules callbacks into queues.
A key interview detail is the difference between tasks and microtasks. A timer or click handler is a task. Promise callbacks are microtasks, and the runtime drains microtasks before moving to the next task or giving the browser a chance to render.
This matters because performance bugs often come from blocking the event loop. A long synchronous calculation blocks input and rendering. A runaway promise chain can also starve rendering because microtasks keep running before the browser can paint.
So in real systems I keep interaction handlers small, chunk expensive work, use workers for CPU-heavy processing, and understand that async does not automatically mean non-blocking if the callback itself does too much.”
Follow-Ups
- Why do promises run before
setTimeout? - How can async code still freeze the UI?