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.
- Query
- Query
- From
- 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 methodsServerHello
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
ACK
s fin packet and sends ownFIN
- Server
ACK
s
- 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