防止JavaScript函数缓存导致内存无限增长,核心在于主动控制缓存的“容量上限”与“生效时长”,需要结合LRU淘汰机制、TTL时效策略、键值生成优化以及手动清理方法,才能有效避免内存泄漏问题。

防止函数缓存引发内存无限膨胀,关键在于主动约束两个维度:缓存容量和条目有效期。单纯只存不删必然导致内存溢出,问题的核心不在于是否使用缓存,而在于如何实现智能存储与及时清理。
限制缓存最大条目数,借助LRU策略自动淘汰
无上限的 Map 或对象缓存会随着调用次数线性增长,尤其在参数组合多样、生命周期较长的场景下,内存极易被耗尽。LRU(最近最少使用)是最实用的淘汰机制:保留最新或最常访问的条目,将长时间未被使用的数据移出缓存。
- 手写简易 LRU:利用
Map实现(它天然维护插入顺序),每次 get/set 后把对应项移至末尾;当 size 超过上限时,删除Map.keys().next().value(即首个插入的键) - 推荐直接采用成熟库,如
lru-cache(Node.js)或轻量版quick-lru(浏览器),它们已妥善处理边界情况,例如并发读写、键冲突等问题 - 设定合理的容量阈值:例如 API 请求结果缓存设为 100 条,组件计算结果缓存设为 20 条——根据实际调用频次和数据大小动态调整,而非随意设定为 1000
为缓存条目设置有效期,防止“脏数据”长期驻留
某些结果天然具有时效性,比如用户权限信息、实时价格、临时令牌等。缓存虽然能节约资源,但返回过期的数据会造成业务异常。单纯依赖 LRU 无法解决时间维度上的问题。
- 为每条缓存记录附加时间戳,在 get 之前检查是否超时,超时则丢弃并重新计算
- 可封装成带 TTL 的缓存工厂:
createMemoizedFn(fn, { maxAge: 5 * 60 * 1000 }) - 注意:不应使用
setTimeout为每个缓存项单独设置定时器——这会创建大量定时器,加剧内存与垃圾回收压力;采用统一轮询或惰性检测方式更稳妥
避免缓存引用类型参数引发的“假命中”
用 JSON.stringify(args) 生成键看似便捷,但对象或数组内容变化后,序列化结果可能相同(例如属性顺序不同、包含 undefined 或函数),也可能相同内容被多次序列化生成不同键,导致缓存失效或冗余堆积。
- 对于简单参数(数字、字符串、布尔值),直接拼接键,如
`${a}-${b}` - 对于对象参数,优先提取稳定字段作为键,例如
user.id或api.url + JSON.stringify(params),而非对整个对象做深度序列化 - 若必须进行深度比较,采用结构化克隆或专用工具(如
fast-deep-equal)预处理,避免反复序列化——从而降低 CPU 和内存开销
提供手动清理接口,配合业务生命周期使用
自动策略无法覆盖全部场景。例如用户登出后,应清空其个人数据相关缓存;表单重置时,移除依赖当前输入的计算结果。
- 在 memoized 函数上暴露
.clear()方法,内部清空 Map 或重置 cache 对象 - 支持按 key 单独清理:
.delete(key),便于实现局部刷新 - 在 React/Vue 等框架中,将缓存实例绑定到组件实例或 store 模块内,卸载时自动调用 clear,防止闭包持有导致内存泄漏
设计并不复杂,但确实容易被忽视:缓存不是一加了事,它本身就是需要被管理的状态。在设计之初就考虑谁来删除、何时删除、删除多少,才能真正兼顾性能与稳定性。
