Track E

The event loop, under the hood

How one thread runs everything: the call stack, the task and microtask queues, where rendering fits, promises and async/await as scheduling, Web Workers, and keeping the loop responsive.

1. The event loop: one thread, one task at a time

   JavaScript runs your entire application on a single thread, and yet it handles clicks, timers, and network responses without freezing — the trick is a loop that runs one task to completion, then picks up the next. This lesson builds that model (call stack, queues, the loop) from scratch, because it is the hidden engine under every async feature and every jank bug you will ever debug.

   12 min
2. The call stack and run-to-completion

   The event-loop lesson leaned on "the call stack" and "the stack is empty" as if they were obvious — this lesson zooms into a single task and shows exactly how frames push and pop, what an empty stack precisely signals to the loop, what a stack overflow actually is, and why the depth and duration of one task is the whole ballgame for responsiveness.

   12 min
3. Tasks and the task queue: timers, events, and the 4ms clamp

   The event-loop lesson's "task queue" was a black box holding whatever runs next — this lesson opens it up to show exactly what lands there (timers, DOM events, I/O completions), why setTimeout's delay is a minimum and never a guarantee, and the 4ms clamp that kicks in once timers nest deep enough.

   13 min
4. Microtasks and the checkpoint that drains them

   The single-queue picture from the first lesson is a simplification — there is a second, higher-priority microtask queue that gets fully drained after every task, and that one refinement is why a Promise callback always beats a zero-delay timer.

   12 min
5. Where rendering happens in the loop

   Rendering is not something the browser squeezes in whenever it feels like it — it is a specific, throttled step wedged into the event loop right after a task and its full microtask drain, and that one placement is what requestAnimationFrame actually is.

   13 min
6. Promises and async/await as event-loop constructs

   A Promise settling does not call your callback right away — it schedules a microtask, and async/await is just syntax that hides this same scheduling behind pause-and-resume syntax, which is why every ordering puzzle involving await dissolves once you see it as microtask queuing rather than magic.

   13 min
7. Web Workers: real threads across a message boundary

   Everything so far in this module has been one thread juggling itself — a Web Worker is the one genuine escape hatch, a second OS thread with its own complete event loop that talks to the main thread only by passing copied messages, never shared memory.

   13 min
8. Starvation, jank, and scheduling: keeping the loop responsive

   Run-to-completion means one long task can block every render and every click until it finishes, so this closing lesson is the practical toolkit for chunking work, yielding correctly, and using the browser's schedulers to keep the loop responsive — and the point where every idea from this whole module ties together.

   14 min