Skilled Coder Blog
Twitter
|
Newsletter
Technology Explained

What Happens When You Type google.com

  1. You open your browser and type google.com, then hit Enter.

  2. The browser checks its cache - “Have I looked up google.com recently?”

  3. If not cached, it asks the OS: “What’s the IP address of google.com?”

  4. The OS checks its own cache. If not found, it sends a DNS query to a DNS resolver (usually your ISP’s or Google’s like 8.8.8.8).

  5. The DNS resolver looks up the IP address of google.com by talking to root, TLD, and authoritative name servers.

  6. The resolver finds the IP (e.g., 142.250.192.46) and returns it to your OS → browser.

  7. Now the browser knows where to connect - it opens a TCP connection to that IP on port 443 (HTTPS).

  8. Then, TLS handshake happens - browser and Google server agree on how to securely talk (SSL certs, encryption, etc.).

  9. Once secure connection is set, browser sends an HTTP GET request - “Hey Google, give me the homepage!”

  10. The request may include cookies, headers, and user-agent info.

  11. Google’s servers receive the request, process it, maybe hit load balancer, cache, and backend services.

  12. Google responds with an HTTP response - containing HTML, CSS, JS, etc.

  13. Browser starts parsing the HTML - downloads more assets (CSS, JS, fonts, images) in parallel.

  14. Browser builds the DOM tree, CSSOM, applies layout, paints pixels to the screen - voilà, Google homepage appears.

  15. Behind the scenes, browser keeps the TCP connection open for re-use (keep-alive), prefetches DNS, and may store cookies or cache data.

NOTE: The content below is additional technical knowledge and not necessary for basic understanding. Feel free to stop here if you're looking for just the essential process.

Technical Deep Dive

DNS Resolution Process

The Domain Name System lookup involves multiple layers:

  1. Browser DNS Cache:

    • In-memory cache of recently visited domains
    • Controlled by browser settings
    • Chrome: chrome://net-internals/#dns
    • Firefox: about:networking#dns

  2. Operating System Cache:

    • Local DNS resolver cache
    • Windows: ipconfig /displaydns
    • Linux/macOS: nscd or systemd-resolved caches
    • TTL values determine cache duration

  3. Recursive DNS Resolution:

    • DNS resolver queries the hierarchical DNS system:
      • Root nameservers (.)
      • TLD nameservers (.com)
      • Authoritative nameservers (google.com)
    • Response typically includes A records (IPv4), AAAA (IPv6), and often CNAME records
    • Average resolution takes 20-120ms

  4. DNS Resolution Optimizations:

    • DNS prefetching: Browser proactively resolves links on current page
    • DNSSEC: Cryptographically signed DNS records for security
    • DNS-over-HTTPS/DNS-over-TLS: Encrypted DNS queries
    • Anycast DNS: Multiple servers sharing same IP address worldwide

TCP Connection Establishment

The TCP three-way handshake creates a reliable connection:

  1. SYN Packet:

    • Client sends SYN (synchronize) packet with initial sequence number
    • TCP header flags: SYN=1, ACK=0
    • Contains MSS (Maximum Segment Size) and window scale options

  2. SYN-ACK Packet:

    • Server responds with SYN-ACK packet
    • TCP header flags: SYN=1, ACK=1
    • Acknowledges client’s sequence number (seq+1)
    • Includes server’s own initial sequence number

  3. ACK Packet:

    • Client sends ACK packet
    • TCP header flags: SYN=0, ACK=1
    • Acknowledges server’s sequence number
    • Connection now established and ready for data transfer

  4. TCP Performance Optimizations:

    • TCP Fast Open: Sends data in initial SYN packet
    • Initial congestion window (IW10): Allows more data in first RTT
    • TCP BBR: Modern congestion control algorithm
    • Selective acknowledgments (SACK): Efficiently handle packet loss

TLS Handshake Process

Modern TLS 1.3 handshake involves these steps:

  1. Client Hello:

    • Client sends supported cipher suites, TLS version
    • Includes random value for key generation
    • Contains Server Name Indication (SNI) extension identifying “google.com”
    • May include session ticket for resumption
    • Includes key share for supported groups (e.g., X25519)

  2. Server Hello:

    • Server selects cipher suite and TLS version
    • Provides its own random value
    • Sends certificate chain with public key
    • Includes key share for key exchange
    • TLS 1.3 eliminates additional roundtrips

  3. Key Derivation:

    • Both parties compute shared secret using key exchange
    • Derive symmetric encryption keys from shared secret
    • Multiple keys created: client_write_key, server_write_key, etc.

  4. Finished Messages:

    • Both sides exchange “Finished” messages encrypted with derived keys
    • Verifies handshake integrity and encryption works
    • Now secure encrypted channel established

  5. TLS Performance Optimizations:

    • TLS Session Resumption: Reuses parameters from previous sessions
    • TLS False Start: Starts sending encrypted data before handshake completes
    • OCSP Stapling: Embeds certificate revocation status in handshake
    • Certificate compression: Reduces certificate chain size

