eBay Browser Rendering Interview: Rendering Pipeline Deep Dive

You will be asked to explain the browser’s end-to-end rendering flow — from the HTTP response to pixels on screen — and to propose optimizations for real-world pages. This question tests your understanding of HTML/CSS/JS parsing, model construction (DOM, CSSOM, render tree), layout and paint, compositing, and how the event loop coordinates JavaScript with rendering.

Start by describing the high-level stages: network response → HTML/CSS parsing → DOM & CSSOM build → render tree construction → layout (reflow) → paint → compositing. Explain which resources block rendering (synchronous scripts, CSS) and how async/defer, preload, and preconnect change the critical rendering path. Mention how the event loop and task/microtask queues affect when style/layout/paint can run alongside JS execution.

Interviewers expect you to demonstrate performance-savvy tactics: reducing render-blocking resources, critical CSS, splitting or deferring JS, image lazy-loading, minimizing layout thrashing, and promoting compositing-friendly changes (transform/opacity vs width/height). Show familiarity with browser-specific behaviors (layout engines, garbage collection pauses, layer promotion) and with diagnostic tools such as Chrome DevTools Performance/Profile, Lighthouse, WebPageTest, and Firefox devtools.

You should be prepared to walk through a timeline for a sample page, point out bottlenecks, propose measurable fixes (e.g., FCP/LCP improvements), and discuss cross-browser trade-offs and testing strategies.