使用缓存可提升JavaScript性能，避免重复计算或请求。1. 用Map或对象实现基础缓存，如斐波那契数列记忆化；2. 封装memoize函数，自动缓存可序列化参数的调用结果；3. 浏览器中可用localStorage持久化缓存，WeakMap避免内存泄漏，Service Worker结合Cache API缓存网络请求；4. 添加TTL机制控制缓存有效期，防止无限增长。根据场景选择合适策略，平衡性能与资源消耗。
在 JavaScript 中实现缓存机制，主要是为了提升性能，避免重复执行耗时操作，比如重复计算、网络请求等。常见的做法是将已处理的结果存储起来，下次请求相同输入时直接返回缓存结果。
使用对象或 Map 实现基础缓存
最简单的缓存方式是用普通对象或 Map 来保存键值对。适合用于函数参数作为 key，返回值作为 value 的场景。
例如，实现一个带缓存的斐波那契函数：
const cache = new Map();
<p>function fibonacci(n) {
if (n <= 1) return n;</p><p>if (cache.has(n)) {
return cache.get(n);
}</p><p>const result = fibonacci(n - 1) + fibonacci(n - 2);
cache.set(n, result);
return result;
}</p>这样可以将时间复杂度从指数级降到线性级。
立即学习“Java免费学习笔记（深入）”；
实现通用记忆化函数（Memoization）
可以封装一个高阶函数，自动为任意函数添加缓存能力：
function memoize(fn) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args); // 简单序列化参数
if (cache.has(key)) {
return cache.get(key);
}
const result = fn.apply(this, args);
cache.set(key, result);
return result;
};
}
<p>// 使用示例
const expensiveCalc = memoize((a, b) => {
console.log('计算中...');
return a * b + Math.random();
});</p><p>expensiveCalc(2, 3); // 打印“计算中...”
expensiveCalc(2, 3); // 不打印，直接返回缓存</p>注意：参数需可序列化，否则 JSON.stringify 可能出错或产生错误 key。
浏览器环境中的缓存策略
在前端开发中，还可以结合浏览器特性实现更持久的缓存：
- localStorage / sessionStorage：适合长期缓存字符串数据，如用户配置、API 响应等。需手动处理过期和类型转换。
- WeakMap / WeakSet：适用于对象做 key 的缓存，不阻止垃圾回收，避免内存泄漏。
- Service Worker + Cache API：用于缓存网络请求，实现离线访问。
添加过期机制
为了避免缓存无限增长，可以加入过期时间：
function memoizeWithTTL(fn, ttl = 5000) {
const cache = new Map();
return function(...args) {
const key = JSON.stringify(args);
const record = cache.get(key);
const now = Date.now();
<pre class='brush:php;toolbar:false;'>if (record && now - record.timestamp < ttl) {
return record.value;
}
const result = fn.apply(this, args);
cache.set(key, { value: result, timestamp: now });
return result;}; }
上面的代码会在指定毫秒后重新计算结果。
基本上就这些。根据使用场景选择合适的缓存方式，既能提升性能，又不会造成内存浪费。
