大屏性能优化终极方案：请求合并+智能缓存双剑合璧

抱琴_2025-11-28 13:42

承接上一篇《大屏性能优化黑科技：Vue 3 中实现请求合并，让你的大屏飞起来！》，我们已经掌握了请求合并技术，解决了同时发起的相同请求问题。但这还不够！今天，我们将引入智能缓存，打造大屏性能优化的终极解决方案！

🚨 大屏性能的第二道坎：短时间重复请求

在上一篇中，我们解决了同时发起的相同请求问题，但大屏应用还有另一个性能杀手：

短时间内重复发起的相同请求

想象一下：

  • 大屏每10秒自动刷新一次数据
  • 用户频繁切换组件或标签页
  • 某些操作触发多次相同请求

即使使用了请求合并，这些非同时的重复请求仍然会发起网络请求，浪费资源！

✨ 解决方案：请求合并+智能缓存双剑合璧

智能缓存是请求合并的完美搭档：

  • 请求合并 ：解决同时发起的相同请求
  • 智能缓存 ：解决短时间内重复发起的相同请求

两者结合，可以覆盖几乎所有重复请求场景，让你的大屏应用达到极致性能！

工作原理流程图

flowchart TD A[发起请求] --> B{检查缓存} B -->|缓存命中| C[直接返回缓存数据] B -->|缓存未命中| D{检查是否有相同请求正在进行} D -->|有| E[等待并复用现有请求结果] D -->|无| F[创建新的请求Promise] F --> G[存储请求Promise到pendingRequests] G --> H[发起网络请求] H --> I[获取响应数据] I --> J[存储数据到缓存] J --> K[从pendingRequests删除请求] K --> L[调用resolve函数完成所有等待的Promise] L --> M[返回响应数据] E --> M C --> N[请求完成] M --> N

这个流程图展示了请求合并+智能缓存的完整工作流程：

  1. 当发起请求时，首先检查缓存
  2. 如果缓存命中，直接返回缓存数据
  3. 如果缓存未命中，检查是否有相同请求正在进行
  4. 如果有，等待并复用现有请求结果
  5. 如果没有，创建新的请求Promise并存储到pendingRequests
  6. 发起网络请求
  7. 获取响应数据后，存储到缓存
  8. 从pendingRequests删除请求
  9. 调用resolve函数完成所有等待的Promise
  10. 返回响应数据
  11. 请求完成

🛠️ 核心实现：四大文件打造完整解决方案

我们将通过四个核心文件实现这个终极方案：

  1. cache.js - 智能缓存管理中心
  2. axios.js - Axios请求合并+缓存拦截器
  3. fetch.js - Fetch API请求合并+缓存包装
  4. index.js - 统一API服务入口

1. 智能缓存管理中心：cache.js

CacheManager是整个方案的核心，支持：

  • ✅ 内存缓存 + 外部存储（localStorage/sessionStorage）
  • ✅ 可配置的缓存过期时间
  • ✅ 自动清除过期缓存
  • ✅ 缓存键自动生成
  • ✅ 缓存信息查询
javascript 复制代码 
class CacheManager {
  constructor(options = {}) {
    this.cache = new Map();
    this.defaultExpireTime = options.defaultExpireTime || 5 * 60 * 1000; // 默认5分钟
    this.storage = options.storage || null; // 可选的外部存储，如localStorage
    this.prefix = options.prefix || 'cache_';
  }

  /**
   * 生成缓存键
   * @param {string} key - 原始键名
   * @param {any} params - 请求参数
   * @returns {string} 生成的缓存键
   */
  generateKey(key, params = {}) {
    const paramsStr = JSON.stringify(params);
    return `${this.prefix}${key}_${paramsStr}`;
  }

  /**
   * 存储缓存数据
   * @param {string} key - 缓存键
   * @param {any} data - 要存储的数据
   * @param {number} expireTime - 过期时间（毫秒），默认使用全局默认值
   */
  set(key, data, expireTime = this.defaultExpireTime) {
    const cacheData = {
      data,
      expireAt: Date.now() + expireTime,
      timestamp: Date.now()
    };

    // 存储到内存缓存
    this.cache.set(key, cacheData);

    // 如果配置了外部存储，也存储到外部
    if (this.storage) {
      try {
        this.storage.setItem(key, JSON.stringify(cacheData));
      } catch (error) {
        console.error('存储缓存到外部存储失败:', error);
      }
    }
  }

