資料流動過程

（DNS → TCP/TLS → HTTP → Browser → DOM → Render）

首先使用者輸入網址 (URL) https://www...

1.DNS查詢

瀏覽器系統 DNS 快取 → 若無 → 查詢 DNS 伺服器
取得 IP 位址 (例：93.184.216.34)

2. 建立 TCP 連線

SYN → SYN-ACK → ACK
建立穩定的傳輸通道

3. TLS 加密握手 (HTTPS)

瀏覽器驗證伺服器憑證 (CA Chain)
協商加密演算法、交換金鑰 (ECDHE)
生成對稱加密通道 (AES-GCM / ChaCha20)

4. 發送 HTTP 請求

GET /index.html HTTP/1.1
Host: www.example.com
User-Agent: Chrome/...
附上 Cookie、Header、Token 等

5. 伺服器處理

Web Server（Nginx / Apache）接收請求
若是動態頁面 → 後端程式處理 (Node.js, PHP, Python...)
可能查詢資料庫 / 呼叫 API / 模板渲染
回傳 HTTP 回應
例：HTTP/1.1 200 OK + HTML 主體內容

6. 瀏覽器接收回應

解析 Header（MIME、Cache、Cookie、CSP...）
若是壓縮內容（gzip/brotli） → 解壓
儲存於快取 (Cache-Control, ETag)
開始解析 HTML 文件

7. 建立 DOM 樹

解析 HTML → 建立節點樹 (DOM Tree)
若遇 link/script/img 等資源 → 發送新請求

8. 建立 CSSOM 樹

下載與解析 CSS 樣式
檢查繼承、權重、選擇器匹配
生成 CSSOM（樣式樹）

9. 組合 Render Tree（渲染樹）

合併 DOM + CSSOM → 計算各元素最終樣式
決定每個元素的位置與尺寸（Layout / Reflow）

10. 繪製 (Paint)

依樣式與佈局將元素繪製成像素資訊
包含顏色、陰影、邊框、文字、圖片

11. 合成 (Compositing)

將不同層（Layer）合成為畫面
GPU 加速渲染，顯示於螢幕
完成首次繪製（First Paint / LCP）

最後使用者就會看到完整網頁畫面。