From URL to pixels: the browser as renderer

What happens when you press Enter

Every "the site is slow" or "the site is down" ticket you will ever get is a question about one of the four steps below — engineers diagnose those problems by asking which step stalled. Knowing this pipeline is also the single most common web interview question ("what happens when you type a URL and press Enter?").

Type example.com into the address bar and press Enter. In well under a second:

1. Lookup. Machines on the internet find each other by numeric IP address (like 93.184.216.34), not by name, so the browser first asks DNS (the Domain Name System) — the internet-wide directory that stores which address answers to which name — to translate example.com into an address.
2. Request. The browser sends an HTTP request to that machine: please send me this page.
3. Response. The server (a computer that waits for requests and answers them) replies with the page's HTML text, and later its CSS, JavaScript, and images.
4. Render. The browser reads it all and paints pixels.

Your browser plays the role of the client, the side that asks. This request and response cycle repeats for every file the page needs.

From HTML text to pixels

The HTML arrives as plain text. The browser then:

1. Parses the HTML into the DOM (Document Object Model), a tree of objects with one node per element. You will work with this tree directly in unit 8.
2. Downloads and parses the CSS into a list of style rules.
3. Matches rules to DOM nodes to compute every element's final style.
4. Runs layout: decides where every box goes and how big it is.
5. Paints the pixels.

When JavaScript later changes the page (new text, a hidden element) the browser re-runs layout and paint for the affected parts. The DOM is the bridge between your code and the screen, which is why unit 8 is all about it.