Browsers — the Other End of the Wire
Most requests your backend answers come from a browser, and a browser is busier than it looks. One visit to the bookshop's page can make a dozen requests to your servers. When you know what the browser does with each answer, you know which responses slow the page down.
The rule
One URL becomes many requests, then a tree, then pixels.
When a shopper opens https://bookshop.example/books, the browser:
- Finds the server: a DNS lookup turns
bookshop.exampleinto an IP address (unless it is cached). - Connects: it opens a TCP connection, and because of
https, sets up encryption with TLS. - Requests the document: it sends
GET /booksand receives HTML. - Parses and discovers: while reading the HTML it builds the DOM, a tree of elements. Each
<link rel="stylesheet">,<script src>and<img>it meets becomes another request. - Styles, lays out, paints: it combines the DOM with the CSS rules, works out where every box goes, and draws pixels.
- Runs JavaScript: scripts can change the DOM and call your API, for example with
fetch("/api/books").
<link rel="stylesheet" href="/static/site.css">
<script src="/static/app.js" defer></script>
<img src="/covers/42.jpg" alt="Cover of The Salt Road">Those three lines mean three more requests after the HTML arrives.
Browsers also enforce a safety rule that backend developers meet early: the same-origin policy. A script from https://bookshop.example may not read a response from a different origin, such as https://api.bookshop.example, unless that server says it is allowed with CORS headers like Access-Control-Allow-Origin.
The shortcut
Count the requests. For any page, list: one for the HTML, one per stylesheet, script and image, and one per API call its scripts make. Each item on the list is a request your servers or CDN must answer, and each can fail on its own.
Find and connect
DNS gives the IP address; the browser opens a TCP connection and completes the TLS handshake.
A trap: a slow stylesheet can hold up the whole page, because the browser usually waits for CSS before painting so it does not show unstyled content first.
Drills
Answer fast — trust the rule.
A page's HTML links 1 stylesheet, 2 scripts and 5 images. With an empty cache, how many HTTP requests does loading it take at minimum?
What does the browser build from the HTML it parses?
For a site the browser has never visited, what must happen before it can send GET /books?
A script on https://bookshop.example fetches from https://api.bookshop.example, and the browser blocks reading the response. What fixes it?
Remember
- One URL becomes many requests, then a tree, then pixels.
- Count the requests: HTML, each asset, each API call. Each one is work for your backend or CDN.
- Different origins need the API server's permission through CORS headers.