Browser & Web Performance Interview Questions and Answers

Sample questions

A few questions from each level with the correct answer and an explanation.

Browser & Web Performance · Junior

1. You type a URL and press Enter. Which order of steps is closest to what the browser does first?

   Correct answer: DNS lookup, TCP (and TLS) connection, HTTP request, then parsing the HTML response

   The browser must resolve the host name to an IP, open a connection (plus TLS for HTTPS) and send the request before it gets any HTML to parse.

2. What does the browser build from the HTML it parses?

   Correct answer: The DOM, a tree of nodes for the document

   HTML is tokenized into nodes that form the DOM. CSS is parsed separately into the CSSOM; both are combined later.

3. What is the render tree?

   Correct answer: DOM and CSSOM combined, containing only the visible nodes with their computed styles

   Elements with display: none and non-visual nodes like <head> are left out. The render tree is the input to layout.

4. Which order of rendering stages is correct after the render tree is built?

   Correct answer: Layout, paint, composite

   Layout computes geometry, paint fills in pixels for layers, and compositing draws the layers on screen in the right order.

Browser & Web Performance · Middle

1. Which CSS properties can usually be animated without triggering layout or paint?

   Correct answer: transform and opacity

   They can be handled by the compositor on an already painted layer, so animations stay smooth even if the main thread is busy.

2. What is the risk of adding will-change: transform to many elements?

   Correct answer: Each one may get its own compositor layer, costing GPU memory and sometimes making things slower

   will-change is a hint for elements that are about to animate, not a general speed-up. Overuse leads to layer explosion.

3. Why is requestAnimationFrame better than setInterval(fn, 16) for visual updates?

   Correct answer: It runs right before the browser renders the next frame and pauses in background tabs

   Timers drift and aren't aligned with frames, so updates can be dropped or done twice. rAF also adapts to 120 Hz displays.

4. What does content-visibility: auto do?

   Correct answer: Skips rendering work (layout and paint) for offscreen content until it approaches the viewport

   On long pages it can greatly cut initial rendering time. Pair it with contain-intrinsic-size so the scrollbar doesn't jump.

Browser & Web Performance · Senior

1. What does Site Isolation in Chromium guarantee?

   Correct answer: Pages from different sites are rendered in different OS processes

   After Spectre, process boundaries became the main defense against one site reading another's memory, including cross-site iframes.

2. Why did browsers disable SharedArrayBuffer by default and then re-enable it only for cross-origin isolated pages?

   Correct answer: It enables high-resolution timers useful for Spectre attacks; isolation ensures no cross-origin data shares the process

   With COOP and COEP the page can't pull in cross-origin resources that haven't opted in, so a Spectre gadget has nothing secret to read.

3. After enabling COEP: require-corp, third-party images stopped loading. What are the options?

   Correct answer: The third party must send Cross-Origin-Resource-Policy: cross-origin or serve via CORS; or use COEP: credentialless

   credentialless loads no-cors cross-origin resources without cookies, so they can't contain user-specific secrets.

4. What does Cross-Origin-Opener-Policy: same-origin protect against, besides enabling isolation?

   Correct answer: Cross-origin windows opened by or opening your page losing their window.opener reference, which blocks many XS-Leaks and tabnabbing

   Popups put in a separate browsing context group can't count your frames, navigate you or measure timings via the window handle.

Combined quizzes with this topic

Questions from several topics at once - just like an interview for a specific role.