Báo Cáo Giữa Kỳ · Đề Tài Số 8
CDN
Mạng Phân Phối Nội Dung
Content Delivery Networks
Môn: Lập trình Web và Ứng dụng
⏱ 0:00 – 4:00 · Lý Thuyết
Bài Toán Đặt Ra
"World Wide Wait"
Máy chủ duy nhất ở Mỹ phải phục vụ toàn bộ người dùng thế giới
→ Độ trễ cáp quang biển lên đến 300+ ms
🐢
350ms
TTFB – Không có CDN
Hà Nội → New York → Hà Nội
VS
⚡
<50ms
TTFB – Có CDN
Hà Nội → PoP Việt Nam
⏱ 1:30 – 4:00 · Kiến Trúc
Nguyên Lý Hoạt Động
Caching Points (PoPs)
👤 Người dùng
Hà Nội, VN
→
🌐 BGP Anycast
Định tuyến thông minh
→
⚡ Edge PoP
TP. HCM / Singapore
~~
🏢 Origin Server
Ít khi cần đến
Giao thức BGP Anycast:
Tự động định tuyến lưu lượng tới trạm Edge Server gần nhất về mặt vật lý.
Dữ liệu được Cache tại PoP → phản hồi ngay lập tức mà không cần chạm Origin.
⏱ 4:00 – 6:00 · Lợi Ích
Tại Sao Cần CDN?
4 Lợi Ích Sống Còn
🚀
Hiệu Suất (Performance)
Rút ngắn TTFB từ hàng trăm ms xuống còn < 50ms. Cache tại Edge = phản hồi tốc độ ánh sáng.
🛡️
Độ Sẵn Sàng (Availability)
Origin sập? Edge dùng Stale Data để tiếp tục phục vụ. Người dùng không biết web đang gặp sự cố.
📈
Khả Năng Mở Rộng (Scalability)
Lên đến 90% lưu lượng Flash Sale bị CDN hấp thụ trước khi chạm Origin Server.
🔒
Bảo Mật (Security)
Tấm khiên chắn DDoS khổng lồ bằng tổng băng thông phân tán của hàng trăm PoP trên toàn cầu.
⏱ 6:00 – 8:00 · So Sánh
Thị Trường CDN Toàn Cầu
Các Nền Tảng Phổ Biến
🟠
Cloudflare
Proxy DNS + Custom Rules + WAF. Phổ cập nhất cho startup và developer.
🔵
Akamai
"Bác cả viễn thông". Chuyên hạ tầng streaming Media khổng lồ như Netflix.
🟡
AWS CloudFront
Sinh ra trong AWS. Tích hợp S3, Lambda. Lý tưởng cho dự án dùng hệ sinh thái Amazon.
▲
Fastly / Vercel / Netlify
Edge Network cho Frontend. Github Pages dùng Fastly — Demo sử dụng CDN này.
⏱ 8:00 – 11:00 · Thực Nghiệm 1
Demo Trực Tiếp
Đo Lường TTFB: Local vs CDN
-
1
Mở từ ổ cứng (file://): Dashboard báo 🐢 Đỏ — Image Probes đo tới HTTPBin/Ipify/Ident (US) ≈ 300ms
-
2
Chuyển sang Github Pages: Fetch API đo TTFB qua Fastly Edge PoP → ⚡ <50ms — nhanh hơn ~6–8 lần.
-
3
Ô Cache Header: JS bắt X-Cache: HIT từ Fastly CDN — bằng chứng Edge đang phục vụ.
// Local: Image Probe vượt CORS file://
const img = new Image(); img.src = url + '?_nc=' + Date.now();
// CDN: Fetch + Resource Timing API
const entry = performance.getEntriesByName(url)[0];
const ttfb = entry.responseStart - entry.requestStart;
⏱ 11:00 – 13:00 · Thực Nghiệm 2
Demo Invalidation Trực Tiếp
Cache Invalidation
-
1
Nút "Cập nhật App": Thêm version query (?v=2) vào URL (Cache Busting) — CDN xem đây là URL mới, buộc phải tải lại từ Origin.
-
2
Lần quét 1 (Cache MISS): TTFB vọt lên mức cao vì CDN chưa có bản mới trong Cache, phải quay về Origin kéo dữ liệu.
-
3
Lần quét 2 (Cache HIT): TTFB giảm xuống cực thấp (<50ms) vì bản mới đã được lưu đệm tại PoP SEA.
-
4
Kết luận: Chứng minh cơ chế kiểm soát tính tức thời của dữ liệu trên mạng lưới CDN phân tán.
⏱ 12:30 – 14:00 · Lý Thuyết
Các Chiến Lược Invalidation
4 Phương Pháp Invalidation
⏰
TTL Expiry
Cache-Control: max-age=86400
Hết hạn tự nhiên → Edge revalidate về Origin.
Phù hợp: Ảnh, font, tài nguyên ít thay đổi.
🚨
Purge API
Gọi API xóa Cache toàn cầu tức thì.
3 mức: by URL, by Tag, Purge All.
Phù hợp: Hotfix khẩn cấp.
🚧
Cache Busting ✅
Thêm ?v=2 vào URL → CDN xem là URL mới.
Đã demo trực tiếp ở TN2.
Phù hợp: Deploy JS/CSS.
🔄
Stale-While-Revalidate
Trả bản cũ + cập nhật ngầm ở nền.
Người dùng tiếp theo nhận bản mới.
Phù hợp: API, tin tức.
✅ Kết Luận
Tổng Kết Đề Tài Số 8
"Thế giới lập trình mạng đã không còn nằm ở lõi Trung tâm —
mà dời trọn sức mạnh ra Edge Computing
thông qua các Caching Points phân tán toàn cầu."
⚡ TTFB: 300ms → <50ms
✅ Cache Invalidation
🔧 4 Chiến Lược Invalidation
🌐 BGP Anycast + PoPs