Skip to content
Optimal Lab

Frontend · interactive

From URL to pixels

What happens between pressing Enter and seeing the page? A chain of network round trips, then the browser turning bytes into a DOM, styles, layout and finally pixels. Step through one page load.

  • DNS lookup
  • TCP + TLS
  • Request → first byte
  • Parse HTML, build the DOM
  • Fetch CSS (render-blocking)
  • Fetch JS (deferred)
  • Build CSSOM + render tree
  • Layout
  • Paint + composite
  • Run JS, hydrate

■ network · ■ main thread · 0–460 ms

https://shop.example.com

blank

DNS lookup, at 0 ms: Turn shop.example.com into an IP address.

1 of 10
1

Connect

DNS, TCP and TLS cost round trips before any HTML arrives.

CDNs and connection reuse shrink this.

2

Parse while downloading

HTML is parsed as it streams in; the preload scanner spots CSS, JS and images early.

Sync scripts in the head stop the parser.

3

Style, layout, paint

DOM + CSSOM make the render tree; layout computes geometry; paint and composite draw it.

See the rendering pipeline session.

4

JavaScript makes it usable

Scripts run and attach handlers. Until then the page looks ready but isn't.

See hydration and Core Web Vitals.

In production

Tools and technologies

Browser devtools show every one of these steps.

Not tied to one language — use these names when you search docs or design a system.