200 Milliseconds: an interactive page tracks one HTTP request end to end

An interactive page from thenodebook.com, "200 Milliseconds", follows a single HTTP request through its entire 211.4-millisecond life: on a Tuesday morning at 9:41 someone in a San Francisco coffee shop clicks Buy, and 211.4 ms later the screen says "Order confirmed". The person who clicked noticed no delay. The clock at the top of the page is exact and ends at t = 0.211400 s; the story pauses while the clock freezes for short lessons, then resumes as you keep scrolling.

The journey

The request makes seven stops: the laptop on the shop's Wi-Fi, the access point that receives the radio signal and forwards it over a wire, the shop's ISP, roughly 4,700 km of glass fiber between San Francisco and Ashburn, Virginia, a load balancer with four Node.js processes behind it, the server process itself (PID 1447, deployed 23 days earlier), and a Postgres database that sits 0.35 ms away. By the time the confirmation renders, the request and its replies have crossed North America six times and passed through around forty machines running a hundred million lines of other people's code.

Where the clock goes

In the first five milliseconds the click is hardware and browser bookkeeping: a capacitance dip in the touchpad raises an interrupt, the HID driver, window server and Chrome's browser process pass the event to a sandboxed renderer, and hit testing resolves it to a buy button six boxes deep. The fetch to /api/checkout then misses all three caches — memory, service worker and disk — because POSTs are never cached and change state on the server. The socket pool holds no connection to api.thenodebook.com, so the request pays a cold start: TCP and TLS handshakes at 62 ms per round trip add up to 127 of the 211.4 milliseconds. The 203-byte plain-text request becomes a 225-byte TLS record and travels as just under 300 bytes on the wire; addresses stay readable at every hop because around forty machines must route the packet.

Cold versus warm

The published breakdown for the cold start is setup 7 ms, handshakes 127 ms, flight and paint 74 ms, server 3 ms. A second request on the same kept-alive connection takes about 95 ms — browser 5, one crossing 62, server 3, paint 25 — because the kept-alive socket and a session ticket remove the handshakes entirely. Between acts, the page stops the clock to explain sockets, ports, anycast routing, SYN cookies and authenticated encryption, then picks the story back up.