So it all starts when a user opens a browser, and enters a URL in the browser's address bar, and presses enter:
Here are the steps involved:
URL Entry
↓
URL Parsing
↓
Browser Cache Check → Cached Response
↓
DNS Resolution
↓
TCP Connection
↓
TLS Handshake (if HTTPS)
↓
HTTP Request
↓
Server Processing
↓
HTTP Response
↓
Rendering
↓
Page Display
Step 1: URL Entry
User Input: User types a URL into the browser's address bar and presses Enter.
Step 2: URL Parsing
- Scheme Identification: Browser identifies the scheme of the entered URL (e.g., http, https).
- Domain Extraction: Browser extracts the domain name (e.g., example.com), to get the IP address of the server on which code is present
Parts of URL:
URL: https://www.example.com:443/path/to/resource?key1=value1&key2=value2#section1
Breaking down this URL:
Scheme | https:// | |
---|---|---|
Host (Domain or IP) | www.example.com | (IP address of the server) |
Port | :443 | (often omitted in HTTPS URLs since 443 is the default) |
Path | /path/to/resource | |
Query String | ?key1=value1&key2=value2 | |
Fragment: | #section1 |
Step 3: Browser Cache Check
- Cache Lookup: Browser first checks its local DNS cache to see if it already knows the IP address to the entered URL.
- Cache Hit/Miss: Determines if the requested resource is available in the cache.
Step 4: DNS Resolution
- DNS Query: If cache miss, browser sends a DNS query to resolve the domain name to an IP address.
- DNS Server: Query reaches the DNS server, which responds with the IP address
DNS Providers: GoDaddy, Namecheap, Hostinger, AWS Route53 etc
What is DNS?
DNS Resolution Process:
Common DNS Terms
DNS Records: Entries in a DNS database that provide important information about a domain, including:
IPv4: 192.168.1.1 (decimal), ~4.3 billion addresses
IPv6: 2001:db8::1 (hexa-decimal), ~340 undecillion addresses
Step 5: TCP Connection
- Socket Creation: Browser creates a socket and initiates a TCP connection to the server's IP address on port 80 (HTTP) or port 443 (HTTPS).
- Three-Way Handshake: TCP handshake process (SYN, SYN-ACK, ACK) establishes a connection.
- TLS Handshake (if HTTPS):
-- ClientHello: Browser sends a ClientHello message to the server, initiating the TLS handshake.
-- ServerHello: Server responds with a ServerHello, sending its SSL certificate.
-- Certificate Verification: Browser verifies the server's certificate.
-- Session Keys: Browser and server generate session keys for encrypted communication.
Step 6: HTTP Request
Once the TCP connection is established, through TLS handshake, between the browser and the server, the actual HTTP request (API or other network requests) is send to the server to process:
- Request Formation: Browser constructs an HTTP request (GET method) for the URL.
- Header Addition: Adds necessary headers (e.g., User-Agent, Accept).
- Request Sending: Sends the HTTP request to the server.
Server Processing
- Request Handling: Server processes the incoming request.
- Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).
Step 7: Server Processing
- Request Handling: Server processes the incoming request.
- Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).
Step 8: HTTP Response
- Response Sending: Server sends back the HTTP response, including headers and the requested resource.
- Status Code: Response includes an HTTP status code (e.g., 200 OK).
This is the last step of the process, at this point the browser has received the data
Step 7: Server Processing
- Request Handling: Server processes the incoming request.
- Response Generation: Server generates the appropriate HTTP response (e.g., HTML page).
Step 8: HTTP Response
- Response Sending: Server sends back the HTTP response, including headers and the requested resource.
- Status Code: Response includes an HTTP status code (e.g., 200 OK).
This is the last step of the process, at this point the browser has received the data. After this, the browser follows 2 more steps to show you the UI:
Rendering and Page Display