🌐 HTTP Request Lifecycle

About this simulation

Every time a browser loads a page, calls an API, or submits a form, the same underlying journey happens: a DNS lookup resolves a hostname to an IP address, a TCP/TLS handshake opens a secure connection, an HTTP request travels to a server, gets processed across the web/application/database tiers, and a response travels back to be rendered. This scene visualizes that pipeline as glowing packets moving between a browser client, an edge/CDN node, and a three-tier backend.

How it works

• DNS + handshake — before any data moves, the browser resolves the domain and (for HTTPS) negotiates a TLS session with the server.
• Request packet — travels from client to the web server tier; a POST also continues down to the application and database tiers to write data.
• CDN cache — when enabled, cacheable GET responses are served straight from the edge node without ever reaching the origin server, cutting the round trip dramatically.
• Response packet — returns along the same tiers back to the browser, where the page is rendered.

Controls

• Network latency — simulated one-way network delay per hop (10–400ms), scaling packet travel time.
• Protocol — HTTPS adds a TLS handshake hop before the request; HTTP skips it.
• Request type — GET reads from cache/DB; POST always reaches the database tier to write, and is never served from cache.
• CDN cache — toggles whether a GET can be answered directly at the edge.
• ▶ Send request — fires a new request; drag to rotate the scene, scroll to zoom.

Did you know?

A well-tuned CDN cache hit can turn a ~200ms round trip into single-digit milliseconds, because the response never has to cross the public internet to an origin server at all — this is a major reason real sites cache aggressively.