When You Open a Website What Exactly happens Internally

Introduction:-

When you load a webpage like amazon.in, a complex sequence of steps happens between your browser and the server. Below is an in-depth overview of the process

1. URL Entry

You type amazon.in in the browser and hit Enter:

• The browser checks if the URL is valid (e.g., proper scheme like http:// or https://).
• If the scheme is missing, the browser assumes https:// by default.

2. DNS Lookup

• The browser queries a DNS server to resolve the domain name (amazon.in) to its corresponding IP address.
• This involves:
  • Checking the browser cache for a recent DNS resolution.
  • If not found, checking the operating system’s DNS cache.
  • If still unresolved, contacting a DNS server (usually your ISP’s or a custom one like Google’s public DNS at 8.8.8.8).
• The result is the IP address of Amazon’s server (e.g., 54.239.33.123).

3. TCP Connection Establishment

The browser establishes a connection to Amazon’s server using the resolved IP:

• TCP Handshake:
  • SYN: The browser sends a synchronization packet to the server.
  • SYN-ACK: The server acknowledges and responds.
  • ACK: The browser acknowledges the server’s response.
• This step creates a reliable communication channel.

4. TLS Handshake (for HTTPS) (Transport Layer Security)

If https:// is used (which is default for most modern websites):

• Encryption Setup: The browser and server negotiate encryption protocols and exchange keys.
• Certificate Validation: The browser validates Amazon’s SSL/TLS certificate to ensure a secure connection.

5. HTTP Request

The browser sends an HTTP(S) request to the server:

6. Server Response

Amazon’s server processes the request and sends back a response:

• Response Code: A status code (e.g., 200 OK for success, 301 for redirection, or 404 for not found).
• Headers: Metadata like content type (text/html), caching policies, cookies, etc.
• Body: The HTML, CSS, JavaScript, or other data to render the page.

7. Rendering Process (Client-Side)

The browser takes the response and renders the page:

1. HTML Parsing:
   • The browser parses the HTML content into a Document Object Model (DOM) tree.
   • Encounters external resources (CSS, JS, images, etc.) and queues them for downloading.
2. CSS Parsing:
   • The browser fetches and parses CSS files.
   • Creates a CSSOM (CSS Object Model).
3. JavaScript Execution:
   • JavaScript files are downloaded and executed in the order they appear (unless async or defer is used).
   • JavaScript can manipulate the DOM and CSSOM dynamically.
4. Render Tree Construction:
   • Combines the DOM and CSSOM to create the Render Tree (what you see on the screen).
5. Layout and Painting:
   • Calculates the position and size of elements on the screen.
   • Paints the pixels on the screen.

8. Additional Resource Loading

• Images, videos, fonts, and other resources are downloaded in parallel.
• Some may require additional requests to Amazon’s Content Delivery Network (CDN).

9. Browser Caching

The browser may cache parts of the page (e.g., images, stylesheets, JavaScript) for faster loading on future visits:

• Caching is controlled by server headers like Cache-Control or ETag.

10. User Interaction

• The browser remains connected to Amazon’s server to handle user interactions (e.g., clicking a button or navigating).
• Actions like form submissions or clicking links may trigger new HTTP requests.

Simplified Flow Diagram:

1. Browser: URL entered → DNS Lookup → TCP/TLS Handshake → HTTP Request
2. Server: Process Request → Send Response (HTML, CSS, JS)
3. Browser: Parse → Render → Load Additional Resources → Display Page

Optimizations in Practice

Amazon (and similar large-scale websites) employs numerous optimizations:

• CDNs: Serve static assets from servers close to the user for faster delivery.
• Lazy Loading: Load images or other resources only when needed.
• Minification: Compress JavaScript, CSS, and HTML to reduce file size.
• Preconnect/Prefetch: Reduce latency for critical resources.
• Caching: Aggressively cache reusable resources.

This is the entire lifecycle of loading a webpage like amazon.in. Let me know if you’d like further elaboration on any step!