Web browsers

Typing google.com in a browser

This is a common trivia question.

  • Browser determines if it's a URL or search query; assume it's a URL.
  • Punycode translated to ASCII representation, if necessary.
  • DNS lookup via gethostbyname():
    • From hosts file.
    • From local resolver cache.
    • Via a name server configured in resolv.conf, networkd, etc.; assigned statically or over DHCP. This is probably a home router, using ISP's DNS servers as its resolver.
    • Look up google.com via router:
      • If it's in cache, responds.
      • Doesn't, relayed to ISP DNS server:
        • If it's in cache, responds.
        • Doesn't:
          • Query . for the root servers.
            • Query com for the .com TLD servers.
            • Query google.com for the Google servers.
  • Network communication over TCP:
    • Look up the host in the routing table; probably the default route.
    • Looks up MAC:
      • First tries the ARP cache.
      • Else broadcasts to FF:FF:FF:FF:FF:FF
    • ARP reply with MAC.
    • Client sends SYN packet to gateway, relayed via AS border routers to the target.
    • Server sends SYN-ACK packet.
    • Client sends ACK packet.
    • TLS handshake:
      • ClientHello with version, available ciphers and compression methods
      • ServerHello with selected version, cipher, compression and public cert and key
      • Client verifies certificate against trusted CAs. Once verified, generates pseudorandom bytes and encrypts with server's public key.
      • Server decrypts random bytes, uses them to generate the same certificate.
      • Client sends Finished, encrypting a hash of the transmission so far.
      • Server verifies, sends own Finished with the same key.
      • HTTP exchange over TLS tunnel:
        • Client: GET / HTTP/1.0 Host: google.com Connection: close
        • Server obtains data from file or backend: 200 OK / 304 Not Modified
        • Repeated for embedded assets, likely over Connection: keep-alive
    • Server sends FIN packet
    • Client ACKs fin packet and sends own FIN
    • Server ACKs
  • Parses HTML (tokenise, AST).
  • Parses CSS into stylesheet objects, rules and selectors.
  • Renders page
    • Builds a render tree.
    • Preferred width of each node summed from children, borders, padding and margins.
    • Height calculated using text nodes and child nodes, borders, padding and margins.
    • Coordinates/offsets calculated from the above.
    • Breaks the tree into independent layers.
    • Allocates textures.
    • Traverses all nodes in each layer and draws them.
    • Composited: combined, visible layers determined.
    • Final positions computed, drawn using renderer (Metal, GL, DirectX).
  • Parses and executes JS.

  1. Chrome
  2. Firefox