What happens when we hit a URL in the browser? What is CRP (Critical Rendering Path)
URL → DNS lookup → TCP + TLS handshake → HTTP request → server responds with HTML → browser parses HTML→DOM, CSS→CSSOM, runs JS → render tree → layout → paint → composite (the Critical Rendering Path). Know the network phase AND the rendering phase, and what blocks what.
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)
- URL parsing — the browser breaks the URL into protocol, host, path, etc.
- DNS lookup — resolve the hostname to an IP (checking caches: browser → OS → resolver).
- TCP connection — a TCP handshake with the server (SYN / SYN-ACK / ACK).
- TLS handshake — for HTTPS, negotiate encryption keys.
- HTTP request — the browser sends
GET /pathwith headers (cookies, etc.). - Server processing & response — the server returns the HTML (status, headers, body). (Caching: a
304 Not Modifiedmay short-circuit this.)
Phase 2: rendering it (the Critical Rendering Path)
- Parse HTML → DOM tree.
- Parse CSS → CSSOM tree. CSS is render-blocking.
- Run JavaScript. A non-deferred
<script>blocks HTML parsing; it can also wait on pending CSS. JS can modify the DOM/CSSOM. - Render tree — DOM + CSSOM combined, visible nodes only.
- Layout (reflow) — compute the geometry (position + size) of every node.
- Paint — fill in pixels (text, colors, images) into layers.
- Composite — assemble the layers and draw to screen;
transform/opacityare 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."
Follow-up questions
- •What blocks rendering vs what blocks parsing?
- •What are the caching layers in a DNS lookup?
- •What's the difference between DOMContentLoaded and load?
- •How would you optimize the Critical Rendering Path?
Common mistakes
- •Only covering the network half or only the rendering half.
- •Forgetting the TLS handshake for HTTPS.
- •Not knowing CSS is render-blocking and JS is parser-blocking.
- •Confusing layout, paint, and composite.
- •Reciting steps without being able to go deeper when probed.
Performance considerations
- •Every network step adds latency (DNS, TCP, TLS round-trips — mitigated by keep-alive, HTTP/2/3, preconnect). The CRP determines FCP/LCP — render-blocking CSS and parser-blocking JS are the main levers.
Edge cases
- •Cached DNS / cached resources / 304 responses short-circuiting steps.
- •HTTP/2 or HTTP/3 changing the connection model.
- •Service worker intercepting the request.
- •Redirects adding round-trips.
Real-world examples
- •Using preconnect/dns-prefetch to cut connection setup time.
- •Inlining critical CSS and deferring scripts to speed up first paint.