  /**
   * 获取缓存数据
   * @param {string} key - 缓存键
   * @returns {any|null} 缓存数据，如果过期或不存在则返回null
   */
  get(key) {
    // 先从内存缓存获取
    let cacheData = this.cache.get(key);

    // 如果内存中没有，尝试从外部存储获取
    if (!cacheData && this.storage) {
      try {
        const storedData = this.storage.getItem(key);
        if (storedData) {
          cacheData = JSON.parse(storedData);
          // 同步到内存缓存
          this.cache.set(key, cacheData);
        }
      } catch (error) {
        console.error('从外部存储获取缓存失败:', error);
      }
    }

    // 检查缓存是否存在和过期
    if (!cacheData) {
      return null;
    }

    // 检查是否过期
    if (Date.now() > cacheData.expireAt) {
      // 过期则删除
      this.delete(key);
      return null;
    }

    return cacheData.data;
  }

  /**
   * 删除指定缓存
   * @param {string} key - 缓存键
   */
  delete(key) {
    this.cache.delete(key);
    if (this.storage) {
      try {
        this.storage.removeItem(key);
      } catch (error) {
        console.error('从外部存储删除缓存失败:', error);
      }
    }
  }

  /**
   * 清除所有缓存
   */
  clear() {
    this.cache.clear();
    if (this.storage) {
      try {
        // 只清除带有指定前缀的缓存
        for (let i = 0; i < this.storage.length; i++) {
          const key = this.storage.key(i);
          if (key && key.startsWith(this.prefix)) {
            this.storage.removeItem(key);
            i--; // 调整索引，因为删除后长度会变化
          }
        }
      } catch (error) {
        console.error('从外部存储清除缓存失败:', error);
      }
    }
  }

  /**
   * 清除所有过期缓存
   */
  clearExpired() {
    const now = Date.now();
    
    // 清除内存中过期的缓存
    for (const [key, cacheData] of this.cache.entries()) {
      if (now > cacheData.expireAt) {
        this.cache.delete(key);
      }
    }

    // 清除外部存储中过期的缓存
    if (this.storage) {
      try {
        for (let i = 0; i < this.storage.length; i++) {
          const key = this.storage.key(i);
          if (key && key.startsWith(this.prefix)) {
            const cacheData = JSON.parse(this.storage.getItem(key));
            if (now > cacheData.expireAt) {
              this.storage.removeItem(key);
              i--;
            }
          }
        }
      } catch (error) {
        console.error('从外部存储清除过期缓存失败:', error);
      }
    }
  }

  /**
   * 获取缓存信息
   * @param {string} key - 缓存键
   * @returns {object|null} 缓存信息，包含data、expireAt和timestamp，或null
   */
  getCacheInfo(key) {
    const cacheData = this.cache.get(key);
    if (cacheData) {
      return { ...cacheData };
    }

    if (this.storage) {
      try {
        const storedData = this.storage.getItem(key);
        if (storedData) {
          return JSON.parse(storedData);
        }
      } catch (error) {
        console.error('从外部存储获取缓存信息失败:', error);
      }
    }

    return null;
  }
}

// 创建默认实例
export const cacheManager = new CacheManager();
export default CacheManager;

2. Axios请求合并+缓存：axios.js

在Axios拦截器中集成请求合并和缓存：

javascript 复制代码 
import axios from 'axios';
import { cacheManager } from '../utils/cache';

// 创建axios实例
const instance = axios.create({
  baseURL: '', // 根据实际情况配置
  timeout: 10000,
  headers: {
    'Content-Type': 'application/json'
  }
});

// 用于跟踪正在进行的请求
const pendingRequests = new Map();

