How does the Website/Browser work?

Understand This Important Concept to Become a Better Web Developer.

The moment you enter a URL on a browser, these things happen behind the scene (see the above flow chart):

The URL gets resolved by the DNS server
A request is sent to the server of the website
The response of the server is parsed
The webpage is rendered (painted)

Step 1: The URL Gets Resolved — DNS Lookup

“DNS server” (where DNS = “Domain Name System”).
What does DNS server do is translate human-readable domains to IP addresses (the real address of a website). Domain => IP address.

Step 2: A Request Is Sent to the Server

A request is sent by the browser with the resolved IP address to the server.
![[screenshot-facebook-request-header.png]]
The server returns a so-called ‘response’, which could be an HTML file, images, CSS, script (js), etc.

Step 3: The Response Is Parsed

Parsing is the step the browser takes to turn the data it receives over the network into the DOM and CSSOM, which is used by the renderer to paint a page on the screen.
Before anything is rendered to the screen, the HTML, CSS, and JavaScript have to be parsed. So, considering web performance optimization, only include everything that the browser needs for the first render.

Response header:content-type:text/html.
So if you save the response as a .html file and open it from browser, a login page shows up:

Step 4 — The Web Page Is Painted

“Painting involves drawing every visual part of an element to the screen, including text, colors, borders, shadows, and replaced elements like buttons and images. The browser needs to do this super quickly.”

Useful Source and Links

This post is inspired by: how the web works
To have a deep understanding of how browser/website works: how browsers work
What is a DNS server