文章中英模式

常見的前端面試題目 - 頁面載入 - 什麼是CDN？為何需要CDN

深入解析內容分發網路（CDN）的運作原理、主要優勢與實際應用場景，包含提升網頁載入速度、降低伺服器負載的關鍵知識及面試常見問題的完整解答。

文章中英模式

懶得看文章？那就來看影片吧

基本概念

CDN（Content Delivery Network）內容傳遞網路是一種分散式網路架構，由全球多個節點組成，能夠更快、更可靠地將網站內容傳遞給用戶。CDN 通過在用戶和原始伺服器之間增加中間層，將內容複製到距離用戶最近的節點，從而減少延遲並提高加載速度。

用戶請求
   │
   ↓
CDN 邊緣節點 ◄────► CDN 中心系統
   │                 │
   │                 ↓
   │         原始伺服器（Origin Server）
   │                 │
   ↓                 │
用戶瀏覽器 ◄─────────┘

CDN 如何運作

1. 內容分發：將靜態資源（圖片、CSS、JS 等）複製到全球多個節點伺服器
2. 就近訪問：用戶請求會自動路由到最近的 CDN 節點，減少網絡延遲
3. 緩存更新：當原始伺服器內容更新時，通過以下方式推送到 CDN 節點：
- 1. 主動推送 (Push)：伺服器變更後自動通知 CDN 更新快取
- 2. 被動拉取 (Pull)：設定 TTL (存活時間)，CDN 定期向原始伺服器檢查更新
- 3. 快取失效 (Purge)：管理員手動觸發清除特定內容的快取
- 4. 版本控制：使用時間戳或版本號在 URL 中，強制客戶端請求新資源

CDN 節點分布示意圖:
┌─────────────────────────────────────────────────────────┐
│                                                         │
│    ★ 北美洲                           ★ 歐洲            │
│    節點群                             節點群            │
│                                                         │
│                                                         │
│                                                         │
│                      原始伺服器                          │
│                          ★                              │
│                                                         │
│                                                         │
│    ★ 亞洲                             ★ 澳洲            │
│    節點群                             節點群            │
│                                                         │
└─────────────────────────────────────────────────────────┘

當台灣用戶訪問網站時:
┌─────────────────────────────────────────────────────────┐
│                                                         │
│    用戶 ──► 台北CDN節點 ◄──┐                            │
│                           │                            │
│                           │                            │
│                      原始伺服器                          │
│                                                         │
└─────────────────────────────────────────────────────────┘

<!-- 使用 CDN 引入 JavaScript 庫的範例 -->
<script src="https://cdn.example.com/jquery/3.6.0/jquery.min.js"></script>

<!-- 使用版本控制避免緩存問題 -->
<script src="https://cdn.example.com/main.js?v=1.2.3"></script>

CDN 的主要優勢

提升網頁載入速度

1. 減少延遲，縮短 TTFB（Time To First Byte）
2. 提供更快的資源加載，改善用戶體驗
3. 支援 HTTP/2 和 HTTP/3 協議，允許並行下載

增強可靠性和穩定性

1. 分散流量，避免單點故障
2. 提供高冗餘和可用性
3. 自動故障轉移機制

降低原始伺服器負載

1. 分擔伺服器壓力，節省帶寬成本
2. 減輕高流量時的負載問題
3. 提供更好的擴展性

安全性增強

1. 提供 DDoS 攻擊防護
2. 支援 HTTPS 加密傳輸
3. 可整合 WAF (Web Application Firewall) 功能

CDN 實際應用場景

1. 圖片和媒體優化：圖片、影片等大型媒體檔案
- 1. 例如：Netflix 使用 CDN 分發影片內容，減少緩衝時間
2. 靜態資源交付：CSS、JavaScript 等前端資源
- 1. 例如：Facebook 使用 CDN 加速全球用戶的頁面載入速度
3. 動態內容加速：API 回應和動態生成內容的快取
- 1. 例如：Twitter 使用 CDN 快取熱門推文和時間軸
4. 遊戲和軟體下載：大型檔案分發
- 1. 例如：Steam 平台使用 CDN 分發遊戲更新和下載
5. 直播和影音串流：低延遲內容傳遞
- 1. 例如：YouTube 使用 CDN 確保全球用戶流暢觀看影片

┌─────────────────────────────────────────────────────────────┐
│                                                             │
│  電商網站使用 CDN 的實際案例                                    │
│                                                             │
│  未使用 CDN:                                                 │
│  美國用戶 ──(200ms)──> 台灣伺服器 ──(200ms)──> 美國用戶         │
│  總延遲: ~400ms                                              │
│                                                             │
│  使用 CDN:                                                   │
│  美國用戶 ──(20ms)──> 美國CDN節點 ──(20ms)──> 美國用戶          │
│  總延遲: ~40ms (提升約90%)                                    │
│                                                             │
│  高流量活動 (如雙11購物節):                                    │
│  - 原始伺服器: 可能因流量過大而崩潰                             │
│  - 使用CDN: 分散流量至全球節點，維持網站穩定運行                   │
│                                                             │
└─────────────────────────────────────────────────────────────┘

CDN 的潛在缺點

1. 額外成本：對於小型網站，CDN 服務可能增加不必要的開支
2. 設定複雜性：正確配置 CDN 需要專業知識，設定不當可能導致問題
3. 快取失效挑戰：內容更新時，確保所有 CDN 節點同步更新可能有延遲
4. 依賴第三方：若 CDN 供應商發生故障，可能影響整個網站可用性
5. 地理限制：某些地區可能因政策限制而無法使用特定 CDN 服務

🔥 常見面試題目

（一）如何判斷是否需要使用 CDN？

1. 用戶分布廣：用戶來自不同國家或地區時，CDN 能大幅提速
2. 靜態資源多：網站有大量圖片、CSS、JS 等檔案
3. 流量不穩定：經常有流量高峰，如促銷活動
4. 速度很重要：如電商網站，速度直接影響銷售
5. 成本效益：小網站需評估投入是否值得