From a URL to a page

You type a URL, press Enter, and the browser starts a chain of work that ends with pixels on your screen. This course follows that chain step by step. In this first lesson I want to give you the whole map, so the later lessons have a place to fit.

The browser parses the URL first. It applies its navigation rules and checks whether it already has a usable copy of the page in its cache. If it doesn’t, it needs the network.

The network part has its own steps. The browser resolves the hostname to an IP address with DNS. It opens a connection to that address. For HTTPS it negotiates TLS on top of it. Then it sends an HTTP request and waits.

The server answers with a status code, headers, and the response body. Here is a detail that matters a lot: the browser does not wait for the last byte of HTML. It starts decoding and parsing the stream while the rest is still downloading.

The parser builds the DOM, the in-memory tree that represents the document. While it does that, it finds stylesheets, scripts, images, and fonts, and starts fetching them. CSS becomes computed styles. Then the browser calculates layout, records paint instructions, turns them into pixels, and composites the final frame.

JavaScript sits in the middle of all this. A script can pause the parser, change the DOM, or schedule work for later. That’s why loading, parsing, rendering, and script execution overlap instead of running one after the other in a tidy queue.

See it yourself

Open DevTools, go to the Network panel, and reload a page. Find the document request at the top of the list. Click it and look at the Timing and Initiator tabs.

Then look at the first image request. You will often see it start before the document request has finished downloading. That’s the incremental parser at work: it found the <img> tag in the first chunk of HTML and didn’t wait for the rest.

Try this on your own project: write down the chain from URL to first pixels. Mark which steps can use cached data and which steps can overlap with others. We’ll fill in each step in the next lessons.