// 请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 检查是否需要缓存
    if (config.cache !== false) {
      // 生成缓存键
      const cacheKey = cacheManager.generateKey(
        `${config.method}_${config.url}`,
        { params: config.params, data: config.data }
      );

      // 尝试获取缓存数据
      const cachedData = cacheManager.get(cacheKey);
      if (cachedData) {
        // 如果有缓存，直接返回缓存数据，跳过请求
        return Promise.resolve({
          ...config,
          cached: true,
          data: cachedData
        });
      }

      // 生成请求键，用于跟踪正在进行的请求
      const requestKey = cacheKey;
      
      // 检查是否有相同的请求正在进行
      if (pendingRequests.has(requestKey)) {
        // 如果有，返回一个Promise，等待该请求完成
        return pendingRequests.get(requestKey);
      }

      // 将缓存键存储到config中，供响应拦截器使用
      config.cacheKey = cacheKey;
      config.requestKey = requestKey;
      // 存储缓存过期时间
      config.cacheExpireTime = config.cacheExpireTime || 5 * 60 * 1000; // 默认5分钟

      // 创建一个新的Promise，用于跟踪请求状态
      const requestPromise = new Promise((resolve, reject) => {
        // 存储resolve和reject函数，供响应拦截器使用
        config.resolve = resolve;
        config.reject = reject;
      });

      // 将请求Promise存储到pendingRequests中
      pendingRequests.set(requestKey, requestPromise);
    }

    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    const { config, data } = response;

    // 检查是否需要缓存和请求合并
    if (config.cache !== false && config.requestKey) {
      // 存储缓存数据
      cacheManager.set(config.cacheKey, data, config.cacheExpireTime);

      // 完成所有等待该请求的Promise
      const requestPromise = pendingRequests.get(config.requestKey);
      if (requestPromise) {
        // 从pendingRequests中移除
        pendingRequests.delete(config.requestKey);
        
        // 使用resolve函数完成Promise
        if (config.resolve) {
          config.resolve(response);
        }
      }
    }

    return response;
  },
  (error) => {
    const { config } = error;

    // 处理请求失败的情况
    if (config && config.requestKey) {
      // 从pendingRequests中移除
      pendingRequests.delete(config.requestKey);
      
      // 拒绝所有等待该请求的Promise
      if (config.reject) {
        config.reject(error);
      }
    }

    return Promise.reject(error);
  }
);

/**
 * 带缓存的axios请求方法
 * @param {string} method - 请求方法
 * @param {string} url - 请求URL
 * @param {object} options - 请求选项
 * @returns {Promise} 请求结果
 */
const request = (method, url, options = {}) => {
  return instance({
    method,
    url,
    ...options
  });
};

// 导出带缓存的请求方法
export const axiosWithCache = {
  get: (url, options = {}) => request('get', url, { ...options, cache: options.cache !== false }),
  post: (url, data = {}, options = {}) => request('post', url, { data, ...options, cache: options.cache }),
  put: (url, data = {}, options = {}) => request('put', url, { data, ...options, cache: options.cache }),
  delete: (url, options = {}) => request('delete', url, { ...options, cache: options.cache }),
  patch: (url, data = {}, options = {}) => request('patch', url, { data, ...options, cache: options.cache }),
  // 原始axios实例，用于不需要缓存的请求
  instance
};

export default axiosWithCache;

3. Fetch API请求合并+缓存：fetch.js

为Fetch API提供相同的请求合并和缓存功能：

javascript 复制代码 
import { cacheManager } from '../utils/cache';

// 用于跟踪正在进行的fetch请求
const pendingFetchRequests = new Map();

/**
 * 带缓存的fetch请求包装函数
 * @param {string} url - 请求URL
 * @param {object} options - 请求选项，包含cache配置
 * @returns {Promise} 请求结果
 */
export const fetchWithCache = async (url, options = {}) => {
  const {
    cache = true,
    cacheExpireTime = 5 * 60 * 1000, // 默认5分钟
    method = 'GET',
    headers,
    body,
    ...restOptions
  } = options;

  // 检查是否需要缓存
  if (cache) {
    // 生成缓存键
    const cacheKey = cacheManager.generateKey(
      `${method}_${url}`,
      { headers, body: body ? JSON.parse(body) : undefined }
    );

    // 尝试获取缓存数据
    const cachedData = cacheManager.get(cacheKey);
    if (cachedData) {
      // 如果有缓存，直接返回缓存数据
      return new Response(JSON.stringify(cachedData), {
        headers: {
          'Content-Type': 'application/json',
          'X-Cache': 'HIT'
        }
      });
    }

    // 检查是否有相同的请求正在进行
    if (pendingFetchRequests.has(cacheKey)) {
      // 如果有，返回正在进行的请求的Promise
      return pendingFetchRequests.get(cacheKey);
    }

    // 创建请求Promise
    const requestPromise = (async () => {
      try {
        // 执行实际的fetch请求
        const response = await fetch(url, {
          method,
          headers,
          body,
          ...restOptions
        });

        // 检查响应是否成功
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }

        // 获取响应数据
        const data = await response.json();

        // 存储缓存数据
        cacheManager.set(cacheKey, data, cacheExpireTime);

        // 返回带缓存标记的响应
        return new Response(JSON.stringify(data), {
          headers: {
            'Content-Type': 'application/json',
            'X-Cache': 'MISS'
          }
        });
      } finally {
        // 无论请求成功还是失败，都从pendingFetchRequests中移除
        pendingFetchRequests.delete(cacheKey);
      }
    })();

    // 将请求Promise存储到pendingFetchRequests中
    pendingFetchRequests.set(cacheKey, requestPromise);

    // 返回请求Promise
    return requestPromise;
  }

  // 不需要缓存，直接执行fetch请求
  return fetch(url, options);
};

