This is the classic "explain everything" question — it has a network half and a rendering half (the CRP). A strong answer covers both at the right depth.

Phase 1: getting the response (network)

1. URL parsing — the browser breaks the URL into protocol, host, path, etc.
2. DNS lookup — resolve the hostname to an IP (checking caches: browser → OS → resolver).
3. TCP connection — a TCP handshake with the server (SYN / SYN-ACK / ACK).
4. TLS handshake — for HTTPS, negotiate encryption keys.
5. HTTP request — the browser sends GET /path with headers (cookies, etc.).
6. Server processing & response — the server returns the HTML (status, headers, body). (Caching: a 304 Not Modified may short-circuit this.)

Phase 2: rendering it (the Critical Rendering Path)

1. Parse HTML → DOM tree.
2. Parse CSS → CSSOM tree. CSS is render-blocking.
3. Run JavaScript. A non-deferred <script> blocks HTML parsing; it can also wait on pending CSS. JS can modify the DOM/CSSOM.
4. Render tree — DOM + CSSOM combined, visible nodes only.
5. Layout (reflow) — compute the geometry (position + size) of every node.
6. Paint — fill in pixels (text, colors, images) into layers.
7. Composite — assemble the layers and draw to screen; transform/opacity are handled here on the GPU.

Then: subresources (images, fonts, more JS/CSS) are fetched and the process iterates; DOMContentLoaded fires when the DOM is ready, load when all resources are done.

The key insight: the CRP is the optimization target

The Critical Rendering Path is steps 7–13 — turning bytes into pixels. The constraints:

• CSS blocks rendering — nothing paints until the CSSOM is built.
• JS blocks parsing — sync scripts pause DOM construction.

So optimizing first paint means: inline critical CSS, defer non-critical JS, minimize/compress resources, prioritize above-the-fold content, reduce round-trips (the network half matters too).

Depth tip

Calibrate to the interview: hit all the steps, then go deeper wherever they probe — DNS caching layers, TLS, render-blocking resources, layout vs paint vs composite.

The framing

"Two halves. Network: parse the URL, DNS-resolve the host, open a TCP connection, do the TLS handshake for HTTPS, send the HTTP request, get the HTML back. Then the Critical Rendering Path: parse HTML into the DOM and CSS into the CSSOM, run JavaScript, combine them into the render tree of visible nodes, run Layout for geometry, Paint for pixels, and Composite the layers to screen. The CRP is the optimization target, and the two rules that drive it are: CSS is render-blocking, JS is parser-blocking — so you inline critical CSS, defer JS, and cut bytes and round-trips."