What happens when you click a URL - DNS Lookup, TCP Handshake & HTTP (With visuals)
Tags: webdev, javascript, tls, node
Published: 2024-02-16 19:33:04

{% embed https://www.youtube.com/watch?v=1XbvNSwvkAs %}

# What happens when you type in a url

Okay so what happens when JayP clicks on a url ? 

How would the internet take him to his desired website ?


# Servers

Before that, what exactly are websites ?

Websites are collections of files, and images, that tell your browser how to display the site. 


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rv8wr8o6px46vzfy6h2q.png)


A special powerful computer connected to the Internet, called a server, stores these files.

Hosting these files on a server makes it reliable, and accessible to anyone anytime. 

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9zk4d6ow06g1r7p9e0f9.png)



# URL Structure

The URL is an address that shows where a particular page can be found.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/fmmmhn043iumthrftnv2.png)


The first part corresponds to the protocol used.

A protocol is a set of rules that browser use for communication over the network. 

'https' is the secure version of the http protocol. 

The second part **www.jaypland.com** is a **domain name**. 

We use it to reach to the server that is responsible for serving the information for that website.


# IP

In order for the web page to be retrieved, the URL needs to be translated into an **IP address**. 

Clients interact through IP addresses which are unique identifiers.


The IP tells to which server to connect.


Actually, every device connected to the internet has a unique IP address.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bbdyxnyrsm65289c22ua.png)

JayP could use the IP address instead of the URL to get content from a website. 

But, think of it for a second, it would be impossible to remember the IP addresses of every website!

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c6l60a9fhlhodh9x42st.png)

That's why domain names were invented. 

Now to understand how domain names are converted to IP addresses we need to talk about DNS.


# DNS

**DNS** stands for **Domain Name System** and it is a huge database where domain names are stored with their corresponding IP addresses

You could think of it as the phone book of the internet.

Now how DNS works is a topic on its own and deserves its separate video, but here is the gist of it.

When JayP clicks on a link, the browser checks its own cache, if the IP is not found then it will check the operating system cache. 

If the browser still cannot find the IP address, it will send a DNS query to the DNS resolver specified in the operating system's network settings, which is by default the ISP’s DNS resolver.

The resolver will check its own cache. 

If the IP is still not found at any of those cache layers, the resolver will do a recursive DNS lookup. 

A recursive DNS lookup asks multiple DNS servers for the DNS record until it is found. 

The authoritative name server is responsible for knowing everything about the domain name.

Finally, the resolver gets the IP address associated with the domain name and sends it back to the browser.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gq8e8lhluzuy1xq7yb1g.png)


# **Connection with server using TCP**

Now once the **IP address** of the server is **found**, the browser **initiates a connection** with it using what is called a **‘TCP 3-way handshake’**. 

If you want to know more about it, we have a separate video explaining the handshake in details, in our youtube channel.


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k2klm1xsar8dhtx6l7va.png)


# HTTP

Once the connection is initiated, the browser will send an HTTP Get request to the server to get the webpage.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7kof4kxf5j6cg4x93z63.png)

`GET/ jaypland.com`

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JayPLand</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body style="background-color: #00008B;">
    <h1>JayPLand</h1>
    <span>Where every click is an adventure</span>
    <img src="https://cdn.jaypland.com/jayp.png" alt="JayP Logo">
    <script src="script.js"></script>
</body>

</html>
```

Then, the rendering engine of the browser starts interpreting and displaying the content.

If the page has images or videos, the browser will see this and request that they are brought to the web page as well.

And ta daaa...just like that the web page has loaded!


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/swr5z0pymadvnq9ehxzx.png)