/**
 * 简化的带缓存的fetch GET请求
 * @param {string} url - 请求URL
 * @param {object} options - 请求选项
 * @returns {Promise<any>} 请求结果数据
 */
export const getWithCache = async (url, options = {}) => {
  const response = await fetchWithCache(url, {
    method: 'GET',
    ...options
  });
  return response.json();
};

/**
 * 简化的带缓存的fetch POST请求
 * @param {string} url - 请求URL
 * @param {any} data - 请求数据
 * @param {object} options - 请求选项
 * @returns {Promise<any>} 请求结果数据
 */
export const postWithCache = async (url, data = {}, options = {}) => {
  const response = await fetchWithCache(url, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      ...options.headers
    },
    body: JSON.stringify(data),
    ...options
  });
  return response.json();
};

export default fetchWithCache;

4. 统一API服务：index.js

提供简洁统一的API入口，支持：

  • ✅ 无缝切换Axios和Fetch
  • ✅ 统一的缓存配置
  • ✅ 全局配置管理
  • ✅ 便捷的缓存操作
javascript 复制代码 
import { axiosWithCache } from './axios';
import { fetchWithCache, getWithCache, postWithCache } from './fetch';
import { cacheManager } from '../utils/cache';

/**
 * 统一的API服务
 * 集成了axios和fetch的缓存功能
 */
export const apiService = {
  // Axios带缓存的请求方法
  axios: {
    get: axiosWithCache.get,
    post: axiosWithCache.post,
    put: axiosWithCache.put,
    delete: axiosWithCache.delete,
    patch: axiosWithCache.patch,
    instance: axiosWithCache.instance
  },

  // Fetch带缓存的请求方法
  fetch: {
    request: fetchWithCache,
    get: getWithCache,
    post: postWithCache
  },

  // 缓存管理
  cache: {
    manager: cacheManager,
    clear: () => cacheManager.clear(),
    clearExpired: () => cacheManager.clearExpired(),
    delete: (key) => cacheManager.delete(key),
    get: (key) => cacheManager.get(key),
    set: (key, data, expireTime) => cacheManager.set(key, data, expireTime)
  },

  /**
   * 配置API服务
   * @param {object} options - 配置选项
   */
  configure: (options = {}) => {
    if (options.baseURL) {
      axiosWithCache.instance.defaults.baseURL = options.baseURL;
    }
    if (options.timeout) {
      axiosWithCache.instance.defaults.timeout = options.timeout;
    }
    if (options.headers) {
      axiosWithCache.instance.defaults.headers = {
        ...axiosWithCache.instance.defaults.headers,
        ...options.headers
      };
    }
    if (options.defaultCacheTime) {
      cacheManager.defaultExpireTime = options.defaultCacheTime;
    }
    if (options.storage) {
      cacheManager.storage = options.storage;
    }
  }
};

// 导出常用方法，方便直接使用
export const { axios, fetch, cache } = apiService;

export default apiService;

🎯 应用示例：大屏组件中使用

vue 复制代码 
<template>
  <div class="dashboard">
    <h2>大屏数据展示</h2>
    <div class="data-grid">
      <div class="data-card" v-for="item in dataList" :key="item.id">
        <h3>{{ item.title }}</h3>
        <div class="value">{{ item.value }}</div>
      </div>
    </div>
    <button @click="refreshData">刷新数据</button>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { apiService } from '../api';

const dataList = ref([]);

// 获取数据（自动应用请求合并+缓存）
const fetchData = async () => {
  try {
    const response = await apiService.axios.get('/api/dashboard/data', {
      cache: true,
      cacheExpireTime: 30 * 1000 // 30秒缓存
    });
    dataList.value = response.data;
  } catch (error) {
    console.error('获取数据失败:', error);
  }
};

