CodeParkThe browser finds the server, downloads the HTML, turns it into a page on screen, and then makes it interactive.
1. Getting the HTML. The browser parses the URL and checks its caches first. If it needs the network, it takes these steps:
- It looks up the domain's IP address with DNS (Domain Name System: the internet's phone book).
- It opens a TCP connection, or a QUIC connection for HTTP/3. Both are ways to set up a reliable link to the server.
- For HTTPS, it does a TLS handshake. TLS (Transport Layer Security) sets up encryption.
- It sends the HTTP request. The server responds with HTML, possibly after some redirects.
2. Parsing. The browser parses the HTML into the DOM (Document Object Model: the tree of elements) as the bytes arrive. It does not wait for the whole file. A preload scanner reads ahead in the HTML. It finds CSS, scripts and images early and starts fetching them. The browser parses CSS into the CSSOM (CSS Object Model: the tree of style rules). A classic script without async or defer pauses parsing while it downloads and runs.
3. Drawing. The DOM and CSSOM combine into a render tree. Then the browser runs these steps:
- Layout computes the size and position of every box.
- Paint fills in the pixels. It often paints into separate layers. Picture a stack of transparent sheets, each with part of the page drawn on it.
- Composite puts the sheets together in the right order on screen.
4. Becoming interactive. Scripts attach event listeners, or hydrate the page. Hydration means a framework like React attaches click handlers and state to HTML that is already on the screen. Scripts don't only run at this stage. A script in the <head> can run before the first paint. But the page is fully interactive only once its scripts have run.
Caches can skip some of these steps. The browser cache, a service worker or a CDN (content delivery network: servers near the user) may answer without going to your server.
- The browser does a DNS lookup, opens a TCP or QUIC connection, does a TLS handshake, then sends the HTTP request.
- The browser parses HTML into the DOM bit by bit as it arrives.
- A preload scanner reads ahead and starts fetching resources early.
- CSS builds the CSSOM, and synchronous scripts pause the HTML parser.
- The browser then builds the render tree and runs layout, paint and composite.
- Caches (the browser cache, a service worker or a CDN) can skip some of these steps.
- Scripts can run before the first paint. The page becomes fully interactive once its scripts have run.