前端开发中性能优化之较少http请求(缓存策略)

news/2024/4/24 20:08:22/

1.实现减少http请求逻辑如下

定义了一个fetchData函数,用于发起HTTP请求并返回响应结果。函数的实现逻辑如下:
将请求参数对象params转换为字符串,作为缓存对象的键cacheKey
如果缓存对象中已经有该请求参数对应的结果,直接返回缓存中的结果,不需要再次发起HTTP请求。
如果缓存对象中没有该请求参数对应的结果,使用axios.post方法发起HTTP请求,并在请求完成后将响应结果中的数据保存到缓存对象中,以请求参数为键。
返回获取到的数据,作为fetchData函数的返回值。
在这个实现中,使用一个简单的缓存策略,避免了在请求相同参数时重复发起HTTP请求,从而提高了性能

// 引入axios库
import axios from 'axios';// 创建一个空的缓存对象,用于保存请求结果
let cache = {};// 创建一个函数,用于发起HTTP请求并返回响应结果
function fetchData(params) {// 将请求参数对象转换为字符串,作为缓存对象的键const cacheKey = JSON.stringify(params);// 如果缓存中已经有该请求参数对应的结果,直接返回缓存中的结果if (cache[cacheKey]) {return Promise.resolve(cache[cacheKey]);}// 如果缓存中没有该请求参数对应的结果,发起HTTP请求获取数据return axios.post('http://example.com/api', params).then(response => {// 从响应结果中获取数据const data = response.data;// 将获取到的数据保存到缓存对象中,以请求参数为键cache[cacheKey] = data;// 返回获取到的数据return data;});
}

2.设置最大缓存数和缓存过期时间

通过上面的方法我们可以把现有请求到的数据存到缓存中去,但是这种方法,当数据量很大或者时间长了可能会导致页面性能问题,所以之后我们可以考虑设置最大缓存数,和缓存过期时间

// 创建一个空的缓存对象
let cache = {};// 设置最大缓存数为1000个
const maxCacheSize = 1000;// 设置缓存的过期时间为60秒,单位为毫秒
const cacheTTL = 60 * 1000;/*** 发送HTTP请求并缓存结果* @param {Object} params 请求参数* @returns {Promise} Promise对象,用于异步获取HTTP请求结果*/
function fetchData(params) {// 生成请求参数的字符串形式作为缓存键const cacheKey = JSON.stringify(params);// 查找缓存对象中是否有该键对应的缓存数据const cachedData = cache[cacheKey];// 如果有对应的缓存数据并且未过期,则返回缓存数据if (cachedData && Date.now() - cachedData.timestamp < cacheTTL) {return Promise.resolve(cachedData.data);}// 如果没有对应的缓存数据或者缓存数据已过期,则发起HTTP请求return axios.post('http://example.com/api', params).then(response => {const data = response.data;// 将新的请求结果缓存起来,记录当前时间作为缓存数据的时间戳cache[cacheKey] = {data,timestamp: Date.now()};// 判断缓存数量是否超过最大限制,若超过则删除最早未使用的缓存数据const cacheKeys = Object.keys(cache);if (cacheKeys.length > maxCacheSize) {const oldestCacheKey = cacheKeys.reduce((a, b) => cache[a].timestamp < cache[b].timestamp ? a : b);delete cache[oldestCacheKey];}return data;}).catch(error => {return Promise.reject(error);});
}

在这段代码中,我们首先定义了一个全局变量cache来存储缓存数据,同时设定了缓存的最大数量过期时间。在fetchData函数中,我们先通过JSON.stringify方法将请求参数转换为一个字符串,作为缓存数据的键(即cacheKey)。然后,我们检查该键对应的缓存数据是否存在,以及是否过期。如果存在且未过期,我们直接返回缓存数据;否则,我们发送HTTP请求并将结果存入缓存中,同时记录该缓存数据的创建时间戳。在存储缓存数据时,我们还会检查缓存数量是否超过最大限制,若超过则删除最早未使用的缓存数据。最后,我们通过Promise.resolvePromise.reject方法分别返回异步请求结果或错误信息。

总的来说,这段代码实现了类似于node-cache的缓存管理功能,通过限制缓存数量和过期时间来提高性能并避免内存溢出问题。同时,我们还可以根据具体需求来调整缓存数量和过期时间的参数,以实现更好的缓存效果。

3.通过node-cache库实现上述逻辑

使用node-cache可以通过其提供的API来管理缓存数据,具体包括添加缓存、获取缓存、删除缓存等操作。
在使用node-cache进行缓存时,可以设置缓存的过期时间和最大缓存数,从而防止缓存数据过多导致影响性能。具体实现方式如下:

