What Happens When You Type google.com? DNS, TCP Handshakes & Browser Rendering

What Happens When You Type google.com? DNS, TCP Handshakes & Browser Rendering

1. The Classic Deep-Dive Question

From the moment you hit Enter in your browser's address bar to the moment pixels appear on your screen, dozens of network protocols, operating system subsystems, and browser rendering engines collaborate in milliseconds.

+----------------------------------------------------------------------+
|                     End-to-End Request Journey                       |
|                                                                      |
|  1. URL Parsing & HSTS Check                                         |
|  2. DNS Resolution Hierarchy (Browser -> OS -> Resolver -> Root)     |
|  3. TCP 3-Way Handshake (SYN, SYN-ACK, ACK)                         |
|  4. TLS 1.3 Encryption Handshake                                     |
|  5. HTTP/2 Multiplexed Request / Response                            |
|  6. Browser Critical Rendering Path (DOM -> CSSOM -> Layout -> Paint)|
+----------------------------------------------------------------------+

2. Phase 1: DNS Resolution Hierarchy

If the IP is not in the browser or OS DNS cache:

1. OS queries the Recursive DNS Resolver (ISP / 8.8.8.8).
2. Resolver queries the Root Nameserver (.) -> points to TLD Server (.com).
3. TLD Server queries the Authoritative Nameserver for google.com.
4. The resolved IP (e.g., 142.250.190.46) is returned and cached.

3. Phase 2: TCP Handshake & TLS 1.3

Before sending HTTP data, client and server establish a reliable connection via TCP:

[ Client ] --- SYN --------------> [ Server ]
[ Client ] <--- SYN-ACK ---------- [ Server ]
[ Client ] --- ACK --------------> [ Server ]

Followed immediately by the TLS 1.3 handshake to establish encrypted symmetric session keys.

4. Phase 3: The Critical Rendering Path

Upon receiving the HTML bytes:

1. DOM Construction: HTML tokenized into the Document Object Model tree.
2. CSSOM Construction: CSS parsed into the Style Object Model tree.
3. Render Tree: Combines visible DOM nodes with computed styles.
4. Layout (Reflow): Calculates the exact geometric coordinates of every element on screen.
5. Painting & Compositing: Rasterizes visual pixels to the GPU framebuffer.

5. Summary

Understanding this complete lifecycle allows developers to diagnose performance bottlenecks, optimize Core Web Vitals, and build low-latency web applications.