Your website name → Address
When we type certain url in our browser like google.com, so the first thing that happens is the IP address is found out of the url that you entered. Computers don’t understand these domain names, they only understand IP addresses. So how the process happens:
At first browser checks if the IP address of the domain you entered is stored in its cache or not.
If the IP address isn’t found in the browser cache then it is looked for in the OS(Operating System) cache.
If the IP address isn’t found in the OS also then, your query is sent to a DNS resolver, which is somewhat like your ISP(Internet Service Provider) or Google DNS.
If the resolver also doesn’t know about the address then your query is sent to authorative DNS servers and these return you the exact IP address for your query url.
Now since the IP address is found, browsers tries to establish a connection
Establishing a connection
After the IP address has been found, a reliable connection is establish between browser and the server. The connection is made in some steps which are:
TCP(Transmission control protocol) Handshake: ensures that both the client(browser) and the server are ready to exchange data. It also gaurantees that the data is transmitted reliably.
TLS (Transport layer security) handshake: If any website uses https (secure protocol), an additional handshake occurs on top of TCP connection. This is the TLS handshake, ensuring that the data that is exchanged is secure and is encrypted.
Why these handshakes are important?
These handshakes are important due to:
reliability: Ensure data isn’t lost
security: TLS handshake ensures sensitive information stays encrypted
performance: these handshakes add a small delay to connection establishment.
HTTP/2 minimizes this delay.
Sending HTTP request
After the connection is established, browser sends an HTTP request to the server. And this request has parts to it.
Server processes the request
1. Server (Restaurant Host):
When you walk into the restaurant (the server), the host takes your order (the request) and guides you to your table.
2. Application Logic (Chef):
If your order needs special preparation or a custom dish (processing or calculations), the chef (backend logic) steps in to make it.
3. Database Interaction (Pantry/Storehouse):
If the dish requires specific ingredients (dynamic content), the chef checks the pantry or storehouse (database) to get the required items (fetching data from MySQL or MongoDB).
4. Response Generation (Server’s Reply):
Once the dish is prepared, the chef hands it over to the waiter, who serves it to your table (sending the HTTP response to the browser). Now, you enjoy your meal (viewing the content in the browser).
Browsers receives an HTTP response
Response from server reaches the browser, this response usually include:
Status codes: 200(success), 404(not found), 500(server error)
Headers: Metadata which has content type and caching instructions.
Body: Has the actual data which is in the format of HTML, CSS, JS or JSON
Content Rendering (Painting the DOM)
HTML parsing: HTML is parsed and its DOM is created.
CSS is parsed and its CSSOM (CSS Object Model) is created
Javascript execution: Scripts are executed to add interactivity.
Layout of elements is calculated and is painted onto the screen