CDN 对前端有什么作用？如何排查 CDN 问题？
简化版
CDN 通过把静态资源分发到离用户更近的节点，降低延迟、提升下载速度，并承担缓存和抗流量能力。排查 CDN 问题要看 DNS 解析、命中率、缓存头、回源、节点差异、资源版本和是否存在旧缓存。
详细版
CDN 作用：
- 就近访问，降低 RTT。
- 缓存静态资源，减少源站压力。
- 提升并发承载能力。
- 支持压缩、图片处理、HTTPS。
- 支持灰度、刷新和预热。
常见问题：
- 某地区节点访问慢。
- 缓存未刷新导致旧资源。
- HTML 和静态资源版本不一致。
- 回源慢。
- 缓存命中率低。
- CORS 或 MIME 配置错误。
前端发布必须和 CDN 缓存策略配合。
完整版教学
一、CDN 为什么能加速
没有 CDN 时，用户请求都打到源站。如果用户离源站很远，网络延迟会更高。
CDN 在各地部署边缘节点。用户请求资源时，DNS 或调度系统会分配较近节点。如果节点已有缓存，就直接返回。
二、缓存命中和回源
命中缓存时，资源从边缘节点返回，速度快。未命中时，CDN 节点要回源站拉取资源，再缓存给后续用户。
所以 CDN 性能很大程度取决于缓存命中率和回源速度。
带 hash 的静态资源适合长期缓存，HTML 入口要谨慎缓存。
三、发布和刷新
如果资源文件名不变，发布后可能被 CDN 旧缓存影响。刷新 CDN 可以让节点重新回源，但大规模刷新也有成本和延迟。
更好的方式是文件名带内容 hash，内容变化就生成新 URL，避免强依赖刷新。
四、面试追问与工程落地
面试官可能问：“用户反馈某地区白屏怎么排查？”
我会先看该地区资源是否能访问，CDN 节点是否返回旧 HTML，JS/CSS 是否 404，MIME 是否正确，是否存在跨域或证书问题，再看源站和回源日志。
工程中发布后要做健康检查，至少检查 HTML、主 JS、CSS 和关键接口是否正常。
五、用延迟和命中率算清收益
假设用户到源站 RTT 为 180ms，到边缘节点为 25ms；静态资源边缘命中时，光网络往返就可能少约 155ms。若 90% 请求命中边缘、10% 回源，粗略平均链路等待可写成：
平均等待 ≈ 0.9 × 25ms + 0.1 × (25ms + 180ms) = 43ms| 指标 | 含义 | 异常时优先排查 |
|---|---|---|
| cache hit ratio | 边缘直接命中比例 | key、TTL、Vary、Query |
| origin fetch time | 回源耗时 | 源站、跨区链路、连接复用 |
| Age | 对象在共享缓存中的存活秒数 | TTL 与刷新是否生效 |
| 4xx/5xx by POP | 各节点错误率 | 节点配置、回源和证书 |
命中率不能脱离对象大小看。大量 1KB 小图命中、一个 20MB 大文件频繁回源时，请求命中率很好但字节命中率仍可能很差。
CDN 排障顺序：先确认“命中了哪个节点和哪个缓存对象”，再讨论源站；只看浏览器总耗时很难定位层次。
六、版本发布和分层排障
静态资源使用内容 hash 并设置长缓存，HTML 入口短缓存；发布顺序是先上传新资源，再切换 HTML。旧 hash 资源至少保留一个回滚窗口，避免旧 HTML 或仍在线的旧客户端请求 404。
DNS/调度 → 边缘 POP → 缓存 key 与 TTL → 回源链路 → 源站
↓
响应头、Age、Via、节点标识用户反馈单地区白屏时，分别从故障地区与正常地区请求同一完整 URL，比较 DNS、证书、状态码、Content-Type、内容 hash、缓存头和节点标识。200 也可能有问题：HTML 被当 JS 返回、压缩内容损坏、CORS 缺失都可能导致浏览器拒绝使用。
刷新 CDN 是应急手段而非版本系统。大规模 purge 会让所有节点同时回源，可能形成源站洪峰；优先使用不可变 URL，必要刷新时分批并配合预热和源站容量保护。
七、常见误区与追问
- 误区：资源接入 CDN 后一定更快。 调度错误、低命中、慢回源和节点故障都可能抵消收益。
- 误区：状态码 200 就证明 CDN 内容正确。 MIME、CORS、压缩、内容版本和缓存头仍可能错误。
- 误区：每次发布刷新全网缓存最可靠。 全量刷新成本高并可能制造回源洪峰，内容 hash 更稳健。
- 追问：请求命中率高为何流量回源仍很大？ 大对象可能未命中，应同时看字节命中率。
- 追问：为什么 HTML 与静态资源采用不同 TTL？ HTML 是版本入口要及时更新，hash 资源 URL 不变即内容不变，可长期缓存。
- 追问：单地区故障先查什么？ 对比地区 DNS/POP、证书、响应头、资源内容和回源日志。
- 追问：CDN 缓存 key 通常包含什么？ 至少包含主机与路径，是否纳入 query、header、cookie 必须按业务显式设计。
八、加强记忆
- 加速来源：就近节点缩短 RTT，边缘命中减少回源。
- 两类命中率：请求命中率看次数，字节命中率看流量。
- 发布组合：hash 资源长缓存，HTML 短缓存，先资源后入口。
- 排障分层：调度、POP、缓存 key、回源、源站逐层比较。
- 不要迷信 200：继续核对 MIME、CORS、压缩和实际内容版本。
- 谨慎刷新：purge 会放大回源，需分批、预热和容量保护。