Katkat
Back

Trace a Web Page Load Through the Browser

RiotgamesSoftware Engineer · Technical Screen
EasySoftware EngineerTechnical ScreenSoftware Engineering Fundamentals

Last updated

Tests an end-to-end understanding of how browsers fetch, parse, and render web pages, spanning low-level networking, DOM/CSSOM creation, script execution, and GPU-driven rendering pipelines.

Prompt

Describe in technical detail the sequence of events that occurs from the moment a user types a URL (such as https://games.riotgames.com/en-us/) into a modern browser's address bar and presses Enter, up until the pixels are fully painted and interactive on the display.

Your explanation should be structured systematically across the following distinct phases:

1. Navigation and Networking

  • Explain URL parsing, HSTS checks, and DNS resolution (including browser cache, OS cache, router cache, and recursive resolvers).
  • Describe the establishment of the connection: TCP 3-way handshake, TLS negotiation (key exchange and certificate verification), and the transmission of the HTTP GET request.
  • Mention how modern protocols like HTTP/2 or HTTP/3 impact connection reuse and multiplexing.

2. Document Parsing and Resource Discovery

  • Explain how the browser processes the HTTP byte stream: character encoding decoding, tokenization, and tree construction for the Document Object Model (DOM).
  • Describe how external resources (CSS stylesheets, images, scripts) are discovered via the preload scanner.
  • Explain how CSS is parsed into the CSS Object Model (CSSOM) and why CSS is treated as a render-blocking resource.

3. Script Handling and the Engine

  • Describe the role of the JavaScript engine (e.g., V8) in parsing, bytecode compilation, and execution.
  • Explain parser-blocking behavior for classic `` tags versus scripts marked with defer or async.

4. The Critical Rendering Path and Display Pipeline

  • Render Tree: How the DOM and CSSOM combine, including how non-visible nodes (e.g., ``, elements with display: none) are handled.
  • Layout (Reflow): How the geometry, dimensions, and positioning of each render tree node are calculated on the viewport.
  • Paint: How the layout tree is converted into drawing instructions across multiple stacking contexts and visual layers.
  • Compositing: How the GPU takes separate visual layers, applies transforms/opacity, and draws the final frame onto the screen buffer.

Hints

Hint 1

Trace the network path step-by-step from local caches to transport-layer handshakes before any HTML payload reaches the browser.

Hint 2

Be precise about the difference between the DOM, CSSOM, and Render Tree—in particular, which elements are excluded from the Render Tree.

Hint 3

Separate the layout phase (calculating box model dimensions and screen coordinates) from painting (rasterization) and GPU compositing (combining layers).

Follow-up questions

  • How do the `defer` and `async` attributes on `` tags change both the download and execution timelines relative to DOM parsing?
  • What triggers layout thrashing (forced synchronous layout), and how does modern browser architecture avoid unnecessary reflows?
  • How does HTTP/3 with QUIC fundamentally alter the connection handshake and head-of-line blocking issues compared to HTTP/1.1 and HTTP/2 over TCP?