直接缓存计算密集型结果可提升页面响应速度与主线程性能；关键在于明确缓存对象、策略及清理时机，优先缓存纯函数结果、高复杂度操作、高频低变参调用及稳定外部数据，推荐使用Map实现高效内存缓存。
直接缓存计算密集型结果，能跳过重复耗时运算，让页面响应更快、主线程更轻量。关键不是“要不要缓”，而是“缓什么、怎么缓、何时清”。
哪些计算值得缓存
不是所有计算都适合缓存。优先考虑：
- 纯函数结果：输入相同、输出确定，无副作用（比如格式化日期、解析JSON、斐波那契数列）
- 高时间复杂度操作：O(n²) 或递归深度大的逻辑（如树形结构扁平化、大数组去重+映射）
- 调用频次高但参数组合有限：比如分页请求的固定 offset/limit、固定维度的数据聚合
- 依赖稳定外部数据：配置项、字典表、静态枚举等不常变更的内容
内存缓存的高效实现方式
运行时缓存靠的是快速读写，推荐用 Map 而非普通对象：
- Map 支持任意类型键：可直接用数组、对象甚至函数作为 key（序列化后更稳妥）
- 查找时间复杂度 O(1)，比对象属性遍历或数组 find 快得多
-
避免 JSON.stringify 的坑：对简单参数可用
JSON.stringify(args)作 key；复杂嵌套建议用结构化比较或自定义哈希生成
示例：带 TTL 的简易记忆化函数
Alibabacloud Sdk Client Initialization For Java
下载
在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
立即学习“Java免费学习笔记（深入）”；
function memoizeWithTTL(fn, maxAge = 5 * 60 * 1000) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
const item = cache.get(key);
if (item && Date.now() - item.timestamp < maxAge) {
return item.value;
}
const value = fn.apply(this, args);
cache.set(key, { value, timestamp: Date.now() });
return value;
};
}
<p>const expensiveCalc = memoizeWithTTL((n) => {
let sum = 0;
for (let i = 0; i < n * 10000; i++) sum += Math.sqrt(i);
return sum.toFixed(2);
}, 30000); // 缓存30秒
缓存清理不能被忽略
缓存不清理，等于内存泄漏。常见策略有：
- 时效性清理：设置 max-age，适合数据有明确更新周期的场景（如天气预报每小时刷新）
-
事件驱动清理：监听数据变更事件（如用户修改配置、切换语言），主动
cache.clear()或按 key 删除 -
容量限制 + LRU：用
Map模拟 LRU（插入新项时删最久未用的），适合参数组合多但内存受限的情况 - 作用域绑定清理：在组件卸载、模块销毁时清空对应缓存（如 React useEffect cleanup、Vue onBeforeUnmount）
别把缓存当万能解药
缓存本身有成本：
- 首次计算 + 存储仍要耗时，只是摊薄到后续调用
- 内存占用随缓存项增长，尤其参数离散度高时易失控
- 缓存命中率低（
上线前建议用 Chrome DevTools 的 Performance 面板 对比缓存前后：看主线程执行时间是否下降、堆内存增长是否平缓、长任务是否减少。
