Topic

Event Loop, Tasks & Microtasks

Main thread + task queue + microtask queue + rendering ticks, rAF, setTimeout, promises, and task starvation.

event-looptasksmicrotasks

HTML

sample

<button id="task">Queue Task</button>

CSS

sample

button { padding: 12px 16px; }

JavaScript

sample

setTimeout(() => console.log('macrotask'), 0); Promise.resolve().then(() => console.log('microtask'));

Visualizer

Event Loop

Task queue, microtasks, and rendering ticks.

Visualizer

Event Loop

Call stack, task queue, and microtask queue with rendering ticks.

live

Controls

Rendering ticks queued: 0

Visualization

Call stack

empty

Task queue

setTimeout cb

Microtasks

promise microtask

Why this matters

Connect the dots between specs (HTML, CSS, WebIDL) and engine behaviors (parser, layout, GPU). Use the sandbox to reproduce each step with your own snippets.