Everyone Can Learn Program
中文 Start learning
Core · NetworksLesson 6 of 6Free to read

From URL to page · Computer Networks

What happens after you type a URL and press Enter?

Course contents

Why you need it

It's the classic interview question because the answer touches everything in this course: URLs, DNS, TCP, TLS, HTTP, caching and the browser. Being able to tell the story in order, and say where each kind of failure would show up, shows you understand how the web fits together.

The intuition

For https://shop.example.com/cart?id=7:

  1. Parse the URL: scheme https, host shop.example.com, port 443 (the default for https), path /cart, query id=7.
  2. DNS: look up the host's address (browser cache, OS cache, then a resolver).
  3. TCP: three-way handshake to address:443.
  4. TLS: agree on encryption keys and check the server's certificate is valid for that name.
  5. HTTP: send GET /cart?id=7 with headers (cookies too); get a status, headers and HTML.
  6. Render: the browser parses HTML, fetches CSS, JavaScript and images (more requests, often reused connections), and draws the page.

Caches can skip steps: a cached DNS answer skips 2, a cached file skips 3–5.

Definition

URL

scheme://host:port/path?query#fragment. The fragment (#…) never leaves the browser.

TLS certificate

A file signed by a trusted authority saying "this public key belongs to shop.example.com". Browsers refuse the connection if it is expired or for another name.

Examples

Take a URL apart

Try it yourself

urllib.parse splits a URL into the pieces each step needs.

from urllib.parse import urlsplit

u = urlsplit("https://shop.example.com/cart?id=7#reviews")
port = u.port or {"https": 443, "http": 80}[u.scheme]
print(u.scheme, u.hostname, port)
print(u.path, u.query, u.fragment)
Step by step
  1. L4No port written, so use the scheme's default.
  2. L5What DNS and TCP need.https shop.example.com 443
  3. L6The fragment stays in the browser./cart id=7 reviews

The journey as a list

Try it yourself

A function that describes the steps for any URL, skipping DNS when the answer is cached.

from urllib.parse import urlsplit

def journey(url, dns_cache):
    u = urlsplit(url)
    port = u.port or {"https": 443, "http": 80}[u.scheme]
    steps = []
    if u.hostname not in dns_cache:
        steps.append("DNS " + u.hostname)
    steps.append(f"TCP :{port}")
    if u.scheme == "https":
        steps.append("TLS")
    steps.append("GET " + (u.path or "/"))
    return steps

print(journey("https://shop.example.com/cart", set()))
print(journey("http://shop.example.com", {"shop.example.com"}))
Step by step
  1. L7A cached answer skips the lookup.
  2. L10Only HTTPS adds TLS.
  3. L15Cached DNS, plain HTTP on port 80, path defaults to /.['TCP :80', 'GET /']

Common mistakes

http:// for anything private

Without TLS, anyone on the path (café Wi-Fi, a router) can read and change the traffic, cookies and passwords included.

Forgetting the extra requests

One page load is often dozens of requests (CSS, scripts, images, APIs). A slow page is usually slow there, not in the first HTML.

Quick quiz

1. The browser says the certificate is for another name. Which step failed?

  1. ATLS
  2. BDNS
  3. CRendering
Show the answer

Answer: A

Checking the certificate is part of the TLS handshake, before any HTTP is sent.

2. What does this print?

from urllib.parse import urlsplit
u = urlsplit("http://localhost:8000/api/items?sort=price")
print(u.hostname, u.port, u.path)
  1. A
    localhost 8000 /api/items
  2. B
    localhost 80 /api/items
  3. C
    localhost:8000 None /api/items?sort=price
Show the answer

Answer: A

The port is written explicitly; the query is separate from the path.

Practice

3 exercises in three steps: predict what a program prints, change a program to meet a new requirement, then write one from scratch. Your code runs in the browser and is checked the moment you submit.

  1. PredictDefault ports

    Type exactly what this program prints.

  2. ModifyDon't forget TLS

    steps(url) lists the network steps for a URL, but it never includes TLS and always uses port 80. Fix it: HTTPS uses port 443 and adds "TLS" after TCP. A port written in the URL wins over the default.

  3. WriteWhere did it fail?

    Write diagnose(error) that maps an error message to the step that failed:

    • contains Could not resolve → "DNS"
    • contains Connection refused or timed out → "TCP"
    • contains certificate → "TLS"
    • starts with HTTP/ → the status code's class: "HTTP 4xx" or "HTTP 5xx" (e.g. for HTTP/1.1 503 Service Unavailable)
    • anything else → "unknown"

Practise this lesson

Open the interactive lesson to edit and run these examples and solve the exercises with instant feedback. Free to start, no sign-up.

Open the interactive lesson Course map

Interactive lessons open in order. If you have not done the earlier ones yet, you start at the course map.

Terms in this lesson

TermChineseDefinition
URL网址scheme://host:port/path?query#fragment.
TLS传输层安全Encryption and server identity checks for a connection; the S in HTTPS.
Certificate证书A signed statement that a public key belongs to a domain name.