How Web ๐Ÿ’ปworks ?

what happens when we search something on address bar of a browser( like chrome ) ?

ยท

5 min read

How Web ๐Ÿ’ปworks ?

Photo by Magnet.me on Unsplash

Table of contents

No heading

No headings in the article.

We people never end a single day in our day to day life without using browser right ? yes, but, do you ever think ๐Ÿค”how the browser works and gives information what ever we searched on browser ?

If yes, then here is the solution for your question, i am going to explain the whole process in 8 simple steps. with that let's get started.......

step 1 : for say, we type hashnode.com/@charanwrites in browser's address bar

image.png

step 2 : The browser checks the cache for a DNS record to find the corresponding IP address of hashnode.com/@charanwrites

what is DNS ? Why DNS ? --> DNS stands for Domain Name system. It is a database that maintains the name of website(URL's) and the the particular IP address that it linked to. Every single URL on the internet has unique IP address assigned to it. The IP address belongs to the computer that hosts the servers of the website that we are requesting to access. For ex : google.com has an IP address of 209.85.227.104 on your browser.

In simple terms, DNS is a list of URLs and their IP addresses, like how a phonebook is a list of names and their corresponding phone numbers.
The primary purpose of DNS is human friendly Navigation.

That's ok . But, where did the browser searches for DNS record ๐Ÿค”?
To find DNS record, The browser checks the following four caches.

Note: cache in the browser is nothing but a temporary storage file in the browser

  1. Browser cache
  2. OS cache
  3. Router cache
  4. ISP cache

We have multiple caches because caches, are essential for regulating network traffic and improving data transfer time.

what if requested URL is not in the above all mentioned caches ๐Ÿค”? That bring 's us to the next step

step 3 : ISP's DNS server initiates a DNS query to find the IP address of the server that hosts hashnode.com/@charanwrites

The purpose of DNS query is to search multiple DNS servers on the internet until it finds the correct IP address or returns an error response saying it was unable to find for the requested website. This type of search is called a recursive search.
we would call , the ISP's DNS server a DNS recursor . whose responsibility is to find proper IP address of the intended domain name by asking other DNS servers on the internet for an answer. The other DNS servers are called NameServers since, they perform a DNS search based on the domain architecture of the website domain name


step 4 : The browser initiates a TCP connection with the server

once the browser receives a correct IP address, it will build a connection with the server that matches the IP address to transfer information. Browsers use internet protocols to build such connections. There are several different internet protocols that can be used, but TCP is the most common protocol used for many types of HTTP requests.

-To transfer data packets between your computer(client) and the server, it is important to have a TCP connection established. This connection is established using a process called TCP/IP threeway handshake. This is a three-step process where the client and the server exchange SYN(synchronize) and ACK(acknowledge) message to establish a connection.

  1. the client machine sends a SYN packet to the server over the internet, asking if it is open for new connections.
  2. If the server has open ports that can accept and initiate new connections, it'll respond with an ACKnowledgment of the SYN packet using a SYN/ACK packet.
  3. The client will receive the SYN/ACK packet from the server and will acknowledge it by sending an ACK packet.
Then , TCP connection is established for data transmission

step 5 : The browser sends an HTTP Request to the webserver

once the TCP connection is established, it's time to start transfering data . The browser will send a GET request asking for hashnode.com/@charanwrites webpage. if you are entering a credentials or submitting a form, this could be a POST request. This request will also contain additional information such as browser identification(UserAgent header), types of requests that it will accept (Accept Header), and connection header asking it to keep the TCP connection alive for additional requests. It will also pass the information taken from cookies .
step 6 : The server handles the request and sends back a response

The server contains a webserver(i.e; IIS/Apache) that receives the request from the browser and passes into a request handler to read and generate a response. The request handler is a program (written in python, ASP.Net , etc) that reads the request, it's headers and cookies to check what is being requested and also update the information on the server if needed. Then it will assemble a response in particular format(JSON,XML,HTML) image.png
step 7 : The server sends out an HTTP Response
The server response contains the webpage requested as well as status code, content-encoding, cache-control, any cookies to set, privacy ๐Ÿ” information etc.
Usually there are five types of status codes will be displayed in the browser.They are
  • 1xx--Indicates an information message only
  • 2xx--Indicates success of some kind
  • 3xx--Indicates redirects the client to another URL
  • 4xx--Indicates an error on the client's side
  • 5xx--Indicates an error on the server side
so, if you encountered an error, you can take a look at the HTTP response to check what type of status code you have received. So, that you can easily solve the issue.

step 8 : The browser Displays the HTML content yahoo ๐Ÿ™Œwe can able to see content on our browser now.
Eventhough, it all seems so long to look but it takes less than milliseconds to complete the whole process before we could notice.

Hope you had some learning. Please Share and Comment your feedback

See you soon with next article, until then Keep Learning ๐Ÿ“–๐Ÿ“— .......

Did you find this article valuable?

Support CharanWrites by becoming a sponsor. Any amount is appreciated!

ย