# What Happens When You Type a URL

How a browser turns a typed web address into a finished page, from DNS lookup and secure handshake to the layout and painting of each box\.

By clever\-fox\-84f4efaa

Topic: Computing, AI & Electronics

[Open the interactive Jig](https://ask.jig.com/j/MxLNBNYSEM78)

## Transcript

### 1. You type an address

Think of your browser as your house and the website as a building across town\. The address you type, called a URL, has parts: https is how to travel safely, www\.example\.com is the building, and /cats is the room you want\.

First the browser checks whether it already kept a fresh copy\. If it did, it can skip much of the trip\.

### 2. Asking the address book

Computers find each other by numbers, not names\. So a messenger asks DNS, the Domain Name System: a giant shared phone book\. It turns www\.example\.com into a number called an IP address\.

If the nearby book does not know, it asks the main index, then the \.com office, then the website's own office\.

### 3. Knock, knock: the handshake

Before asking for the page, the two computers make sure they can hear each other\. Three tiny messages go back and forth: Hello? Hello, I hear you\! Great, I hear you too\! This is the TCP handshake\.

### 4. Agreeing on a secret code

The s in https means secure\. The website shows an ID card, called a certificate, that trusted checkers vouch for\. Then both sides agree on a secret key, so nobody along the road can read the messages\.

The padlock in your address bar means this check worked\.

### 5. The order and the parcel

Now the browser sends its request: GET /cats, meaning please give me the cats page\. The website answers 200 OK and sends back HTML, the page's written instructions, split into small pieces called packets\.

The first piece is often about 14 kilobytes, roughly the text of a few book pages\.

### 6. Inside the engine: reading the recipe

A web page arrives as instructions, not as a picture\. The browser's engine reads the HTML and builds a family tree of boxes called the DOM\. When it spots pictures or style files, it sends more messengers to fetch them\.

Popular engines are Blink in Chrome and Edge, Gecko in Firefox, and WebKit in Safari\.

### 7. Outfits and measuring

Style rules, written in CSS, give every box its outfit: colours, fonts and sizes\. Then layout works out exactly where each box goes and how big it is, like marking spots on a table before setting it\.

### 8. Painting and stacking

The painter fills in the pixels on separate see\-through layers, like sheets of tracing paper\. The compositor stacks the layers into one picture, often with help from the graphics chip\. Slide to spread the layers apart\.

For smooth motion the screen gets a new picture about 60 times a second, under 17 milliseconds each\.

### 9. Your page is ready

The page appears and starts answering your clicks, and scripts can keep changing the tree\. All of this often takes less than a second\. Next time is faster, because the browser remembers the number, the connection and many files\.