if-you-were-1kb
你是 1024 B。 you are 1024 B.
你即将从这个浏览器出发,跑一趟互联网,最后变成屏幕上的像素。 you're about to leave this browser, take a trip across the internet, and come back as the pixels on this screen.
↓ 往下滚,跟自己上路 ↓ scroll down, follow yourself
打包成 HTTP 请求packaged as an HTTP request
浏览器要访问 look4.fun。它把你装进一个 HTTP 请求:
the browser is opening look4.fun. it wraps you into an HTTP request:
GET / HTTP/2 Host: look4.fun User-Agent: Mozilla/5.0 ... Accept: text/html,*/* Accept-Encoding: zstd, gzip
大约 ~ 1024 字节。这就是你。 about ~ 1024 bytes. that's you.
打听地址asking for directions
浏览器不知道 look4.fun 在哪。它得一层层问:
the browser has no idea where look4.fun lives. it has to ask, layer by layer:
来回 ~30 ms。现在浏览器知道了:要去 103.143.81.229。
about ~30 ms total. now the browser knows where to go: 103.143.81.229.
三次握手three-way handshake
目的地在地球另一端,物理上 ~12,000 km。光速也要 ~40 ms 一趟,电信号慢一点,实测来回(RTT)大约 ~100 ms。 the destination is on the other side of the planet, about ~12,000 km away. light needs ~40 ms one way; real round-trip latency lands at about ~100 ms.
在能说话之前,TCP 要打个招呼: before either side can speak, TCP needs to greet:
三次握手 = 1.5 个 RTT ≈ 150 ms。连接建立。 three-way handshake = 1.5 RTTs ≈ 150 ms. connection up.
给通道上锁locking the channel
明文通道不行——会被中间人偷看。TLS 1.3 在 1 个 RTT 内把通道加密: cleartext won't do — anyone could read. TLS 1.3 encrypts the channel in 1 RTT:
→ ClientHello server_name: look4.fun # SNI: tell server which site cipher_suites: [TLS_AES_128_GCM_SHA256, ...] key_share: (your half of the secret) ← ServerHello + Certificate + Finished certificate: CN = look4.fun issuer = Let's Encrypt E7 expires = 2026-08-19 (server's half of the secret) → Finished # both sides now derive the same session key
+1 个 RTT ≈ 100 ms。从此你说的话全程加密。 +1 RTT ≈ 100 ms. from now on, everything you say is encrypted end-to-end.
终于可以说话finally, you can speak
通道安全了。1024 B 的你被塞进加密流,扔向服务器: channel secured. you — all 1024 B — get pushed through the encrypted stream toward the server:
GET / HTTP/2 Host: look4.fun Accept-Encoding: zstd, gzip Cookie: (none, you're a stranger here)
你的数据被切成 IP 包,经过 ~15 个路由器跳转(traceroute 能看),~50 ms 后落地。 your bytes get cut into IP packets, hop through about ~15 routers (visible with traceroute), and land ~50 ms later.
服务器干活the server does its job
另一端,caddy 在 443 端口监听。它读你的 Host 头:
on the other side, caddy is listening on port 443. it reads your Host header:
# /etc/caddy/Caddyfile
look4.fun {
root * /var/www/look4.fun
encode zstd gzip
file_server
}
- 匹配站点块match site block~0.1 ms
- 读 index.html (5 KB)read index.html (5 KB)~0.5 ms
- zstd 压缩到 2 KBzstd-compress to 2 KB~1 ms
- 套 HTTP 响应 + 加密wrap in HTTP, encrypt~0.5 ms
- 总服务端时间total server time~2 ms
带着东西回家heading home with cargo
你现在背着 ~2 KB 的 zstd 压缩 HTML 回头: you're now carrying ~2 KB of zstd-compressed HTML back:
HTTP/2 200 OK Content-Type: text/html; charset=utf-8 Content-Encoding: zstd Content-Length: 2048 Server: Caddy <!doctype html> <html lang="zh">...
又是 ~12,000 km,~50 ms。 another ~12,000 km, ~50 ms.
变成像素becoming pixels
浏览器拿到你,开始流水线作业: the browser receives you and starts the pipeline:
- zstd 解压zstd-decompress~1 ms
- HTML parse → DOM 树HTML parse → DOM tree~3 ms
- CSS parse → CSSOMCSS parse → CSSOM~1 ms
- layout(每个元素算位置)layout (compute every box)~5 ms
- paint(生成位图)paint (rasterize)~3 ms
- 合成 → GPU 上屏composite → GPU → screen~3 ms
像素一个一个出现: pixels light up, one by one:
从浏览器按下回车,到第一个像素出现在你眼前。 from the moment you hit enter, to the first pixel on your screen.
这一切对你来说是"瞬间"——但你刚才看到的每一步都真实发生了。 to you it feels like "instant" — but every step you just read actually happened.
* 数字是 look4.fun 这台服务器的真实情况下的典型估算,跨大陆访问;本地访问会快十倍。 * numbers are typical estimates for cross-continent access to this server. local access is ~10× faster.
* DNS 链是 look4.fun 当前的真实链路。证书是 Let's Encrypt E7 签的真证书。Caddyfile 是这台机器上真在跑的配置。 * the DNS chain shown is look4.fun's real chain. the cert is the real Let's Encrypt one. the Caddyfile is the actual config running this server.