CDN 的基本原理
CDN（Content Delivery Network）通过在全球部署服务器，把内容缓存到离用户最近的节点：
用户 → 边缘节点（最近） → 源站
用户访问 example.com/static/app.js：
- DNS 解析到最近的 CDN 边缘节点
- 如果缓存命中，直接返回
- 如果缓存未命中，CDN 回源获取
CDN 的核心优势
1. 降低延迟
物理距离影响网络延迟：
- 上海 → 北京：30ms
- 上海 → 美国：200ms
- 上海 → CDN 边缘（上海）：5ms
2. 减轻源站压力
大量请求由 CDN 边缘节点承担，源站只需要处理缓存未命中的请求。
3. 可用性
CDN 提供冗余和负载均衡，单节点故障不影响整体服务。
CDN 缓存策略
Cache-Control
CDN 根据 Cache-Control 决定缓存时间：
Cache-Control: public, max-age=86400
# 缓存 1 天
缓存判断流程
- 检查边缘节点缓存
- 检查区域缓存
- 回源获取
缓存失效
- TTL 过期自动失效
- 通过 API 主动 purge
前端资源缓存实践
HTML：不要缓存或短缓存
<!-- index.html 通常不缓存，或只缓存几分钟 -->
<meta http-equiv="Cache-Control" content="no-cache">
静态资源：长缓存 + 版本化
<!-- 通过文件名版本化 -->
<script src="/app.js?v=1.0.3"></script>
或使用 content hash：
<script src="/app.a1b2c3d4.js"></script>
<!-- 内容变化时 hash 变化，URL 变化，自然不会用旧缓存 -->
最佳实践
// 构建时生成带 hash 的文件名
// index.html 短缓存（几分钟到几小时）
// static assets 长缓存（1 年）
// 升级时只改变 hash，不改变 URL 路径
边缘计算
边缘计算把计算能力推到 CDN 边缘节点：
// CDN Edge Function 示例（Cloudflare Workers）
addEventListener('fetch', event => {
event.respondWith(handleRequest(event.request));
});
async function handleRequest(request) {
const url = new URL(request.url);
if (url.pathname.startsWith('/api/')) {
// 可以在边缘做认证、日志、响应加工
const token = request.headers.get('Authorization');
if (!verifyToken(token)) {
return new Response('Unauthorized', { status: 401 });
}
}
return fetch(request);
}
边缘计算的应用场景
- A/B 测试：在边缘节点切换不同版本
- 认证：在边缘验证 token，减少回源
- 响应加工：在边缘修改响应内容
- 安全防护：在边缘过滤恶意请求
这一章想说的
CDN 是前端性能优化的基础设施：
- 就近访问：降低网络延迟
- 缓存：减少回源次数
- 冗余：提高可用性
前端资源缓存的最佳实践：HTML 短缓存 + 静态资源长缓存 + 版本化
边缘计算是 CDN 的延伸，把计算推到边缘，可以做认证、A/B 测试、安全防护等。