# What happens when you load a web page

> A process map exported from forks.world (https://forks.world). Author: Brian. Source: https://forks.world/p/cmv0kpsnh004djn06c6k6oyuy
> It describes who does what, in what order, and with which technology. Read the plain-language sections first; the JSON at the end is the exact, complete data.

## Summary

- 17 steps across 2 layers
- Persona: You
- Technology / systems: Your browser, DNS, the internet phone book, The web server, A nearby edge server

## How to read this file

- A process is made of **layers**. The main layer is the top level; any step of kind `subprocess` opens a detail layer with its own lanes and steps.
- **Lanes** are either persona (people/roles) or technology (systems). Each step belongs to one lane; `using` lists tools a person uses for that step.
- Step kinds: `start`, `task`, `decision` (its arrows carry the answer as a label), `subprocess`, `end`.

## What happens when you load a web page

Lanes:
- You: person / role (id `you`)
- Your browser: technology / system (id `browser`)
- DNS, the internet phone book: technology / system (id `dns`)
- The web server: technology / system (id `server`)
- A nearby edge server: technology / system (id `cdn`)

Steps, in the order they run:

1. **Type a URL and press Enter** [start; You; id `w1`]
   - then Is the address already cached?
2. **Is the address already cached?** [decision; Your browser; id `w2`]
   - if "Yes" go to Use the saved address; if "No" go to Look up the site's IP address
3. **Use the saved address** [task; Your browser; id `w3`]
   - then Open a connection (TCP)
4. **Open a connection (TCP)** [task; Your browser; id `w5`]
   - then Secure it with TLS: agree on keys and check the certificate
5. **Secure it with TLS: agree on keys and check the certificate** [task; Your browser; id `w6`]
   - then Is the certificate valid?
6. **Is the certificate valid?** [decision; Your browser; id `w7`]
   - if "Yes" go to Send the page (HTML); if "No" go to A scary warning page
7. **Send the page (HTML)** [task; The web server; id `w8`]
   - then Read the HTML and request the CSS, scripts and images
8. **Read the HTML and request the CSS, scripts and images** [task; Your browser; id `w9`]
   - then Nearby servers deliver the files faster
9. **Nearby servers deliver the files faster** [task; A nearby edge server; id `w10`]
   - then Build the page and paint the pixels
10. **Build the page and paint the pixels** [task; Your browser; id `w11`]
   - then The page appears, usually in under two seconds
11. **The page appears, usually in under two seconds** [end; You; id `w12`]
12. **A scary warning page** [end; You; id `w7a`]
13. **Look up the site's IP address** [subprocess; DNS, the internet phone book; id `w4`], opens the detail layer "The DNS lookup"
   - then Open a connection (TCP)

```mermaid
flowchart LR
  subgraph l_you["You"]
    n_w1(["Type a URL and press Enter"])
    n_w7a(["A scary warning page"])
    n_w12(["The page appears, usually in under two seconds"])
  end
  subgraph l_browser["Your browser"]
    n_w2{"Is the address already cached?"}
    n_w3["Use the saved address"]
    n_w5["Open a connection (TCP)"]
    n_w6["Secure it with TLS: agree on keys and check the certificate"]
    n_w7{"Is the certificate valid?"}
    n_w9["Read the HTML and request the CSS, scripts and images"]
    n_w11["Build the page and paint the pixels"]
  end
  subgraph l_dns["DNS, the internet phone book"]
    n_w4[["Look up the site's IP address"]]
  end
  subgraph l_server["The web server"]
    n_w8["Send the page (HTML)"]
  end
  subgraph l_cdn["A nearby edge server"]
    n_w10["Nearby servers deliver the files faster"]
  end
  n_w1 --> n_w2
  n_w2 -->|"Yes"| n_w3
  n_w2 -->|"No"| n_w4
  n_w4 --> n_w5
  n_w3 --> n_w5
  n_w5 --> n_w6
  n_w6 --> n_w7
  n_w7 -->|"Yes"| n_w8
  n_w7 -->|"No"| n_w7a
  n_w8 --> n_w9
  n_w9 --> n_w10
  n_w10 --> n_w11
  n_w11 --> n_w12
```

### The DNS lookup (detail of step "Look up the site's IP address")

Lanes:
- DNS, the internet phone book: technology / system (id `dns`)

Steps, in the order they run:

1. **Ask the resolver** [start; DNS, the internet phone book; id `d1`]
   - then Does it already know?
2. **Does it already know?** [decision; DNS, the internet phone book; id `d2`]
   - if "Yes" go to Return the IP address; if "No" go to Ask the root, then .com, then the site's own name server
3. **Return the IP address** [end; DNS, the internet phone book; id `d3`]
4. **Ask the root, then .com, then the site's own name server** [task; DNS, the internet phone book; id `d4`]
   - then Return the IP address

```mermaid
flowchart LR
  subgraph l_dns["DNS, the internet phone book"]
    n_d1(["Ask the resolver"])
    n_d2{"Does it already know?"}
    n_d4["Ask the root, then .com, then the site's own name server"]
    n_d3(["Return the IP address"])
  end
  n_d1 --> n_d2
  n_d2 -->|"Yes"| n_d3
  n_d2 -->|"No"| n_d4
  n_d4 --> n_d3
```

## Full data (JSON)

```json
{
  "title": "What happens when you load a web page",
  "maps": {
    "m_dnsl": {
      "id": "m_dnsl",
      "lanes": [
        {
          "id": "dns",
          "name": "DNS, the internet phone book",
          "type": "system"
        }
      ],
      "steps": [
        {
          "id": "d1",
          "kind": "start",
          "lane": "dns",
          "next": [
            {
              "to": "d2"
            }
          ],
          "uses": [],
          "label": "Ask the resolver"
        },
        {
          "id": "d2",
          "kind": "decision",
          "lane": "dns",
          "next": [
            {
              "to": "d3",
              "label": "Yes"
            },
            {
              "to": "d4",
              "label": "No"
            }
          ],
          "uses": [],
          "label": "Does it already know?"
        },
        {
          "id": "d4",
          "kind": "task",
          "lane": "dns",
          "next": [
            {
              "to": "d3"
            }
          ],
          "uses": [],
          "label": "Ask the root, then .com, then the site's own name server"
        },
        {
          "id": "d3",
          "kind": "end",
          "lane": "dns",
          "next": [],
          "uses": [],
          "label": "Return the IP address"
        }
      ],
      "title": "The DNS lookup",
      "parent": {
        "map": "m_root",
        "step": "w4"
      }
    },
    "m_root": {
      "id": "m_root",
      "lanes": [
        {
          "id": "you",
          "name": "You",
          "type": "person"
        },
        {
          "id": "browser",
          "name": "Your browser",
          "type": "system"
        },
        {
          "id": "dns",
          "name": "DNS, the internet phone book",
          "type": "system"
        },
        {
          "id": "server",
          "name": "The web server",
          "type": "system"
        },
        {
          "id": "cdn",
          "name": "A nearby edge server",
          "type": "system"
        }
      ],
      "steps": [
        {
          "id": "w1",
          "kind": "start",
          "lane": "you",
          "next": [
            {
              "to": "w2"
            }
          ],
          "uses": [],
          "label": "Type a URL and press Enter"
        },
        {
          "id": "w2",
          "kind": "decision",
          "lane": "browser",
          "next": [
            {
              "to": "w3",
              "label": "Yes"
            },
            {
              "to": "w4",
              "label": "No"
            }
          ],
          "uses": [],
          "label": "Is the address already cached?"
        },
        {
          "id": "w4",
          "kind": "subprocess",
          "lane": "dns",
          "next": [
            {
              "to": "w5"
            }
          ],
          "uses": [],
          "child": "m_dnsl",
          "label": "Look up the site's IP address"
        },
        {
          "id": "w3",
          "kind": "task",
          "lane": "browser",
          "next": [
            {
              "to": "w5"
            }
          ],
          "uses": [],
          "label": "Use the saved address"
        },
        {
          "id": "w5",
          "kind": "task",
          "lane": "browser",
          "next": [
            {
              "to": "w6"
            }
          ],
          "uses": [],
          "label": "Open a connection (TCP)"
        },
        {
          "id": "w6",
          "kind": "task",
          "lane": "browser",
          "next": [
            {
              "to": "w7"
            }
          ],
          "uses": [],
          "label": "Secure it with TLS: agree on keys and check the certificate"
        },
        {
          "id": "w7",
          "kind": "decision",
          "lane": "browser",
          "next": [
            {
              "to": "w8",
              "label": "Yes"
            },
            {
              "to": "w7a",
              "label": "No"
            }
          ],
          "uses": [],
          "label": "Is the certificate valid?"
        },
        {
          "id": "w7a",
          "kind": "end",
          "lane": "you",
          "next": [],
          "uses": [],
          "label": "A scary warning page"
        },
        {
          "id": "w8",
          "kind": "task",
          "lane": "server",
          "next": [
            {
              "to": "w9"
            }
          ],
          "uses": [],
          "label": "Send the page (HTML)"
        },
        {
          "id": "w9",
          "kind": "task",
          "lane": "browser",
          "next": [
            {
              "to": "w10"
            }
          ],
          "uses": [],
          "label": "Read the HTML and request the CSS, scripts and images"
        },
        {
          "id": "w10",
          "kind": "task",
          "lane": "cdn",
          "next": [
            {
              "to": "w11"
            }
          ],
          "uses": [],
          "label": "Nearby servers deliver the files faster"
        },
        {
          "id": "w11",
          "kind": "task",
          "lane": "browser",
          "next": [
            {
              "to": "w12"
            }
          ],
          "uses": [],
          "label": "Build the page and paint the pixels"
        },
        {
          "id": "w12",
          "kind": "end",
          "lane": "you",
          "next": [],
          "uses": [],
          "label": "The page appears, usually in under two seconds"
        }
      ],
      "title": "What happens when you load a web page",
      "parent": null
    }
  }
}
```