分享從瀏覽器輸入網址到打開網頁的整個過程

完整流程概覽

輸入 URL
  ↓ 1. URL 解析與快取檢查
  ↓ 2. DNS 查詢
  ↓ 3. TCP 連線（+ TLS 握手）
  ↓ 4. 發送 HTTP 請求
  ↓ 5. 伺服器回應
  ↓ 6. 瀏覽器解析 HTML
  ↓ 7. 資源載入（CSS、JS、圖片）
  ↓ 8. 渲染（Layout → Paint → Composite）
  ↓ 9. 頁面可互動

1. URL 解析與快取檢查

• 瀏覽器解析 URL（協定、網域、路徑、QueryString）
• 檢查瀏覽器 HTTP 快取（強制快取）→ 若命中直接返回，流程結束
• 若輸入的不是合法 URL，可能轉為搜尋引擎查詢

2. DNS 查詢（Domain Name Resolution）

將網域名稱解析為 IP 位址，查詢順序：

1. 瀏覽器 DNS 快取
2. 作業系統 DNS 快取（/etc/hosts）
3. 路由器快取
4. ISP DNS 伺服器
5. 遞迴查詢（Root → TLD → Authoritative DNS）

3. TCP 連線 + TLS 握手

• TCP 三向交握（3-Way Handshake）：SYN → SYN-ACK → ACK，建立可靠連線
• 若是 HTTPS：在 TCP 之上進行 TLS 握手，協商加密方式、交換憑證、建立共享金鑰
• HTTP/2 多工，HTTP/3 用 QUIC（UDP）省去 TCP 握手

4. 發送 HTTP 請求

瀏覽器發出 HTTP GET 請求：

GET /index.html HTTP/2
Host: www.example.com
Accept: text/html
Cookie: ...

若有協商快取標記（ETag / Last-Modified）則附上 If-None-Match / If-Modified-Since。

5. 伺服器回應

• 伺服器處理請求，回傳 HTML（通常 200 OK）
• CDN 可能在邊緣直接回應，減少延遲
• 若 301/302，瀏覽器重新導向

6. HTML 解析

瀏覽器收到 HTML 後，逐步串流解析：

• 建立 DOM 樹
• 遇到 <link rel="stylesheet"> → 下載 CSS，建立 CSSOM 樹
• 遇到未帶 async/defer 的 <script> → 停止解析 HTML，下載並執行 JS
• DOM + CSSOM 合併為 Render Tree

7. 資源載入

資源	行為
CSS	阻塞渲染（需建立 CSSOM）
JS（無屬性）	阻塞解析 + 阻塞渲染
JS（defer）	平行下載，HTML 解析完才執行
JS（async）	平行下載，下載完立刻執行（可能阻塞）
圖片	非阻塞

8. 渲染流程

Render Tree
  ↓ Layout（計算元素大小與位置）
  ↓ Paint（繪製像素到圖層）
  ↓ Composite（合成圖層，送 GPU 顯示）

• FCP（First Contentful Paint）：首次繪製文字或圖片
• LCP（Largest Contentful Paint）：最大內容元素繪製完成
• TTI（Time to Interactive）：頁面可互動

9. JS 執行 / 頁面可互動

• DOMContentLoaded：HTML 解析完成
• load：所有資源載入完成
• 頁面進入互動狀態

補充優化點（面試加分）

• DNS Prefetch 提前解析 DNS
• Preconnect 提前建立 TCP + TLS
• Preload 提前下載關鍵資源
• HTTP/2 Server Push 主動推送資源
• Service Worker 攔截快取，實現離線