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 is a question about one of the four steps below, and engineers diagnose those problems by asking which step stalled. This pipeline is also the single most common web interview question.

Typing example.com into the address bar and pressing Enter starts four things, in well under a second.

1. Lookup. Machines on the internet find each other by numeric IP address, such as 93.184.216.34, not by name. The browser first asks DNS, the Domain Name System, which is the internet-wide directory of which address answers to which name.
2. Request. The browser sends an HTTP request to that machine asking for the 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, which is why a page with a hundred images makes a hundred round trips.

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.

The first step of a page visit

Visiting a page by name starts with a DNS lookup that finds the server's IP address.

The browser cannot send a request until it knows where to send it, so DNS turns the name into an IP address first.

Nothing can be rendered until the response arrives, which is why a DNS problem looks identical to a dead server from the user's side. Both produce a page that never appears.

Splitting a URL in JavaScript

A warm-up using JavaScript you already know. urlParts(url) breaks a URL of the form protocol://host/path into its three pieces.

function urlParts(url) {
  const [protocol, rest] = url.split("://");
  const slash = rest.indexOf("/");
  return {
    protocol: protocol,
    host: rest.slice(0, slash),
    path: rest.slice(slash),
  };
}

console.log(urlParts("https://example.com/about"));
console.log(urlParts("http://hackuniversity.dev/courses"));

Output

{ protocol: 'https', host: 'example.com', path: '/about' }
{ protocol: 'http', host: 'hackuniversity.dev', path: '/courses' }

Destructuring the split result into two names is what makes the first line readable. Note that the path deliberately keeps its leading slash, since that is how it appears in an HTTP request line.