The JavaScript event loop: tasks, microtasks and rendering

What it is

A JavaScript agent is a single thread: each job runs to completion before the next one starts, so a long synchronous loop blocks clicks, timers and painting until it returns (MDN execution model). The HTML standard's event loop splits queued work into tasks (timers, I/O completions, events, script execution) and microtasks (promise reactions, queueMicrotask, MutationObserver callbacks). After each task the browser performs a microtask checkpoint: the microtask queue is drained completely, including microtasks enqueued while draining, before the next task is taken or a rendering opportunity occurs. await schedules the rest of an async function as a microtask.

Why it matters

Ordering surprises come from this model. console.log(1); setTimeout(() => console.log(2)); Promise.resolve().then(() => console.log(3)); console.log(4); prints 1, 4, 3, 2: synchronous code first, then microtasks, then the timer task. A loop that keeps scheduling microtasks never lets the page paint, whereas work split into tasks gives the browser a turn between chunks. Responsiveness metrics such as INP reflect how long the loop stays occupied around an interaction.

How to apply

• Keep each task short: chunk CPU-heavy loops and yield between chunks with a task-based pause, for example await new Promise(r => setTimeout(r)), so input and rendering can run.
• Move genuinely heavy computation to a Web Worker; the main thread only posts messages.
• Use queueMicrotask when something must run after the current synchronous code but before anything else (batching several synchronous calls into one update); it does not give the browser a turn.
• Do not read setTimeout(fn, 0) as "immediately": it runs after all pending microtasks and no earlier than the next task.
• Treat await in a loop as sequential; start independent promises first and await Promise.all(...).
• In Node.js there is an additional process.nextTick queue; consult its documentation before depending on the order between it and promise reactions.

Pitfalls

An exception thrown inside a task ends that task only; the loop continues, which makes errors easy to miss without a global handler. Event handlers run as part of the dispatch, so a slow click handler delays the visual response to that click. Microtasks queued by a MutationObserver can observe DOM state that was never painted. Timers are clamped and throttled by browsers in background tabs, so timing logic must not assume exact delays.