前端缓存概念体系梳理
Created on
前言
前端缓存看似是浏览器或框架的细节,本质上是一套“在正确时间使用正确副本”的策略体系。本文不讲具体配置与代码,只建立概念框架,帮助你在任何技术栈下做出合理判断。
一、概念分层:缓存发生在什么层
前端缓存可以按“发生位置”分为六层,从网络到应用逐层上移:
- 网络层缓存: HTTP 缓存(强缓存/协商缓存),由浏览器与服务器共同决定。
- 存储层缓存: Cookie、localStorage、sessionStorage、IndexedDB 等持久化存储。
- 代理层缓存: Service Worker 的 Cache Storage,可编程离线与策略缓存。
- 应用层缓存: 内存中的状态、请求结果缓存、组件级 memo 等。
- 分发层缓存: CDN/边缘缓存,靠近用户的静态内容副本。
- 版本层缓存: 静态资源文件指纹,通过“换名”控制更新。
这六层不是互斥关系,而是叠加关系:同一资源可能同时被 CDN、HTTP、SW 和内存缓存命中。
二、核心概念:新鲜度与验证
缓存的核心不是“存不存”,而是“是否还新鲜”。对应两条路径:
- 强缓存: 不发请求,直接使用本地副本。新鲜度由 max-age 或 Expires 决定。
- 协商缓存: 先问服务器是否更新,通过 ETag 或 Last-Modified 验证。
概念上可理解为:
- 新鲜度: 资源在一段时间内被认为是“可用副本”。
- 验证: 过期后通过轻量请求确认是否仍可用。
三、缓存与存储的区别
很多人把缓存与存储混用,但概念上有本质差别:
- 缓存: 为性能服务,可以随时失效或被回收。
- 存储: 为持久化服务,强调稳定可追溯。
因此,缓存强调“可丢弃”,存储强调“可恢复”。
四、缓存对象的三类形态
从数据类型上看,前端缓存主要面对三类对象:
- 静态资源: JS/CSS/图片/字体,变化频率低,适合长缓存+指纹。
- 接口数据: 业务数据变化频率高,更依赖短缓存与验证策略。
- 页面结果: SSR/SSG 产物,介于资源与数据之间,需看更新窗口。
五、生命周期视角
可以用生命周期重新理解缓存:
- 会话级: 刷新或关闭即失效(内存缓存、sessionStorage)。
- 持久级: 可跨会话存在(localStorage、IndexedDB、长缓存资源)。
- 策略级: 有明确的过期与更新规则(HTTP 缓存、SW 缓存)。
生命周期越长,对失效策略的要求越高。
六、失效策略是缓存的关键
缓存的难点不在“存”,而在“失效”。常见概念包括:
- TTL: 到期直接失效。
- 版本号/指纹: 通过资源名变化完成替换。
- 主动失效: 业务触发清理或刷新。
- 后台更新: 先用旧数据,后台拉新后替换。
一个缓存策略必须明确“什么时候替换旧数据”。
七、概念框架小结
可以用一句话串起所有概念:
前端缓存 = 在多层副本之间,用新鲜度与验证规则平衡性能与一致性。
理解这套框架后,无论面对 HTTP 头、Service Worker 还是框架级缓存,你都能快速判断它属于哪个层,靠什么维持新鲜度,以及如何失效。
结语
缓存不是某个 API 或工具,而是“数据生命周期治理”。先建立概念体系,再进入实操,才能避免碎片化的配置与经验主义。