What Happens When You Search google.com

1. DNS and Network Setup

DNS Resolution

1. The browser first checks its DNS cache (browser cache → OS cache → router cache).

2. If not found, it queries a DNS resolver, which navigates through:

   • Root name server → TLD (.com) name server → authoritative name server.
3. The authoritative server returns the IP (A record, CNAME, etc.), which is cached for future use.

TCP Handshake

• A 3-Way Handshake occurs at the transport layer (TCP):

  1. Client → Server: SYN
  2. Server → Client: SYN-ACK
  3. Client → Server: ACK
• Once complete, the connection is established.
• With Connection: keep-alive, the connection can be reused for multiple requests.

TLS Handshake (HTTPS)

• For HTTPS, the client and server perform:

  • Certificate exchange
  • Key negotiation

• A secure encrypted channel is then established.

Figure: TCP handshake followed by TLS negotiation between client and server.

2. HTTP Request/Response

1. The browser sends an HTTP GET / request.
2. The server responds with an HTML document.
3. The browser then requests additional resources (CSS, JS, images).

$ curl -I https://www.google.com
HTTP/2 200
content-type: text/html; charset=UTF-8
content-security-policy-report-only: object-src 'none'; base-uri 'self'
cache-control: private, max-age=0
...

3. Critical Rendering Path

Step 1: HTML Parsing → DOM

• The browser parses HTML top to bottom, building the DOM tree.
• Parsing can be blocked by <script> tags unless defer/async is used.

Step 2: CSS Parsing → CSSOM

• CSS files, inline styles, and <style> tags are parsed into a CSSOM tree.

Step 3: Render Tree

• DOM + CSSOM → Render Tree.

• Only visible elements are included:

  • display: none → excluded
  • visibility: hidden → included

Step 4: Layout (Reflow)

• Computes element geometry: position, size, and placement.
• Layout changes propagate to child elements → expensive operation.

Step 5: Paint

• Styles like colors, borders, shadows are painted pixel by pixel.

Step 6: Composite

• Layers are composited by the GPU to form the final screen image.

4. Performance Considerations

• Reflow (layout recalculation) is costly on CPU → should be minimized.
• Repaint (visual changes only) is lighter, handled mostly by GPU.

• Optimizations:

  • Reduce layout shifts.
  • Use transform, opacity, will-change for layer separation.
  • Place scripts with defer or async attributes.

5. Full Flow Recap

1. Browser resolves google.com to an IP address via DNS.
2. TCP 3-Way Handshake (and TLS Handshake for HTTPS) establishes the connection.
3. Browser sends an HTTP request; server responds with HTML.

4. Browser executes the Critical Rendering Path:

   • DOM + CSSOM → Render Tree → Layout → Paint → Composite.
5. The final pixels are drawn on the screen.