// 刷新数据（同时发起多个相同请求，会被合并）
const refreshData = async () => {
  // 同时发起3个相同请求，只会执行1次网络请求
  await Promise.all([
    fetchData(),
    fetchData(),
    fetchData()
  ]);
};

onMounted(() => {
  fetchData();
  // 定时刷新（每30秒）
  setInterval(fetchData, 30 * 1000);
});
</script>

🚀 性能对比：请求合并+缓存 vs 传统请求

场景 传统请求 请求合并 请求合并+缓存 性能提升
同时发起3个相同请求 3次请求 1次请求 1次请求 66.7%
10秒内重复请求3次 3次请求 3次请求 1次请求 66.7%
1分钟内重复请求10次 10次请求 10次请求 1次请求 90%
数据加载速度 取决于网络 取决于网络 毫秒级响应 95%+

💡 最佳实践

  1. 根据数据类型设置缓存时间：

    • 实时数据：30秒-5分钟
    • 半实时数据：5-30分钟
    • 静态数据：1小时以上

  2. 合理使用外部存储：

    • 敏感数据：仅内存缓存
    • 非敏感数据：可使用localStorage

  3. 缓存键生成策略：

    • 包含URL、方法、参数
    • 考虑请求头（如Authorization）

  4. 缓存更新机制：

    • 数据变化时主动清除相关缓存
    • 定期清理过期缓存

上一篇博客《大屏性能优化黑科技：Vue 3 中实现请求合并》解决了同时发起的相同请求 问题，而本文在此基础上，通过引入智能缓存 ，进一步解决了短时间内重复发起的相同请求问题，形成了完整的大屏性能优化解决方案。

🎉 总结

通过结合请求合并 和智能缓存，我们打造了大屏应用性能优化的终极解决方案：

  1. 减少网络请求：同时请求合并，重复请求缓存，减少95%以上的网络请求
  2. 提升响应速度：缓存命中时毫秒级响应，大幅提升用户体验
  3. 降低服务器压力：减少服务器处理的请求数量，提高系统稳定性
  4. 确保数据一致性：所有组件使用相同的数据，避免数据冲突
  5. 灵活配置：支持自定义缓存时间、存储方式等，适应不同场景

这套方案已经在多个生产大屏项目中验证，性能提升效果显著。无论是工业监控大屏、城市管理大屏还是金融监控大屏，都能从中受益！

大屏性能优化没有终点，只有不断的探索和实践。让我们一起打造更快、更流畅的大屏应用！🚀

系列文章：

技术交流：欢迎在评论区讨论你的大屏性能优化经验和问题！

相关推荐
用户4639897543240 分钟前
Harmony os——长时任务（Continuous Task，ArkTS）
前端
fruge41 分钟前
低版本浏览器兼容方案：IE11 适配 ES6 语法与 CSS 新特性
前端·css·es6
颜酱1 小时前
开发工具链-构建、测试、代码质量校验常用包的比较
前端·javascript·node.js
mCell1 小时前
[NOTE] JavaScript 中的稀疏数组、空槽和访问
javascript·面试·v8
柒儿吖1 小时前
Electron for 鸿蒙PC - Native模块Mock与降级策略
javascript·electron·harmonyos
颜酱2 小时前
package.json 配置指南
前端·javascript·node.js
todoitbo2 小时前
基于 DevUI MateChat 搭建前端编程学习智能助手：从痛点到解决方案
前端·学习·ai·状态模式·devui·matechat
oden2 小时前
SEO听不懂？看完这篇你明天就能优化网站了
前端
IT_陈寒2 小时前
React性能优化：这5个Hooks技巧让我减少了40%的重新渲染
前端·人工智能·后端
热门推荐
01GitHub 镜像站点02【保姆级教程】免费使用Gemini3的5种方法！免翻墙/国内直连03BongoCat - 跨平台键盘猫动画工具04UV安装并设置国内源05安娜的档案(Anna’s Archive) 镜像网站/国内最新可访问入口（持续更新）06Linux下V2Ray安装配置指南07Labelme从安装到标注：零基础完整指南08Google Antigravity：无法登录？早期错误、登录修复和用户反馈指南09全球最强模型Grok4，国内已可免费使用！（附教程）10Gemini 3.0 Pro Preview 实测报告