Rendering update vs. `setTimeout(0)`

Changing the selected color makes a visible DOM change, schedules a zero-delay timer containing a long task, and requests an animation frame.

Open this page in Chrome and Safari.
Alternate between colors for several runs.
Compare the reported ordering and Event Timing duration.

Settings Synchronous handler work (ms) Deferred timer work (ms)

Choose a different color for each run Blue Orange Green

Visual response

Ready

Choose a different color above.

Latest run

No run yet.

Handler duration: —
Handler end → first rAF: —
Timer duration: —
Observed Event Timing: —

Log

Waiting for an interaction…