Frontend Labs
⋯

0.3 The complete flow at a glance

Keep this diagram in mind as you read — every chapter in this guide zooms into exactly one step of it.

You type: https://www.netflix.com [Enter]
│
├─① BROWSER checks its own caches
│   HSTS list → DNS cache → HTTP cache → Service Worker
│
├─② DNS RESOLUTION  (finds the IP address)                    -- Chapter 2
│   Browser → OS → Recursive Resolver
│           → Root NS → .com TLD NS → netflix.com NS
│           ← returns: 52.38.36.82 (IPv4) or 2600::/32 (IPv6)
│
├─③ S-NAT at your home router                                 -- Chapter 1
│   Your private IP 192.168.1.105 → public IP 203.0.113.45
│
├─④ INTERNET ROUTING  (packets travel across the world)       -- Chapter 7
│   Your router → ISP router → Internet Exchange Point
│   → Netflix border router (BGP) → Netflix Anycast VIP
│
├─⑤ TCP 3-WAY HANDSHAKE  (open a reliable connection)         -- Chapter 3
│   SYN → SYN-ACK → ACK  (1 round trip)
│
├─⑥ TLS 1.3 HANDSHAKE  (create the encrypted tunnel)          -- Chapter 4
│   ClientHello → ServerHello + Certificate + Finished
│   → ClientFinished  (1 round trip, keys never sent over wire)
│   SSL Termination happens at Netflix's edge
│
├─⑦ HTTP/2 REQUEST sent inside the encrypted tunnel           -- Chapter 5
│   GET / HTTP/2  + headers + cookies
│
├─⑧ D-NAT at Netflix edge                                     -- Chapter 7
│   VIP 52.38.36.82:443 → real backend 10.0.4.55:443
│
├─⑨ REVERSE PROXY (Nginx/Envoy)                                -- Chapter 8
│   Rate limit check → Auth check → Cache check → forward
│
├─⑩ L7 LOAD BALANCER                                           -- Chapter 9
│   Routes by URL path to correct microservice cluster
│
├─⑪ ORIGIN SERVER processes request
│   Nginx → Zuul API Gateway → Node.js SSR
│   Fetches: user data, recommendations, catalog
│   Renders HTML server-side
│
├─⑫ HTTP/2 RESPONSE sent back
│   200 OK + security headers + Brotli-compressed HTML          -- Chapter 12
│
├─⑬ RESPONSE TRAVELS BACK  (possibly served from a CDN edge)    -- Chapter 10
│   TLS encrypted → TCP segments → IP packets
│   → Internet → S-NAT reversed at your router
│   → Your browser
│
└─⑭ BROWSER RENDERS THE PAGE                                    -- Chapter 11
    HTML → DOM → + CSS → CSSOM → Render Tree
    → Layout → Paint → Composite → Screen

Chapter 13 (SLI/SLO) and the security material in Chapter 12 aren't single steps in this diagram — they're cross-cutting concerns that apply to every arrow in it.

Generated from real-life-guide-v1.md · 8 Oct 2026 16:36