客户端缓存策略模式

Client-Side Caching Strategies — 5 种经典模式对比与 Celoria 应用实践

1. 为什么需要了解缓存策略？

客户端（移动 App、PWA、桌面应用）在访问远程数据时，都面临一个核心矛盾：

不同的缓存策略就是在这两个维度上做不同的权衡取舍。没有"最好的"策略，只有"最适合场景的"策略。

2. 五种策略速览

3. 各策略详解

flowchart LR
    A[客户端请求] --> B{缓存中有?}
    B -->|命中| C[返回缓存数据]
    B -->|未命中| D[请求网络]
    D --> E[写入缓存]
    E --> F[返回网络数据]
    style C fill:#2ecc71,color:#000
    style F fill:#3498db,color:#000
    

flowchart LR
    A[客户端请求] --> B[请求网络]
    B -->|成功| C[更新缓存]
    C --> D[返回最新数据]
    B -->|失败/超时| E{缓存中有?}
    E -->|有| F[返回缓存数据]
    E -->|没有| G[报错]
    style D fill:#3498db,color:#000
    style F fill:#f39c12,color:#000
    style G fill:#e74c3c,color:#000
    

flowchart LR
    A[客户端请求] --> B{缓存中有?}
    B -->|命中| C[立刻返回缓存数据]
    B -->|未命中| F[请求网络]
    C --> D[后台请求网络]
    D -->|成功| E[静默更新缓存]
    E --> N[下次请求即最新]
    F --> G[写入缓存]
    G --> H[返回网络数据]
    style C fill:#2ecc71,color:#000
    style E fill:#9b59b6,color:#fff
    style H fill:#3498db,color:#000
    

flowchart LR
    A[客户端请求] --> B[请求网络]
    B -->|成功| C[返回数据]
    B -->|失败| D[报错]
    style C fill:#3498db,color:#000
    style D fill:#e74c3c,color:#000
    

flowchart LR
    A[客户端请求] --> B{缓存中有?}
    B -->|有| C[返回缓存数据]
    B -->|没有| D[报错/显示空]
    style C fill:#2ecc71,color:#000
    style D fill:#e74c3c,color:#000
    

4. 如何选择？决策流程图

flowchart TD
    A[这个数据需要缓存吗?] -->|不需要,实时性第一| B[Network-Only]
    A -->|需要缓存| C{数据变化频率?}
    C -->|永远不变| D[Cache-Only]
    C -->|几乎不变,偶尔更新| E[Stale-While-Revalidate]
    C -->|经常变化| F{离线可用重要吗?}
    F -->|重要| G[Network-First]
    F -->|不重要| H{首屏速度重要吗?}
    H -->|是| E
    H -->|否| G

    style B fill:#e74c3c,color:#fff
    style D fill:#9b59b6,color:#fff
    style E fill:#00d4ff,color:#000
    style G fill:#f39c12,color:#000
  

5. 进阶组合与变种

5.1 Cache-then-Network（缓存然后网络）

和 Stale-While-Revalidate 类似，但区别是：网络数据返回后立刻更新 UI（不是等下次请求）。

sequenceDiagram
    participant U as UI
    participant C as 缓存
    participant N as 网络

    U->>C: 读缓存
    C-->>U: 返回旧数据 (立刻渲染)
    U->>N: 同时请求网络
    N-->>C: 写入新数据
    N-->>U: 返回新数据 (替换渲染)

    Note over U: UI 闪烁一下变成新数据
  

5.2 Race（竞速）

同时请求缓存和网络，谁先返回用谁。高可用场景使用，但实现复杂度高。

5.3 分层缓存（Tiered Cache）

多级缓存：内存缓存 → 磁盘缓存 → 网络。每一层作为下一层的加速层。

Memory Cache (50ms) → Disk Cache (200ms) → Network (1000ms+)
  

Flutter 的 cached_network_image 就是这个模式：内存 LRU → 文件缓存 → 网络下载。

6. Celoria 平台中的缓存策略分布

7. 技术实现参考

7.1 Flutter（POS / Kiosk App）

// Stale-While-Revalidate 伪代码（Dart）
class CachedBrandingService {
  final SharedPreferences _prefs;
  final ApiClient _api;

  /// 获取租户 Logo —— SWR 模式
  Future<String> getTenantLogo(String tenantId) async {
    // 1. 先读缓存（立刻返回）
    final cached = _prefs.getString('logo_$tenantId');

    // 2. 后台静默刷新
    _refreshInBackground(tenantId);

    // 3. 有缓存返回缓存，没有则等网络
    if (cached != null) return cached;
    return await _fetchAndCache(tenantId);
  }

  void _refreshInBackground(String tenantId) async {
    try {
      final hash = _prefs.getString('logo_hash_$tenantId');
      final remote = await _api.getBranding(tenantId);
      if (remote.logoHash != hash) {
        // Logo 变了，下载新的
        final bytes = await _api.downloadImage(remote.logoUrl);
        await _saveToLocal(tenantId, bytes, remote.logoHash);
      }
    } catch (_) {
      // 后台刷新失败不影响当前显示
    }
  }
}
  

7.2 React / Next.js（Web 管理后台）

// TanStack Query 天然支持 SWR 模式
const { data: stores } = useQuery({
  queryKey: ['stores'],
  queryFn: () => api.get('/stores'),
  staleTime: 5 * 60 * 1000,     // 5 分钟内认为是"新鲜"的
  gcTime: 30 * 60 * 1000,        // 缓存保留 30 分钟
  refetchOnWindowFocus: true,    // 窗口聚焦时自动 revalidate
});

// Network-Only: 支付 mutation
const payMutation = useMutation({
  mutationFn: (data) => api.post('/payment/checkout', data),
  // mutation 天然是 Network-Only，不走缓存
});
  

7.3 Service Worker（PWA）

// Workbox 的 StaleWhileRevalidate 策略
import { StaleWhileRevalidate } from 'workbox-strategies';
import { registerRoute } from 'workbox-routing';

// 对 /api/branding/* 使用 SWR 策略
registerRoute(
  ({url}) => url.pathname.startsWith('/api/branding'),
  new StaleWhileRevalidate({
    cacheName: 'branding-cache',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 50,
        maxAgeSeconds: 7 * 24 * 60 * 60, // 7 天
      }),
    ],
  })
);
  

8. 常见陷阱

9. 一句话记忆法

最后更新：2026-02-20 | 关联：POS 品牌 Logo 缓存方案