Browser Event Loop

Step0 / 23

Interactive Script

1button.addEventListener('click', () => {
2 console.log("Click handler start")
3
4 fetch("/api/data")
5 .then(res => res.json())
6 .then(data => {
7 console.log("Data received")
8 document.getElementById("result")
9 .textContent = data.message
10 })
11
12 queueMicrotask(() => {
13 console.log("Microtask 1")
14 })
15
16 requestAnimationFrame(() => {
17 element.style.opacity = "1"
18 element.classList.add("visible")
19 })
20
21 setTimeout(() => {
22 console.log("Timeout fired")
23 Promise.resolve().then(() => {
24 console.log("Micro in timeout")
25 })
26 }, 0)
27
28 console.log("Click handler end")
29})

Call Stack

empty
EVENTLOOP(one task per turn)MacrotasksetTimeout / click / fetchMicrotasksPromise / queueMicrotaskrAFrequestAnimationFrameRenderStyle → Layout → PaintIdlerequestIdleCallback
0

Press "Next" to start

Walk through a click → fetch → DOM update flow in the browser event loop

Web APIs
idle

Task Queues

Task Queue
empty
Microtask Queue
empty
rAF Queue
empty