"Can you explain the browser rendering process from URL to displayed page?"
Understanding how browsers render pages is essential for frontend performance optimization. This question tests whether you can diagnose rendering bottlenecks, avoid unnecessary reflows, and build performant user interfaces — skills that separate senior frontend engineers from juniors.
Start with network: DNS lookup → TCP connection → TLS handshake → HTTP request/response.
HTML parsing: the browser parses HTML into a DOM tree. When it encounters CSS, it builds the CSSOM. JavaScript can block parsing (unless async/defer).
Render tree construction: combine DOM and CSSOM, excluding invisible elements (display:none).
Layout (Reflow): calculate exact position and size of each element in the render tree.
Paint: fill in pixels — colors, borders, shadows, text. Then Composite: layer management and GPU composition for transforms and opacity.
When you enter a URL, the browser first resolves the domain via DNS, establishes a TCP connection (with TLS for HTTPS), and sends the HTTP request. Upon receiving HTML, the browser begins parsing it into a DOM tree incrementally. When a <link> tag is encountered, CSS is fetched and parsed into the CSSOM (CSS Object Model). CSS loading blocks rendering but not DOM parsing. JavaScript is more disruptive — a <script> tag without async or defer blocks both DOM parsing and rendering until the script executes, because JS might modify the DOM. This is why we place scripts at the bottom or use defer. Once the DOM and CSSOM are ready, the browser creates the Render Tree by combining visible DOM nodes with their computed styles — elements with display:none are excluded. Next is Layout (also called Reflow), where the browser calculates the exact geometry of each element — position, width, height — starting from the root and cascading down. Any change to element dimensions triggers reflow, which is expensive because it can cascade through the entire tree. Then comes Paint, where the browser fills in actual pixels — colors, borders, images, text, shadows — organized into paint layers. Finally, Compositing combines layers using the GPU. Elements with transform, opacity, or will-change get their own compositor layer, enabling smooth 60fps animations without triggering layout or paint. This is why transform:translateX() performs better than changing left — it only requires compositing, skipping layout and paint entirely. To optimize: minimize DOM depth, batch DOM reads/writes separately, use transform for animations, lazy-load images, and use CSS containment to limit reflow scope.
Know the difference between reflow and repaint — and which CSS properties trigger each.
Explain why CSS animations using transform/opacity are smoother than using top/left.
Mention the critical rendering path and how to optimize it (minimize render-blocking resources).
Use HireMe AI during interviews to get instant performance optimization tips.
Reflow recalculates element geometry (position, size) and is expensive because it cascades. Repaint only redraws pixels (color changes, visibility) without geometry changes. Reflow always triggers repaint, but repaint does not trigger reflow.
transform only triggers compositing (GPU-accelerated), skipping layout and paint phases. Changing top/left triggers layout recalculation for the element and its siblings, causing jank.
Both download scripts without blocking HTML parsing. async executes immediately when downloaded (potentially before parsing completes). defer waits until HTML parsing finishes, then executes scripts in order.
HireMe AI listens to your interview in real-time, detects questions, and generates instant answer suggestions — so you never freeze up again.
Try HireMe AI Free