HTTP Request Lifecycle 深入：從輸入 URL 到頁面渲染的每一步

完整流程

1. URL 解析
2. DNS 查詢
3. TCP 連線（3-way handshake）
4. TLS 握手（HTTPS）
5. HTTP 請求發送
6. 伺服器處理
7. HTTP 回應返回
8. 瀏覽器解析 HTML，發起子資源請求
9. 渲染

---

步驟 1：URL 解析

瀏覽器解析 https://api.example.com:443/users?page=2#section：

• Scheme：https（協議）
• Host：api.example.com（域名）
• Port：443（HTTPS 預設 443，HTTP 預設 80）
• Path：/users
• Query：page=2
• Fragment：section（只在瀏覽器端，不送到 server）

---

步驟 2：DNS 查詢

把 api.example.com 解析成 IP 地址（如 93.184.216.34）。

查詢順序：

1. 瀏覽器 DNS cache（有 TTL）
2. OS cache（/etc/hosts、OS cache）
3. 本機 DNS resolver（通常是路由器）
4. ISP 的 recursive resolver
5. 根 DNS server → .com TLD server → example.com 的 authoritative DNS server

整個過程可能需要 20-200ms（如果沒有 cache）。

---

步驟 3-4：TCP + TLS

TCP 3-way handshake（約 1 RTT）：SYN → SYN+ACK → ACK

TLS 握手（約 1-2 RTT，HTTP/2 可以優化）：

• Client Hello（支援的 cipher suites、TLS 版本）
• Server Hello + Certificate
• Certificate 驗證
• Key exchange
• Finished（建立 session key）

TLS 1.3 把握手壓縮到 1 RTT（甚至 0-RTT 對已知 server）。這就是「啟用 TLS 1.3」能降低延遲的原因。

---

步驟 5-7：HTTP Request / Response

GET /users?page=2 HTTP/2
Host: api.example.com
Accept: application/json
Authorization: Bearer eyJ...

伺服器處理：路由 → middleware → controller → service → DB → response

HTTP/2 200 OK
Content-Type: application/json
Cache-Control: max-age=300
 
{"users": [...], "total": 100}

---

步驟 8-9：瀏覽器解析和渲染

如果回應是 HTML：

1. 解析 HTML → 建構 DOM tree
2. 遇到 <link> → 請求 CSS → 建構 CSSOM
3. 遇到 <script> → 下載並執行（可能 block rendering）
4. DOM + CSSOM → Render Tree → Layout → Paint → Compositing

這個過程中可能觸發幾十個子資源請求（JS、CSS、圖片），HTTP/2 的多路復用讓這些並行。

---

每步可能的失敗點

步驟	失敗表現	可能原因
DNS	ERR_NAME_NOT_RESOLVED	DNS 設定錯誤、TTL 未更新
TCP	ERR_CONNECTION_REFUSED	server 沒有在監聽、防火牆
TLS	ERR_CERT_AUTHORITY_INVALID	憑證過期、自簽但未信任
HTTP	4xx / 5xx	業務邏輯錯誤
渲染	白屏、FOUC	JS 錯誤、CSS 加載問題

DevTools 的 Network tab 是排查這些問題最直接的工具——Timing 欄位顯示每個步驟花了多少時間。