精华社 · 藏经阁

外观

CDN 原理：为什么你的资源秒开

约 1247 字

你在北京访问部署在美国的服务器，物理距离摆在那， 光速都救不了延迟。但如果你访问的网站挂了 CDN， 资源可能就从北京的节点出来，几十毫秒到手。 这篇讲 CDN 怎么做到的，以及什么时候该用。

一、CDN 干的三件事

CDN（Content Delivery Network，内容分发网络）本质是一堆 分布在各地的缓存服务器（边缘节点），替源站挡请求：

用户（北京）──► 北京节点（有缓存？直接返回，几毫秒）
                     │ 没有
                     ▼
                 回源（去你的服务器取，慢一次）
                     │
                     ▼
              缓存到北京节点，下次直接命中

三件事：就近访问（降延迟）、分摊流量（源站不被压垮）、 挡攻击（DDoS 打节点不打源站）。

二、用户怎么被分配到节点

靠 DNS 智能解析（和 DNS 那篇 联动）：

① 用户问 CDN 的 CNAME 域名（static.myapp.com.cdn.com）
② CDN 的权威 DNS 看请求来自哪个 IP
③ 北京的用户 → 返回北京节点的 IP
④ 广州的用户 → 返回广州节点的 IP

用户以为在访问 static.myapp.com，实际拿到的节点 IP 是「就近分配」的。 「就近」看的是网络距离（运营商、AS 号），不是地理距离 —— 有时邻省节点比本市节点更快，因为跨了运营商。

三、回源与缓存策略

节点不是无限缓存。关键概念：

回源：节点没缓存 → 去源站取。取的过程慢（跨省/跨国）， 所以回源率直接决定 CDN 效果。

缓存键：默认按 URL 缓存。带 query 的 URL （app.js?v=123）和 app.js 是两份缓存 —— 所以静态资源文件名带 hash 最佳（app.8f3k2.js）， 内容变 = URL 变 = 天然新缓存，不用刷。

缓存刷新（三种，按生效速度排）：

操作场景生效
刷新 URL单个文件更新了分钟级
刷新目录一批文件分钟级
预热活动前主动推热点内容到节点立即可用

经典搭配（本站就是这么设计的）：

  • HTML：不缓存或短缓存（no-cache，每次回源验证）—— 入口必须新鲜；
  • hash 静态资源：缓存一年（max-age=31536000）—— 内容变文件名就变，永远不用刷；
  • 接口：不缓存（no-store）。

迁移/发版的坑：HTML 被 CDN 长缓存了，新版发不出去。 解法：HTML 走 no-cache（协商缓存），或者发版后手动刷新。 这套策略的原理见 HTTP 缓存详解。

四、CDN 的安全 buff

除了快，CDN 还是安全设施：

  • DDoS 防护：流量打到分布式节点，单个节点限速+清洗， 源站 IP 藏后面（别泄露源站 IP，泄露了攻击者就绕开 CDN 直捣）；
  • WAF：Web 应用防火墙，SQL 注入/XSS 特征在节点层拦掉；
  • HTTPS 终止：节点统一管证书和 TLS，源站内网通信；
  • 防盗链：Referer 白名单、URL 鉴权（?sign=xxx&t=过期时间）， 防别人白嫖你的图片带宽。

防盗链是内容站刚需 —— 不配的话，别人论坛直接贴你的图 URL， 流量全走你的账。

五、什么时候需要 CDN

该上的信号：

  • 用户分布跨地域（全国/全球访问）；
  • 静态资源流量占比高（图片、JS、视频）；
  • 源站带宽小/被流量打满过；
  • 需要 HTTPS + HTTP/2（CDN 一键配好）；
  • 有安全需求（WAF、防 DDoS）。

可以不上的情况：

  • 用户都在同城/同运营商，延迟差距不大；
  • 纯 API 服务（动态请求 CDN 帮不上，动态加速 CDN 另说）；
  • 访问量极小，免费额度都用不完（比如本站）。

六、本站为什么没用 CDN

说实话：GitHub Pages 本身全球有节点（Fastly）， 本站访问量小到可以忽略，静态资源总共几百 KB，SVG 图片都是矢量。 套一层商业 CDN 是花钱买心理安慰。

但架构是 CDN-ready 的：资源全带 hash、HTML 走协商缓存、 部署流水线透明。将来流量大了，套个 Cloudflare（有免费档）就是 改几条 DNS 记录的事 —— 不用改代码。

七、自检与排障

确认走了 CDN：

curl -I https://static.myapp.com/app.js | grep -i "x-cache\|via\|age"

响应头里的 X-Cache: HIT（命中）、Age: 3600（缓存了多久） 就是证据。

更新不生效排查顺序：

① 本地构建产物是新的吗（hash 变了吗）
② CDN 缓存刷了吗（刷新 URL/目录）
③ 浏览器缓存清了吗（DevTools 里 Disable cache）
④ DNS 切到 CDN 了吗（dig static.myapp.com）

四步逐一定位，别在第三步瞎试一小时。

小结

CDN 三件套：DNS 就近分配、边缘节点缓存、回源兜底。 配套策略：HTML 短缓存、hash 资源长缓存、发版主动刷新。 安全顺带：WAF、DDoS、防盗链。本站暂时裸奔 Pages， 但姿势是对的 —— 随时能接。