const NodeCache = require('node-cache');
const cache = new NodeCache({stdTTL: 60, // 设置缓存的默认过期时间为60秒maxKeys: 1000 // 设置缓存的最大数量为1000个
});function fetchData(params) {const cacheKey = JSON.stringify(params);const cachedData = cache.get(cacheKey);if (cachedData) {return Promise.resolve(cachedData);}return axios.post('http://example.com/api', params).then(response => {const data = response.data;cache.set(cacheKey, data); // 将数据添加到缓存中return data;}).catch(error => {return Promise.reject(error);});
}

在上述代码中,我们使用node-cache库创建了一个缓存对象,并设置了默认的过期时间最大缓存数。在每次请求数据时,我们先从缓存中获取数据,如果存在则直接返回缓存数据;否则发起请求获取数据,并将获取到的数据添加到缓存中。
当缓存数据达到最大数量限制时,node-cache会自动根据缓存的LRU(Least Recently Used)策略删除最早未使用的缓存数据,从而避免缓存数据过多导致性能问题。此外,我们也可以通过手动删除缓存来管理缓存数据,例如使用cache.del(cacheKey)方法删除指定键值的缓存数据。


http://www.ppmy.cn/news/47632.html

相关文章

实在智能获评十大数字经济风云企业,2022余杭数字经济“群英榜”发布

4月17日&#xff0c;经专家评审、公开投票&#xff0c;由中共杭州市余杭区委组织部&#xff08;区委两新工委&#xff09;、中共杭州市余杭区经济和信息化局委员会主办评选的2022年度余杭区数字经济“群英榜”正式公示。其中&#xff0c;实在智能成功获评十大数字经济风云企业之…

Linux 操作系统中应该掌握的知识

下面是我从业整理的一部分需要掌握的内容&#xff1a; 1. 基本命令行操作 基本命令行操作&#xff1a;包括文件管理、进程管理、用户权限等方面的基本命令行操作。 下面是文件管理、进程管理和用户权限相关的一些命令和内容&#xff1a; 1.1 文件管理 ls&#xff1a;显示当…

嵌入式Linux(5):物理地址到虚拟地址映射

文章目录 理论知识1、使能了MMU以后有什么好处呢&#xff1f;2、MMU非常复杂&#xff0c;那么我们如何完成物理地址到虚拟地址的转换呢&#xff1f;3、如何查看哪些物理地址被映射过了呢&#xff1f;实例(RK3568) 理论知识 在Linux上面如果想要操作硬件&#xff0c;需要先把物…

python基础复习

文章目录 **string**boolList元组set字典bytes类型f-string条件控制语句ifMatch...case python推导式列表推导式字典推导式元组推导式 迭代器传递参数面向对象类默认函数不定长函数 Lambda 时隔一年捡起来&#xff0c;通过Python3 基本数据类型 | 菜鸟教程 (runoob.com)速刷 st…

酷雷曼一站式图片直播,助力品牌高效传播

传统模式下&#xff0c;摄影师拍摄会议、活动现场的照片后&#xff0c;一般需要7-10天时间才能完成成片交付&#xff0c;而实际上&#xff0c;由于新闻宣传的即时性&#xff0c;照片延迟交付&#xff0c;远远不能满足客户的需求。因此&#xff0c;即时图片直播技术应运而生&…

ROS学习第十节——参数服务器

前言&#xff1a;本小节主要是对于参数服务器参数的修改&#xff0c;需要掌握操作参数的函数使用 1.基本介绍 参数服务器实现是最为简单的&#xff0c;该模型如下图所示,该模型中涉及到三个角色: ROS Master (管理者)Talker (参数设置者)Listener (参数调用者) ROS Master …

Linux编译器 gcc与g++

Linux编译器 gcc/g工具 目录 Linux编译器 gcc/g工具1、程序的诞生2、gcc工具2.1 预处理2.2 编译2.3 汇编2.4 链接2.5 运行2.6 总结 3、静态链接与动态链接3.1 静态链接3.2 动态链接3.3 Linux下库的命名 1、程序的诞生 程序的编译过程&#xff1a; 1、预处理&#xff08;头文件包…

嵌入式学习笔记——SPI通信的应用

SPI通信的应用 前言屏幕分类1.3OLED概述驱动芯片框图原理图通信时序显示的方式页地址、列地址初始化指令 程序设计初始化代码初始化写数据与写命令清屏函数 初始化代码字符显示函数 总结 前言 上一篇中介绍了STM32的SPI通信&#xff0c;并根据框图和寄存器进行了SPI通信的初始…

Microsoft Power Pages部署方案

目录 前言 一、环境准备 二、创建Power Pages应用程序 三、部署Power Pages应用程序

【靶场设计和渗透】

目录 一、前言 二、靶场设计 1、局域网 2、说明 三、渗透测试 1、信息收集 2、漏洞利用 四、后渗透利用 1、提权 2、权限维持 一、前言 为了深入贯彻学习网络安全法律法规&#xff0c;深入学习渗透测试知识&#xff0c;强化实战技能............ 编不出来了&#xff…

【Linux】man什么都搜不了,No manual entry for xxx的解决方案

本文首发于 慕雪的寒舍 man什么都搜不了&#xff0c;No manual entry for xxx的解决方案 系统 CentOS 7.6 1.问题描述 今天查手册的时候&#xff0c;发现man什么都查不了。不管是系统接口还是函数&#xff0c;都显示没有入口文档&#xff08;No manual entry for&#xff09;…

HttpServletResponse注意事项和细节和原理示意图

目录 HttpServletResponse HttpServletResponse 介绍 HttpServletResponse 类图 向客户端返回数据方法 处理中文乱码问题-方案 处理中文乱码问题-方案 2 请求重定向 请求重定向原理示意图 应用实例 DownServlet Java类 DownServletNew.java xml配置 请求重定向注意…

被裁员了,要求公司足额补缴全部公积金,一次补了二十多万!网友兴奋了,该怎么操作?...

被裁员后&#xff0c;能要求公司补缴公积金吗&#xff1f; 一位网友问&#xff1a; 被裁员了&#xff0c;要求公司把历史公积金全部足额缴纳&#xff0c;现在月薪2.3万&#xff0c;但公司每个月只给自己缴纳300元公积金&#xff0c;结果一次补了二十多万&#xff0c;一次性取出…

MySQL索引的底层结构

mysql索引的底层结构 MySQL中的索引索引的底层数据结构索引的类型普通索引主键索引唯一索引全文索引如何选择索引从表面的基本特性考虑性能和底层来分析 覆盖索引的定义回表操作 最左匹配原则 MySQL中的索引 本质是一种‘排好序的数据结构’&#xff0c;可以帮助快速查找数据。…

java基础——常用API,自定义泛型、collection接口

常用API、正则表达式&#xff0c;泛型、Collection集合API 第一章 DateFormat类 java.text.DateFormat 是日期/时间格式化子类的抽象类&#xff0c;我们通过这个类可以帮我们完成日期和文本之间的转换,也就是可以在Date对象与String对象之间进行来回转换。 格式化&#xff1…

配置FTP/TFTP协议的ASPF

在多通道协议和NAT的应用中&#xff0c;ASPF是重要的辅助功能。通过配置ASPF功能&#xff0c;实现内网正常对外提供FTP和TFTP服务&#xff0c;同时还可避免内网用户在访问外网Web服务器时下载危险控件。 组网需求 如图1所示&#xff0c;FW部署在某公司的出口&#xff0c;公司提…

C++中的引用

上一次&#xff0c;我们只是浅浅的提了一下引用‘&’&#xff0c;那么今天&#xff0c;我们就正式减少一下引用&#xff0c;以及引用是什么&#xff0c;还有就是引用和指针的区别&#xff0c;引用的特点 首先&#xff0c;我们回顾一下什么是引用&#xff0c;引用就是取别名…

spark第八章:Pyspark

系列文章目录 spark第一章&#xff1a;环境安装 spark第二章&#xff1a;sparkcore实例 spark第三章&#xff1a;工程化代码 spark第四章&#xff1a;SparkSQL基本操作 spark第五章&#xff1a;SparkSQL实例 spark第六章&#xff1a;SparkStreaming基本操作 spark第七章&#…

ntpdate命令执行 the NTP socket is in use, exiting

描述&#xff1a; 在做paas平台的巡检的时发现了宿主机上的时间同步有异常&#xff0c;提示与master节点的心跳检测相差7分钟&#xff0c;并且是遇见了好几台服务器&#xff0c;根据系统的要求&#xff0c;需要将集群下所有宿主机的时间保持在一个时间点&#xff0c;根据运维习…

ARM学习

计算机硬件基础* 文章目录 知识体系嵌入式系统分层应用开发和底层开发Linux内核五大功能ARM体系结构和接口技术底层知识的学习方法计算机基础知识 计算机的进制计算机的组成总线三级存储结构地址空间CPU原理概述 简述为什么地址总线为32bit的处理器的地址空间为4G简述CPU执行…