跳到主要内容

CDN 加速

CDN（Content Delivery Network，内容分发网络）是 Cloudflare 的核心功能之一。通过将网站内容缓存到全球各地的边缘节点，CDN 可以大幅提升网站访问速度，减轻源服务器压力。

CDN 工作原理​

传统访问方式​

在没有 CDN 的情况下，用户访问网站的流程：

用户（北京）→ 请求 → 源服务器（美国）
                    ↓
用户（北京）← 响应 ← 源服务器（美国）

用户与源服务器距离越远，延迟越高。跨洲访问延迟可能达到数百毫秒。

CDN 加速方式​

使用 Cloudflare CDN 后的访问流程：

用户（北京）→ 请求 → Cloudflare 边缘节点（北京）
                    ↓
            缓存命中？
           /        \
         是          否
         ↓           ↓
    直接返回    从源服务器获取并缓存
         ↓           ↓
用户（北京）← 响应 ← 源服务器（美国）

核心优势：

  • 用户访问最近的边缘节点，延迟大幅降低
  • 静态资源被缓存，减少源服务器请求
  • 全球 300+ 节点，覆盖绝大多数地区

缓存机制​

可缓存内容​

Cloudflare 默认缓存以下内容：

内容类型默认缓存说明
静态文件是图片、CSS、JS、字体等
HTML 页面否默认不缓存，可配置
API 响应否默认不缓存
视频文件部分小于 512MB 的视频文件

缓存规则​

Cloudflare 根据以下因素决定是否缓存：

  1. 文件扩展名：默认缓存常见静态文件扩展名
  2. Content-Type：根据响应头的 Content-Type 判断
  3. Cache-Control：遵循源服务器的 Cache-Control 头
  4. 页面规则：自定义缓存规则覆盖默认行为

缓存键（Cache Key）​

缓存键决定哪些请求被视为相同内容。默认情况下，缓存键包含：

  • URL（包括查询字符串）
  • 请求方法（GET、HEAD 等）

你可以通过 Page Rules 或 Cache Rules 自定义缓存键。

缓存配置​

缓存级别​

在 "Caching" → "Configuration" 中设置缓存级别：

级别说明适用场景
No Query String忽略查询字符串静态资源 URL 不变
Ignore Query String忽略查询字符串静态资源带版本号
Standard标准缓存一般网站
Aggressive缓存所有静态资源静态网站

推荐设置：大多数网站使用 Standard 级别即可。

浏览器缓存 TTL​

设置浏览器缓存的过期时间：

Caching → Configuration → Browser Cache TTL

可选值：30 秒、1 分钟、2 分钟、5 分钟、1 小时、2 小时、4 小时、8 小时、16 小时、1 天、2 天、3 天、4 天、5 天、8 天、16 天、1 个月、2 个月、6 个月、1 年

建议：

  • 静态资源：1 个月或更长
  • 动态内容：较短时间或不缓存

开发模式​

在开发调试时，可以临时禁用缓存：

Caching → Configuration → Development Mode

开启后，缓存会在 3 小时后自动失效。适合在更新网站后查看效果。

页面规则缓存​

通过 Page Rules 可以创建更精细的缓存规则：

示例：缓存特定路径​

