How does the web work?

If you are a person who is learning web development or just an average internet user then you might have stumbled across these questions

• How does the web work exactly?
• How does the browser manage to get all the data by just an URL.
• What is all the stuff that happens behind the scenes the moment you type in a URL and the browser renders something.

if yes, then you are in a right place, in this article I will try to answer all the above questions so it would help you understand things one level deeper and appreciate how things work behind the scenes.

Lets goo🚀🚀🚀

Before I jump in and start explaining all the things, I would like to introduce you to some of the technologies and terms which plays a crucial part when it comes to the internet, Later on, we will connect all the things we learned and try to make more sense of it.

1) Internet

The Internet is a vast network that connects computers all over the world. Through the Internet, people can share information and communicate from anywhere with an Internet connection.

In plain words, its nothing but a network of networks, Its capability is so powerful that it can be used for all the purposes which require you to transfer information on one or another form which accessible to anyone who is connected to a network

2) IP address

An Internet Protocol address (IP address) is a numerical label assigned to each device connected to a computer network that uses the Internet Protocol for communication

Every device that is connected to the internet will have some kind of IP address 172.16.254.1 assigned by your internet service provider(ISP). IPs are the identifier that allows data to be transferred between 2 devices and helps us to differentiate between individual devices that are connected on the internet. They are not assigned randomly, they are mathematically products by Internet Assigned Numbers Authority (IANA),

3)URL(Uniform Resource Locator)

A Uniform Resource Locator (URL), colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it

To map the resource that present on the internet, URL is assigned to them, every Valid URL present on the internet will be pointing to the resource that is required to run the application. again do not get confused between URL and a Domain

URL is a complete address that would help you to find a resource online whereas a domain is what comes after @ in an email address or www in a website address

4)DNS(Domain Name System)

The Domain Name System (DNS) is a hierarchical and decentralized naming system for computers, services, or other resources connected to the Internet or a private network.

DNS is like a phonebook, which plays a very crucial role when it comes to the internet as we discussed earlier DNS is the one that helps us to match the IP address that is associated with the URL, to retrieve data from its database.
Human interaction with the internet is through URL since it is difficult to remember the IP address of the URL, whereas the browser interacts through IP address.

4)Server

A server is a computer or system that provides resources, data, services, or programs to other computers, known as clients, over a network.

A Server is just a computer that is connected to the internet 24/7, which constantly delivers all the resource from the database that is required to render the app on the browser, You can make your personal computer as a server to send all the necessary resources unless it is online 24/7 and will handle a lot of users, There are many types of servers, including web servers, mail servers, and virtual servers.

5)Browser

A computer program with a graphical user interface for displaying and navigating between web pages.

I am pretty sure you are this article on some browser :)
Brower plays a really important role when it comes to the web, It helps us to interact with the web more seemingly, and trust me when I say this, browsers are one of the best technology presents on that internet and it is much more powerful than what we think it is, we will learn browsers deep role in web on upcoming points.

Now that we have learned all the necessary technology, let us connect all the dots and try to make more sense of it.

Let us imagine a scenario where you just type a valid URL, lets see what happens step by step by connecting all the stuff we learned now

The moment you hit an URL, the browser tries to get the IP address associated with the URL to establish a connection and get all the necessary resources, So before going to the DNS server to get the IP address, the browser will search in these places

• Browser cache : At the first browser checks its cache, the browser keeps a record of all the DNS records for a while so it would be easy for it to get the IP address,
• OS cache : Next it will try to search in your operating system cache for the IP address
• Router cache : if you are using a router then it will check in the router cache too to get the IP address
• Resolver server : It is nothing but your internet service provider who keeps a record of your browsing history plus the IP address associated with it

If the browser unable to locate the IP address then your Resolver server(ISP) will go to DNS to find one

2) Getting the IP address from Domain Name System

It won't straight away try to search the IP address associated with the URL, first, the request will be sent to root level to check if your website domain falls under top domains like .com, .in, .edu, etc:-, if it matches then it will tell our resolver to search in Top level domain
Now this TLD server will give the IP address associated with it, and then ISP will try to store it in its cache so that it won't have to do it again and again

3) Connection is established between the browser and the server

To share data between two devices on the internet, a connection has to be established. To communicate over the internet, TCP/IP protocol is followed, later on, a connection will be built between the client and the server over TCP 3-way handshake

3) Sharing of information between server and client

Once after successful establishment of a connection, instead of getting all the data related to the application at once, the browser only asks for the file associated with the particular route for ex:-/, /home, etc:-.
Once the browser starts getting the files associated with it, it tries to parse the file from top to bottom and if it found any tag such as <Link> or <Script> and if that tag is directing towards a file directory it will try to get it from there or if it is pointing towards some URL then same above procedure is followed.
Again this sharing data is not one way, for example, if the user does some action then the browser will send a Post or Delete or Update request to the server to store the users' action on its database, so this data transfer keep happening between client and server the moment he changes his route or does some kinda action that is programmed to store in database

Now the important part

4)Status codes

When you ask the server for data from the database, not only data but it will also return many things and one among them is status code,
you can check this by going to the Network tab by holding ctrl+shif+i or right-click and selecting inspect element,
normally u will be able to see some status codes such as 200 for success 404 for not found and 500 for error etc:-, along with the time taken for the API to get the data from the database, etc:- you might see this kinda images some or the other time on the internet when their server is down

There are many reasons why this would happen, one of the few is when total traffic of your website increases drastically and your server could not handle that many requests or some error happened in your code then to you can see these kinda images

RandomFact

In the field of high-frequency trading, every millisecond is worth millions of USD.
The 4,600 km ultra-low latency submarine cable cost over 300 million dollars to build. Known as the Hibernian Express, it connects London and New York, and instead of carrying voice or general internet data, it beams financial data to money marketers and hedge fund traders.
It is one of the fastest cables over the Atlantic, delivering data from New York to London in 59.6 milliseconds instead of the previous peak speed of 64.8 milliseconds.

Those five milliseconds may not sound like much, but they will mean a lot to the few electronic trading firms that will have exclusive access to the connection.

That's all folks for today's topic, hope you guys understood what goes behind the scenes and how things happen in seconds so that the user does not have to wait for anything.
Thank you.