javascript_如何实现缓存机制-js教程-PHP中文网

javascript_如何实现缓存机制

紅蓮之龍

发布： 2025-12-05 19:41:02

原创

170人浏览过

使用缓存可提升JavaScript性能，避免重复计算或请求。1. 用Map或对象实现基础缓存，如斐波那契数列记忆化；2. 封装memoize函数，自动缓存可序列化参数的调用结果；3. 浏览器中可用localStorage持久化缓存，WeakMap避免内存泄漏，Service Worker结合Cache API缓存网络请求；4. 添加TTL机制控制缓存有效期，防止无限增长。根据场景选择合适策略，平衡性能与资源消耗。

javascript_如何实现缓存机制

在 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）

可以封装一个高阶函数，自动为任意函数添加缓存能力：

android rtsp流媒体播放介绍中文WORD版

本文档主要讲述的是android rtsp流媒体播放介绍；实时流协议（RTSP）是应用级协议，控制实时数据的发送。RTSP提供了一个可扩展框架，使实时数据，如音频与视频，的受控、点播成为可能。数据源包括现场数据与存储在剪辑中数据。该协议目的在于控制多个数据发送连接，为选择发送通道，如UDP、组播UDP与TCP，提供途径，并为选择基于RTP上发送机制提供方法。希望本文档会给有需要的朋友带来帮助；感兴趣的朋友可以过来看看

查看详情

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;

登录后复制

}; }

上面的代码会在指定毫秒后重新计算结果。

基本上就这些。根据使用场景选择合适的缓存方式，既能提升性能，又不会造成内存浪费。

以上就是javascript_如何实现缓存机制的详细内容，更多请关注php中文网其它相关文章！