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.

Children

Typing google.com in a browser