如何设计JavaScript函数缓存防止内存无限增长

防止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，防止闭包持有导致内存泄漏

设计并不复杂，但确实容易被忽视：缓存不是一加了事，它本身就是需要被管理的状态。在设计之初就考虑谁来删除、何时删除、删除多少，才能真正兼顾性能与稳定性。