Visual LabINTERACTIVE LEARNING
06 · SAAS OPERATIONSP113 MIN

Cloudflare、CDN 与静态资源交付

理解边缘节点能加速什么、不能加速什么,以及缓存命中的必要条件。

MENTAL MODELEDGE DELIVERY
01US Browser
02Nearest Edge
03Cache Hit?
04Origin
05Static Asset
CDN 把可复用响应放到离用户更近的边缘;如果每次都必须回源数据库,它只能缩短其中一段路。
01 · CONCEPTS & BOUNDARIES

先把概念与边界说清楚

定义告诉你它是什么,边界告诉你它不负责什么;企业系统最常见的误解通常发生在两者混用时。

01

Cloudflare

提供 DNS、CDN、TLS、WAF、Workers 等边缘网络能力的平台。

02

CDN

在全球边缘缓存可复用内容,降低传输距离与源站负载。

03

Static Asset Delivery

JS、CSS、字体和图片以内容哈希、压缩和长期缓存从边缘交付。

02 · BLIND BOTS CASE

美国用户下载 8MB 产品图很慢

问题现场

图片从亚洲单一区域源站传输且每次回源。

  1. 01

    生成合适尺寸与现代格式。

  2. 02

    使用内容哈希和 public immutable 缓存。

  3. 03

    在 Cloudflare 边缘验证 HIT 与传输压缩。

得到什么

首个用户回源后,同区域后续用户从近端边缘获取;源站流量同步下降。

03 · PRACTICE

马上动手

  1. 为 index.html 和 app.abc.js 分别写缓存策略。
  2. 列出 CDN 无法解决的三类慢请求。
04 · PITFALLS

常见坑

  • HTML 缓存一年导致旧资源引用
  • 缓存带私密数据响应
  • 只看 CDN 开关不看 HIT/MISS
05 · KNOWLEDGE CHECKCDN 能解决什么?查看答案⌄
答案

主要减少可缓存内容的网络距离、带宽和源站负载;不能替代应用计算、数据库查询和第三方 API 优化。