Bugsy explains
What happens when you type a URL?
The quarter of a second between pressing Enter and seeing a page: DNS, TCP, TLS, HTTP and rendering, and the caches that let your browser skip most of it next time.
7 min 1 toy
- web
- security
You type example.com/learn, press Enter, and a page appears in about a quarter of a second. In that blink your browser did five separate jobs, and talked to at least two other computers.
Most of these jobs build on the Web world: packets, IP addresses and DNS, HTTP and HTTPS. This page puts them in order and shows why the order can't change.
Five jobs, each needing the one before
DNS turns the name example.com into an IP address, because packets are addressed to numbers, not names. TCP then opens a connection to that address: a short handshake that makes sure both sides are listening.
TLS runs over that connection. It checks the server's certificate, so you know you reached the real example.com, and agrees on keys that encrypt everything after it. That's the S in HTTPS.
Only now can HTTP do what you asked: send GET /learn and get the HTML back. Finally the browser renders: it reads the HTML, fetches the CSS and JavaScript it mentions, works out the layout and paints pixels. Step through it.
Try it
Quick check
What HTTPS hides, and what it can't
Everything after the TLS handshake is encrypted: the path /learn, the headers, cookies, passwords and the page itself. Someone on the same café Wi-Fi sees only scrambled bytes.
But some things travel before or outside the encryption. Packets need the server's IP address on the outside, like an envelope needs an address. And the DNS lookup and the sni=example.com in the first TLS message are usually sent in the clear, so the site's name shows too.
Quick check
Caching: the fastest work is work you skip
A DNS answer comes with a TTL (time to live), here 300 seconds. Your browser, your operating system and the resolver all keep the answer for up to that long, so the next lookup takes 0 ms.
The browser also keeps the connection open for a while after the page loads (servers close idle ones after seconds to minutes). The CSS, the JavaScript and the next page from the same server reuse it, skipping the TCP and TLS handshakes entirely.
And the browser cache keeps files it has already downloaded. The server says how long each one stays fresh with a Cache-Control header. A fresh file loads straight from disk, with no request at all.
HTTP/1.1 200 OKContent-Type: text/cssCache-Control: max-age=31536000ETag: "a1b2c3"
max-age=31536000 means this file stays fresh for one year (that many seconds). Once it goes stale, the browser asks again with the ETag; if nothing changed, the server answers 304 Not Modified with no body and the browser keeps its copy.
Boss question
Put it all together.
Quick check
Done reading?
Solve 3 more quick checks to finish.