Event loop & browser rendering internals

Step through the real browser event loop: macrotasks, microtasks, requestAnimationFrame, and the Style → Layout → Paint → Composite pipeline. The main thread and compositor thread are shown separately.

Inject tasks

Main thread

Heap (?)

JS heap objects

Call stack

Web APIs (timers, network, events)

Task queue (macrotasks)

Microtask queue

Animation callbacks

Render pipeline

Style

Layout

Paint

Composite

Compositor thread

GPU layers

Layer tree

Screen

Displayed pixels

Frame budget (60 fps ≈ 16.67 ms)

0 ms16.67 ms

Why this step?

Click a task button, then Step to see the explanation.

Event log

executing waiting frame overrun