When a URL is typed into a browser, a sequence of processes occurs to load and display the content. Here is a step-by-step breakdown:

 

1. URL Parsing

The browser parses the URL to determine:

Protocol: Determines how to communicate with the server (e.g., http, https, ftp).

Domain: Identifies the server to connect to (e.g., example.com).

Path: Specifies the resource location on the server (e.g., /index.html).

Port (if included): Specifies the port for communication (default is 80 for HTTP, 443 for HTTPS).

 

2. DNS Resolution

The browser queries a DNS server to resolve the domain name (e.g., example.com) into an IP address (e.g., 93.184.216.34).

The process involves:

Checking the browser's cache.

Querying the operating systems DNS cache.

Querying the configured DNS server (e.g., ISP or a public DNS like Googles 8.8.8.8).

 

3. Establishing a Connection to either CDN or Origin server

Connection to CDN

a. DNS and CDN Integration

When a website uses a CDN like CloudFront, the DNS record for the domain (e.g., example.com) typically points to the CDN rather than the origin server.

The CDN's DNS server resolves the domain to an IP address of the nearest CDN edge server.

b. CDN Edge Server Selection

The CDN uses geolocation and network latency analysis to direct the request to the most optimal edge server based on the users location.

This ensures faster response times by serving cached content from a server closer to the user.

c. Cache Lookup at the CDN Edge

The edge server checks if the requested resource is available in its cache:

If the resource exists in the cache: The edge server serves it directly to the browser without contacting the origin server.

If the resource does not exist in the cache or has expired: The CDN edge server fetches the content from the origin server (backend), caches it, and then serves it to the user.

CDN Connection to Reverse Proxy and Load Balancer Flow

a. CDN Requests the Origin

When a CDN edge server receives a request that isn't cached:

It sends the request to the origin server defined in the CDN configuration.

The "origin" here could be a reverse proxy or a load balancer (e.g., NGINX, HAProxy, AWS Elastic Load Balancer).

b. Reverse Proxy as the Origin

If the reverse proxy is specified as the origin:

CDN establishes a connection to the reverse proxy (e.g., https://proxy.example.com).

The reverse proxy handles:

SSL Termination: Decrypts incoming HTTPS traffic.

Request Validation: Ensures requests are valid before forwarding.

Caching (Optional): May cache responses locally to minimize requests to the backend servers.

c. Reverse Proxy Routes to Load Balancer

The reverse proxy forwards the request to the load balancer.

The load balancer distributes traffic across a pool of backend servers using one of the following strategies:

Round Robin: Sends requests sequentially to servers.

Least Connections: Routes requests to the server with the fewest active connections.

IP Hashing: Routes based on the user's IP address.        

d. Load Balancer to Backend Servers

The load balancer forwards the request to one of the backend servers.

Backend servers generate the response (e.g., dynamic HTML, JSON data) and send it back to the load balancer.

Connection to origin server

The browser establishes a connection with the server at the resolved IP address:

TCP Connection: A connection is initiated using the TCP/IP protocol.

TLS/SSL Handshake (for HTTPS): If the URL uses https, the browser performs a handshake with the server to establish a secure connection (encryption and authentication).

 

4. Sending an HTTP Request

The browser sends an HTTP request (or HTTPS if the connection is secure) to the server, including:

Request Method: E.g., GET (retrieve content) or POST (send data).

Headers: Additional metadata (e.g., browser type, cookies, accepted formats).

Path and Hostname: Specifies the resource being requested.

 

5. Server Processing

The server receives the request and processes it:

Locates the requested resource (e.g., an HTML file or dynamic data).

Executes server-side code (if applicable, e.g., in PHP, Python, Node.js).

Constructs an HTTP response containing the resource and metadata.

 

6. Receiving the HTTP Response

The server sends an HTTP response back to the browser, including:

Status Code: Indicates the result of the request (e.g., 200 OK, 404 Not Found).

Headers: Metadata (e.g., content type, caching instructions).

Body: The actual content (e.g., HTML, CSS, JavaScript, images).

 

7. Rendering the Content

The browser processes the response to render the content:

Parses the HTML and constructs a DOM (Document Object Model) tree.

Loads and applies CSS to style the DOM.

Executes JavaScript to add interactivity and fetch additional resources (e.g., API calls, lazy-loaded images).

Fetches additional assets (e.g., images, videos, fonts) via subsequent HTTP requests.

 

8. User Interaction

The browser continuously monitors user input (e.g., clicks, scrolls) and updates the rendered content dynamically using JavaScript and CSS animations.

Optimizations During Loading

Modern browsers employ optimizations such as:

Caching: Reuse previously fetched resources from cache to reduce load time.

Prefetching: Predict and fetch resources before they are needed.

Asynchronous Loading: Load JavaScript and other assets without blocking the rendering process.

By the end of this process, the browser displays the fully loaded web page.