INHow the Internet Works · Lesson 6 of 7

The Full Journey: URL to Pixels

Everything assembled: type example.com, press Enter, and watch every layer from this track fire in sequence — then the browser's own pipeline turns bytes into a rendered page.

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 pipeline: parse HTML into the DOM 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. The single most useful web
# debugging tool ever built.

◆ Note
Caching is the web's real performance engine, at every level: browser cache (cache-control headers skip the request entirely), CDN edge caches (your request never crosses the ocean), DNS caches, connection reuse (keep-alive skips handshakes). A 'fast site' is mostly a site that arranged to skip steps.