HTTP Request Anatomy

Modern HTTP requests contain multiple components:

  1. Request Line:

    GET / HTTP/2
    • Method (GET, POST, etc.)
    • Resource path (/)
    • Protocol version

  2. Headers:

    Host: www.google.com
User-Agent: Mozilla/5.0...
Accept: text/html,application/xhtml+xml,...
Accept-Language: en-US,en;q=0.9
Accept-Encoding: gzip, deflate, br
Cookie: 1P_JAR=2023-05-26-10; NID=511=...
Connection: keep-alive
    • Metadata about request and client capabilities
    • Preferences for response format
    • Authentication information
    • Cookie data for session management

  3. Body (only for POST/PUT requests):

    • Form data, JSON, file uploads, etc.
    • Content-Type header specifies format
    • Content-Length header indicates size

  4. HTTP/2 and HTTP/3 Enhancements:

    • Binary framing instead of text-based protocol
    • Header compression (HPACK/QPACK)
    • Multiplexing multiple requests on single connection
    • Server push capabilities
    • HTTP/3: QUIC protocol with reduced connection setup time

Backend Processing

Google’s server infrastructure processes requests through multiple layers:

  1. Global Load Balancing:

    • Anycast routing to nearest Google data center
    • Geographic-based DNS responses
    • Health checking and automatic failover
    • Load distribution across regions

  2. Reverse Proxy Layer:

    • TLS termination
    • HTTP parsing and validation
    • Request routing based on URL/headers
    • DDoS protection and rate limiting

  3. Application Logic:

    • Personalization based on user preferences/history
    • A/B testing for different features
    • Language detection and localization
    • Authentication state processing

  4. Microservices Architecture:

    • Different services handle specific components
    • Inter-service communication via RPC
    • Service discovery and orchestration
    • Circuit breakers for fault tolerance

  5. Caching Layers:

    • Edge caches for static content
    • In-memory application caches
    • Distributed caching systems
    • Database query caches

Rendering Pipeline

Browser rendering involves sophisticated processing:

  1. DOM Construction:

    • HTML parsed into Document Object Model
    • Represents page as tree of nodes
    • JavaScript can manipulate this tree
    • Progressive parsing allows incremental rendering

  2. CSSOM Construction:

    • CSS rules parsed into CSS Object Model
    • Matching rules are applied to DOM elements
    • Handles inheritance and cascading
    • Blocks rendering until complete

  3. Render Tree Creation:

    • Combines DOM and CSSOM
    • Only includes visible elements
    • Layout properties calculated for each node
    • Font loading and text measurement

  4. Layout (Reflow):

    • Calculates exact position and size of elements
    • Handles responsive design constraints
    • Manages complex positioning systems
    • Computationally expensive operation

  5. Painting:

    • Converts render tree to pixels on screen
    • Multiple layers created for compositing
    • Handles z-index and stacking contexts
    • May use GPU acceleration

  6. Compositing:

    • Combines layers in correct order
    • Handles transparency and blending
    • Optimizes for smooth animations
    • Uses hardware acceleration when available

  7. JavaScript Execution:

    • Parsed and compiled by JS engine
    • JIT (Just-In-Time) compilation for performance
    • Event-driven execution model
    • Can block rendering (main thread)

Performance Optimizations

Modern browsers implement various optimizations:

  1. Resource Prioritization:

    • Critical CSS and JavaScript loaded first
    • Image loading deferred until visible
    • Preload, prefetch, and preconnect hints
    • Resource hints in HTTP headers

  2. Parallel Processing:

    • Multiple TCP connections (typically 6-8 per domain)
    • HTTP/2 multiplexing over single connection
    • Multiple thread rendering
    • Service workers for offline functionality

  3. Speculative Optimization:

    • DNS prefetching of linked domains
    • TCP preconnect to likely next destinations
    • Prerendering of likely next pages
    • Predictive loading based on user behavior

  4. Caching Strategies:

    • HTTP cache with Cache-Control directives
    • Service worker cache for offline access
    • Memory cache for current session
    • Push cache for HTTP/2 server push