Lesson 6 of 7

The Full Journey: URL to Pixels

This lesson puts the track together, following a page load from DNS lookup to rendered page. It also covers how the browser turns and into pixels.

Text

enter 'example.com'
  1. DNS: name -> IP            (~0-100ms, likely cached)
  2. TCP handshake to :443      (1 round trip)
  3. TLS handshake              (1 round trip, certs checked)
  4. HTTP: GET /                (request + response)
  5. HTML arrives, parsing begins IMMEDIATELY
  6. Parser finds <link>, <script>, <img>
       -> more requests (each may repeat 1-4
          on new domains — CDNs, fonts, analytics)
  7. Render pipeline (below)
  8. Pixels.  Typical total: 0.5-3 seconds.

Rules that follow: fewer round trips = faster,
closer servers = faster (CDNs), cache = skip steps.

The browser's rendering : parse HTML into the tree; parse CSS into rules and combine into the render tree; layout computes every element's position and size; paint fills in pixels; composite layers the result on the GPU. JavaScript can interrupt everywhere — a <script> without defer blocks parsing while it downloads and runs, which is why script placement matters.

Bash

# Watch a real page load, timed per phase:
curl -o /dev/null -s -w '
DNS:        %{time_namelookup}s
TCP:        %{time_connect}s
TLS:        %{time_appconnect}s
First byte: %{time_starttransfer}s
Total:      %{time_total}s
' https://example.com

# In the browser: DevTools (F12) -> Network tab
# shows every request, its timing waterfall, cache
# hits, and headers. It's one of the most useful
# tools for debugging websites.

Finished reading?Mark it done to track your progress.

Tip: use the ← and → keys to move between lessons.