Follow one click across the Internet
Put every layer together in the journey of a single request.
- Trace a web request through every layer in this track.
- Identify which protocol does what at each step.
- Estimate where the time goes in a page load.
“What happens when you type a URL and press Enter?” is a classic interview question, because answering it well takes everything you've just learned. You can now explain every step, so let's follow one click from start to finish.
Try it
One click, end to end
Your laptop has just joined the network, so its caches are empty. You click a link to https://learn.example/lessons. Step through the journey and answer each prediction. The color shows which layer is doing the work, and the clock adds up as you go.
At the end, read the waterfall. Which steps took the longest, and what do they have in common?
- Application
- Transport
- Internet
- Link
Predict: The laptop knows the resolver's IP address, but that's on another network. Whose MAC address does it need?
That's only the first file. The HTML refers to images, styles and scripts, which reuse this connection. On a repeat visit, the DNS answer is cached and a connection may still be open, so most of those round trips vanish. Caching and connection reuse are the biggest performance wins on the web.
Count the round trips
You can estimate a first page load by counting round trips: one for DNS, one for TCP, one for TLS 1.3 and one for the request. Run this, then change rtt to see how a nearby server changes everything.
1rtt = 50
2
3first_visit = {"DNS": 1, "TCP": 1, "TLS": 1, "HTTP": 1}
4repeat_visit = {"HTTP": 1} # cached DNS, reused connection
5
6for name, steps in [("First visit", first_visit), ("Repeat visit", repeat_visit)]:
7 print(f"{name}: {sum(steps.values()) * rtt} ms")First visit: 200 ms Repeat visit: 50 ms
Try it
Which layer broke?
One last mixed review. Each symptom comes from a different lesson. Recalling them together, out of order, is what makes this knowledge last.
“A browser warns that the certificate name doesn't match”
“A switch keeps flooding frames for one host”
“A download slows after packet loss”
“A traceroute stops at the same router every time”
“A DNS record still shows the old address”
“Two hosts have the same IP address”
Key takeaways
A single click uses ARP, DNS, NAT, routing, TCP, TLS and HTTP.
Most of a first page load is waiting on sequential round trips.
Caching and connection reuse remove round trips, and that's why repeat visits are faster.
Lesson quiz
8 questions · pass with 6 correct · up to 50 XP
Passing this quiz completes the lesson and keeps your streak going. Questions you miss come back in review sessions later.
Practice: model networking concepts
Use small Python programs to model packet, address, and protocol behavior. These exercises run locally in your browser and do not send network traffic.
Estimate a page load
Read a round-trip time in milliseconds, then two lines that say yes or no: whether the DNS answer is cached, and whether a connection is already open.
An HTTP request always costs one round trip. Without a cached answer, add one for DNS. Without an open connection, add two more, for TCP and TLS. Print the total as N ms.
- A first visit
- A cached name
- A repeat visit
Python runs in a sandboxed browser worker with a 60 second time limit. Its runtime loads from the Pyodide CDN; your code stays in this browser.
Print the journey
Write the capstone by yourself, with no scaffolding this time. Read a URL such as https://learn.example/lessons. Print each step in order, one per line, in exactly this form:
1DNS: learn.example
2TCP: port 443
3TLS: learn.example
4HTTP: GET /lessonsFor http:// URLs, the port is 80 and the TLS line is skipped. If the URL has no path, use /.
- An HTTPS URL
- A plain HTTP URL
- No path
Python runs in a sandboxed browser worker with a 60 second time limit. Its runtime loads from the Pyodide CDN; your code stays in this browser.
Questions about this lesson
Stuck? Ask. Figured something out? Share it. Explaining is one of the best ways to learn.
Loading posts…