What Happens When You Type a URL?

Build the mental model

This is one of the two core lessons in this chapter — it walks through the entire sequence that unfolds the instant you type a URL and press Enter, using https://learn.example.com/course as the running example.

This sequence is inherently step-by-step, and each step depends on the one before it — you can't connect to a server before DNS has resolved.

Where to find real depth

DNS resolution, TLS/HTTPS, and HTTP request/response get real depth in Cloud & Deployment, the API Tutorial, and Cybersecurity. This lesson only covers the step order.

Steps 1-3 — resolving the domain
Steps 4-7 — establishing a connection and exchanging data
Steps 8-10 — turning the response into a rendered page

text

URL TO RENDERED PAGE (10 STEPS)
-------------------------------
1.  Browser reads the URL
2.  Browser identifies the domain
3.  DNS resolves domain -> IP address
4.  Browser connects to server/CDN
5.  TLS/HTTPS connection established
6.  Browser sends HTTP request
7.  Server/CDN sends response
8.  Browser parses the HTML
9.  Browser fetches CSS, JS, images
10. Browser renders the page

Connect it to a real scenario

The code example takes the ten step names in scrambled order and sorts them back into the correct sequence using a predefined STEP_ORDER mapping.

The scrambled array puts "Browser renders the page" first, even though it's step 10 — running sortSteps produces the correct order 1 through 10.

Understand dependency, don't memorize

Once you understand why each step needs the one before it, you can reconstruct the correct order yourself, even without the mapping.

Typing a URL kicks off a sequential, 10-step lifecycle
Each step depends on the one before it — the order cannot be skipped
DNS, TLS, and HTTP request/response depth continues in Cloud & Deployment, the API Tutorial, and Cybersecurity

Try the working example

javascript

const STEP_ORDER = {
  "Browser reads the URL": 1,
  "Browser identifies the domain": 2,
  "DNS resolves the domain to an IP address": 3,
  "Browser connects to the server/CDN": 4,
  "TLS/HTTPS connection is established": 5,
  "Browser sends an HTTP request": 6,
  "Server/CDN sends back a response": 7,
  "Browser parses the HTML": 8,
  "Browser fetches CSS, JS, and images": 9,
  "Browser renders the page": 10,
};

function sortSteps(scrambledSteps) {
  return [...scrambledSteps].sort((a, b) => STEP_ORDER[a] - STEP_ORDER[b]);
}

const scrambled = [
  "Browser renders the page",
  "Browser reads the URL",
  "Server/CDN sends back a response",
  "DNS resolves the domain to an IP address",
  "TLS/HTTPS connection is established",
  "Browser fetches CSS, JS, and images",
  "Browser identifies the domain",
  "Browser sends an HTTP request",
  "Browser parses the HTML",
  "Browser connects to the server/CDN",
];

console.log("Scrambled order:");
scrambled.forEach((s, i) => console.log(`  ${i + 1}. ${s}`));

console.log("\nCorrect order:");
sortSteps(scrambled).forEach((s, i) => console.log(`  ${i + 1}. ${s}`));

You should see

Scrambled order:
  1. Browser renders the page
  2. Browser reads the URL
  3. Server/CDN sends back a response
  4. DNS resolves the domain to an IP address
  5. TLS/HTTPS connection is established
  6. Browser fetches CSS, JS, and images
  7. Browser identifies the domain
  8. Browser sends an HTTP request
  9. Browser parses the HTML
  10. Browser connects to the server/CDN

Correct order:
  1. Browser reads the URL
  2. Browser identifies the domain
  3. DNS resolves the domain to an IP address
  4. Browser connects to the server/CDN
  5. TLS/HTTPS connection is established
  6. Browser sends an HTTP request
  7. Server/CDN sends back a response
  8. Browser parses the HTML
  9. Browser fetches CSS, JS, and images
  10. Browser renders the page

5-minute try-it

Looking at the STEP_ORDER object, explain in your own words why "Browser fetches CSS, JS, and images" cannot come before "Browser parses the HTML".

One important caution

Assuming DNS resolution happens once and is done forever — it can be cached at multiple layers and still needs redoing for every new domain

Assuming steps 8-9-10 happen strictly one at a time — browsers actually fetch CSS, JS, and images in parallel while still parsing the HTML

MDN Web Docs — Populating the page: how browsers work — How the Web Works