博客文章
如何设计高性能照片缩略图缓存
缩略图缓存是照片浏览体验的基础，本文记录一套更适合桌面端的缓存设计思路。
分类：photography发布时间：2026年7月20日阅读：2 分钟
如何设计高性能照片缩略图缓存§
缩略图缓存做得好，用户会觉得软件“很快”；做不好，软件看起来就像一直在加载。对于选片软件来说，缓存不是附加功能，而是浏览性能的核心。
为什么缩略图比原图更重要§
用户在筛选阶段并不会一直看原图，大多数操作其实都发生在缩略图层面。如果每次滚动都重新解码原图，性能会迅速崩掉。
因此，合理的策略应该是：
- 优先使用缩略图
- 原图只在必要时加载
- 缩略图按尺寸分级缓存
- 对重复访问的项目做持久化
缓存设计要考虑的点§
1. 缓存键§
缓存键最好能唯一表示：
- 文件路径
- 文件修改时间
- 目标尺寸
- 编码参数
这样源文件变动后，旧缓存才会自然失效。
2. 缓存层级§
建议至少分两层：
- 内存缓存
- 磁盘缓存
内存缓存适合最近浏览的照片，磁盘缓存适合重复打开的项目。
3. 失效策略§
不要让缓存永久增长。需要定期清理最旧条目，或者按项目维度做配额管理。
一个缓存键的示例§
function buildThumbnailKey(path: string, mtime: number, size: number) {
return `${path}:${mtime}:${size}`;
}缩略图生成流程§
读取照片 -> 检查缓存 -> 命中则直接返回
↓
未命中则生成缩略图 -> 写入磁盘缓存 -> 更新内存缓存用户体验上的细节§
- 滚动列表时不要阻塞主线程
- 先显示低分辨率预览，再补充更清晰版本
- 在高密度网格里避免一次性触发过多解码
- 切换筛选条件时尽量复用已有缓存
总结§
高性能缩略图缓存不是“多加一个缓存目录”这么简单，而是一个完整的数据流设计问题。越是照片密集型应用，越应该优先把缓存策略设计清楚。