URL 匹配: example.com/static/*
设置:
  - Cache Level: Cache Everything
  - Edge Cache TTL: 1 month
  - Browser Cache TTL: 1 year

示例：绕过缓存​

URL 匹配: example.com/api/*
设置:
  - Cache Level: Bypass

示例：缓存 HTML 页面​

URL 匹配: example.com/blog/*
设置:
  - Cache Level: Cache Everything
  - Edge Cache TTL: 1 hour

Cache Rules（新）​

Cache Rules 是 Cloudflare 新推出的缓存规则系统，比 Page Rules 更灵活：

创建 Cache Rules​

  1. 进入 "Caching" → "Cache Rules"
  2. 点击 "Create Rule"
  3. 设置匹配条件
  4. 配置缓存行为

匹配条件示例​

条件: 
  - URI Path starts with "/static/"
  - OR URI Path ends with ".jpg"
  - OR URI Path ends with ".png"

操作:
  - Cache eligibility: Eligible for cache
  - Edge TTL: Respect existing headers, override origin if missing (1 day)

缓存清除​

清除所有缓存​

Caching → Configuration → Purge Everything

注意：清除所有缓存会导致短暂的性能下降，因为所有请求都需要回源。

清除特定 URL​

Caching → Configuration → Custom Purge

输入需要清除的 URL 列表，每行一个 URL。

通过 API 清除​

curl -X POST "https://api.cloudflare.com/client/v4/zones/{zone_id}/purge_cache" \
  -H "Authorization: Bearer {api_token}" \
  -H "Content-Type: application/json" \
  --data '{"files":["https://example.com/style.css"]}'

性能优化功能​

Auto Minify​

自动压缩 HTML、CSS、JavaScript 代码，减小文件体积：

Speed → Optimization → Auto Minify

选项：

  • HTML：移除注释、空白字符
  • CSS：移除注释、空白字符、优化选择器
  • JavaScript：移除注释、空白字符、简化语法

建议：全部开启。如果网站已经压缩过，可以关闭。

Brotli 压缩​

Brotli 是比 Gzip 更高效的压缩算法：

Speed → Optimization → Brotli

开启后，支持的浏览器会获得更小的文件体积。

HTTP/3 (QUIC)​

HTTP/3 是最新的 HTTP 协议，基于 QUIC 传输：

Network → HTTP/3 (with QUIC)

优势：

  • 更快的连接建立
  • 更好的丢包恢复
  • 更低的延迟

建议：开启。兼容 HTTP/2 和 HTTP/1.1。

Early Hints​

提前发送资源提示，加速页面加载：

Speed → Optimization → Early Hints

当浏览器请求 HTML 时，服务器可以在处理请求的同时，提前告知浏览器需要加载的资源。

Rocket Loader​

自动优化 JavaScript 加载：

Speed → Optimization → Rocket Loader

功能：

  • 延迟加载非关键 JavaScript
  • 合并 JavaScript 请求

注意：可能导致某些 JavaScript 功能异常，建议测试后开启。

图片优化​

Polish​

自动优化图片，减小文件体积：

Speed → Optimization → Polish

选项：

  • Off：关闭
  • Lossless：无损压缩
  • Lossy：有损压缩（压缩率更高）

WebP​

自动将图片转换为 WebP 格式：

Speed → Optimization → WebP

WebP 格式比 JPEG/PNG 更小，但需要浏览器支持。

Mirage​

自适应图片加载，根据网络速度优化：

Speed → Optimization → Mirage

功能：

  • 检测网络速度
  • 延迟加载屏幕外的图片
  • 适配移动设备

缓存状态检查​

响应头查看​

通过响应头 CF-Cache-Status 判断缓存状态：

状态说明
HIT缓存命中
MISS缓存未命中，已缓存响应
EXPIRED缓存已过期
STALE缓存过期但仍返回
BYPASS绕过缓存
REVALIDATED已重新验证

使用 curl 检查​

curl -I https://example.com/style.css

# 查看响应头
CF-Cache-Status: HIT
CF-Ray: 7f1234567890abc-SJC

最佳实践​

静态资源缓存策略​

  1. 使用版本号或哈希：style.css?v=1.0 或 style.a1b2c3.css
  2. 设置长缓存时间：静态资源可以缓存 1 年
  3. 使用 Cache Rules：精确控制缓存行为

动态内容缓存策略​

  1. 短缓存时间：几分钟到几小时
  2. 使用 Cache-Control 头：源服务器控制缓存
  3. 考虑使用 Workers：边缘计算实现动态缓存

缓存预热​

发布新内容后，主动触发缓存：

# 使用 curl 预热
curl -I https://example.com/new-page.html

# 或使用脚本批量预热
for url in $(cat urls.txt); do
  curl -I "$url" &
done
wait

常见问题​

为什么缓存没有生效？​

检查以下因素：

  1. 缓存级别设置是否正确
  2. 响应头是否禁止缓存（Cache-Control: no-store）
  3. 是否开启了开发模式
  4. 文件类型是否在默认缓存列表中

如何强制刷新缓存？​

  1. 使用 Custom Purge 清除特定 URL
  2. 在 URL 后添加查询参数 ?v=xxx
  3. 修改文件名（推荐）

缓存会影响 SEO 吗？​

正确配置缓存不会影响 SEO：

  • 搜索引擎爬虫会收到缓存的内容
  • 使用 Cache-Control: s-maxage 控制缓存时间
  • 确保动态内容不被错误缓存

参考链接​

下一步​

完成 CDN 配置后，接下来学习 SSL/TLS，了解如何配置 HTTPS 加密。