后端返回前端的数据量过大解决方案

后端返回前端的数据量过大解决方案

性能面板(Performance) · chrome调试指南

原因

遇到一个页面有好几个表格,部分表格采用虚拟滚动条

数据量有点大

image-20241204151722229

接近快60s了,看一下是哪里导致的慢

image-20241204152547708

后台请求方法执行并不慢

2024-12-04 15:21:52.889  INFO 69948 --- [nio-8004-exec-7] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 4ms
2024-12-04 15:21:52.889  INFO 69948 --- [nio-8004-exec-5] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 4ms
2024-12-04 15:21:52.889  INFO 69948 --- [nio-8004-exec-8] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 4ms
2024-12-04 15:21:52.889  INFO 69948 --- [io-8004-exec-10] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 4ms
2024-12-04 15:21:58.276  INFO 69948 --- [nio-8004-exec-8] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  ( select * from SECURITY_EVENT_MONITOR_202411 union all  select * from SECURITY_EVENT_MONITOR_202412)  where 1=1  and alarmTime >= to_date('2024-11-30','yyyy-MM-dd') and alarmTime <= to_date('2024-12-03','yyyy-MM-dd')] time: 5392ms
2024-12-04 15:21:58.276  INFO 69948 --- [nio-8004-exec-5] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  ( select * from SECURITY_EVENT_MONITOR_202411 union all  select * from SECURITY_EVENT_MONITOR_202412)  where 1=1  and alarmTime >= to_date('2024-11-30','yyyy-MM-dd') and alarmTime <= to_date('2024-12-03','yyyy-MM-dd')] time: 5392ms
2024-12-04 15:21:58.283  INFO 69948 --- [nio-8004-exec-7] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  ( select * from SECURITY_EVENT_MONITOR_202411 union all  select * from SECURITY_EVENT_MONITOR_202412)  where 1=1  and alarmTime >= to_date('2024-11-30','yyyy-MM-dd') and alarmTime <= to_date('2024-12-03','yyyy-MM-dd')] time: 5398ms
2024-12-04 15:21:58.297  INFO 69948 --- [io-8004-exec-10] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  ( select * from SECURITY_EVENT_MONITOR_202411 union all  select * from SECURITY_EVENT_MONITOR_202412)  where 1=1  and alarmTime >= to_date('2024-11-30','yyyy-MM-dd') and alarmTime <= to_date('2024-12-03','yyyy-MM-dd')] time: 5412ms
2024-12-04 15:21:58.412  INFO 69948 --- [io-8004-exec-10] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5527ms
2024-12-04 15:21:58.414  INFO 69948 --- [nio-8004-exec-5] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5527ms
2024-12-04 15:21:58.481  INFO 69948 --- [nio-8004-exec-8] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5595ms
2024-12-04 15:21:58.482  INFO 69948 --- [nio-8004-exec-7] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5597ms
2024-12-04 15:21:58.485  INFO 69948 --- [nio-8004-exec-8] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid4 data cost time:2ms
2024-12-04 15:21:58.553  INFO 69948 --- [nio-8004-exec-7] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid1 data cost time:70ms
2024-12-04 15:21:58.562  INFO 69948 --- [nio-8004-exec-7] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:21:58.562  WARN 69948 --- [nio-8004-exec-7] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid1, cost = 5690 ms
2024-12-04 15:21:58.562  INFO 69948 --- [io-8004-exec-10] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid3 data cost time:149ms
2024-12-04 15:21:58.564  INFO 69948 --- [io-8004-exec-10] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:21:58.564  WARN 69948 --- [io-8004-exec-10] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid3, cost = 5692 ms
exec method : queryGrid3 time: 5709ms
exec method : queryGrid1 time: 5709ms
2024-12-04 15:21:58.571  INFO 69948 --- [nio-8004-exec-8] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:21:58.571  WARN 69948 --- [nio-8004-exec-8] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid4, cost = 5699 ms
exec method : queryGrid4 time: 5712ms
2024-12-04 15:21:59.711  INFO 69948 --- [nio-8004-exec-5] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid2 data cost time:1297ms
2024-12-04 15:21:59.713  INFO 69948 --- [nio-8004-exec-5] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:21:59.713  WARN 69948 --- [nio-8004-exec-5] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid2, cost = 6841 ms
exec method : queryGrid2 time: 6854ms

后台并行请求了4分方法,这个最慢接近60s,直接看一下这个为什么,找到占比最多的时间在执行什么方法

image-20241204153330823

image-20241204152727873

我靠,返回这么大,主要是解析后台加密的json数据过大导致

json会存储额外的结构,易读,但是数据量过大时性能不好

序列化使用json肯定说改不了了,只能想办法去节省传输的内容大小

后端使用GZIPOutputStream

package com.wisdom.framework.web.utils;import java.io.BufferedReader;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.InputStreamReader;
import java.util.Base64;
import java.util.zip.GZIPInputStream;
import java.util.zip.GZIPOutputStream;public class GzipUtils {/***** 字符串压缩* @param str* @return*/public static String compress(String str){try {if (str == null || str.length() == 0) {return str;}ByteArrayOutputStream obj=new ByteArrayOutputStream();GZIPOutputStream gzip = new GZIPOutputStream(obj);gzip.write(str.getBytes("UTF-8"));gzip.close();return Base64.getEncoder().encodeToString(obj.toByteArray());}catch (Exception ex){ex.printStackTrace();}return str;}/**** 字符串解压* @param str* @return*/public static String decompress(String str) {if (str == null || str.length() == 0) {return str;}try {byte[] compressed = Base64.getDecoder().decode(str);GZIPInputStream gis = new GZIPInputStream(new ByteArrayInputStream(compressed));StringBuilder outStr = new StringBuilder();BufferedReader br = new BufferedReader(new InputStreamReader(gis, "UTF-8"));String line;while ((line = br.readLine()) != null) {outStr.append(line);}gis.close();return outStr.toString();}catch (Exception ex){ex.printStackTrace();}return str;}}

使用

判断json字符串长度大于200,000,就把json压缩一下

String json = JsonUtils.serialize(wri, jsonConfig);
if(json.length() > 200000){json = GzipUtils.compress(json);
}
return json;

前端使用pako工具解压

https://github.com/nodeca/pako

放在lib目录下

image-20241204154149447

引入js

<script src="../../../scripts/lib/zip/pako.es5.min.js" type="text/javascript"></script>
//压缩字符if(typeof data == "string" && data.indexOf("H4sIAAAAA") == 0){let gzipArr = atob(data).split('');let gzipArr_add = [];for(let i = 0;i<gzipArr.length;i++){let ch_ = gzipArr[i];gzipArr_add.push(ch_.charCodeAt(0));};let gzipData = new Uint8Array(gzipArr_add);data = pako.inflate(gzipData, { to: 'string' });}

测试

传输内容大小缩小了很多,时间也将近减少了一半

image-20241204155204392

再看看后台方法的执行时间

2024-12-04 15:51:16.434  INFO 69948 --- [nio-8004-exec-2] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 0ms
2024-12-04 15:51:16.436  INFO 69948 --- [nio-8004-exec-1] s.d.e.i.SecurityEventMonitorDaoHibernate : build sql time: 0ms
2024-12-04 15:51:22.100  INFO 69948 --- [nio-8004-exec-3] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  SECURITY_EVENT_MONITOR_202412  where 1=1  and alarmTime >= to_date('2024-12-01','yyyy-MM-dd') and alarmTime <= to_date('2024-12-04','yyyy-MM-dd')] time: 5681ms
2024-12-04 15:51:22.110  INFO 69948 --- [nio-8004-exec-3] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5690ms
2024-12-04 15:51:22.117  INFO 69948 --- [nio-8004-exec-3] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid1 data cost time:6ms
2024-12-04 15:51:22.119  INFO 69948 --- [nio-8004-exec-3] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:51:22.119  WARN 69948 --- [nio-8004-exec-3] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid1, cost = 5703 ms
exec method : queryGrid1 time: 5707ms
2024-12-04 15:51:22.313  INFO 69948 --- [nio-8004-exec-7] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  SECURITY_EVENT_MONITOR_202412  where 1=1  and alarmTime >= to_date('2024-12-01','yyyy-MM-dd') and alarmTime <= to_date('2024-12-04','yyyy-MM-dd')] time: 5892ms
2024-12-04 15:51:22.334  INFO 69948 --- [nio-8004-exec-7] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 5914ms
2024-12-04 15:51:22.457  INFO 69948 --- [nio-8004-exec-1] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  SECURITY_EVENT_MONITOR_202412  where 1=1  and alarmTime >= to_date('2024-12-01','yyyy-MM-dd') and alarmTime <= to_date('2024-12-04','yyyy-MM-dd')] time: 6022ms
2024-12-04 15:51:22.457  INFO 69948 --- [nio-8004-exec-2] s.d.e.i.SecurityEventMonitorDaoHibernate : exec sql [select * from  SECURITY_EVENT_MONITOR_202412  where 1=1  and alarmTime >= to_date('2024-12-01','yyyy-MM-dd') and alarmTime <= to_date('2024-12-04','yyyy-MM-dd')] time: 6024ms
2024-12-04 15:51:22.497  INFO 69948 --- [nio-8004-exec-1] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 6061ms
2024-12-04 15:51:22.497  INFO 69948 --- [nio-8004-exec-2] s.d.e.i.SecurityEventMonitorDaoHibernate : transform data time: 6063ms
2024-12-04 15:51:22.498  INFO 69948 --- [nio-8004-exec-1] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid4 data cost time:2ms
2024-12-04 15:51:22.500  INFO 69948 --- [nio-8004-exec-1] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:51:22.500  WARN 69948 --- [nio-8004-exec-1] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid4, cost = 6067 ms
exec method : queryGrid4 time: 6069ms
2024-12-04 15:51:22.512  INFO 69948 --- [nio-8004-exec-2] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid3 data cost time:14ms
2024-12-04 15:51:22.514  INFO 69948 --- [nio-8004-exec-2] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:51:22.515  WARN 69948 --- [nio-8004-exec-2] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid3, cost = 6085 ms
exec method : queryGrid3 time: 6086ms
2024-12-04 15:51:22.816  INFO 69948 --- [nio-8004-exec-7] .s.s.e.i.SecurityEventMonitorServiceImpl : build queryGrid2 data cost time:480ms
2024-12-04 15:51:22.817  INFO 69948 --- [nio-8004-exec-7] com.wisdom.facade.BizWebServiceSkeleton  : Biz web service skeleton process request done
2024-12-04 15:51:22.818  WARN 69948 --- [nio-8004-exec-7] com.wisdom.facade.BizWebServiceSkeleton  : request =  com.wisdom.imd.wypap.security.dto.event.SecurityEventMonitorDto, method = queryGrid2, cost = 6401 ms
exec method : queryGrid2 time: 6403ms

4个方法最长耗时也不超过7s,前端还是有10-20s的,有个20s作业的空闲时间,等待服务器数据返回时间

image-20241204161825035

这个应该是传输过慢,等待服务器数据返回有点慢

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/484042.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

在服务器上实现本地python文件的依赖

1、在python中&#xff0c;一个python文件就可以视为一个模块进行导入 2、使用import 导入时&#xff0c;若使用pip 下载过可以直接导入 3、假如是自己写的同项目中的文件会去sys.path 中查找 比如说 我现在 test 下有一个 python文件 运行 下面的代码 打印的数据如上图所示p…

Python酷库之旅-第三方库Pandas(255)

目录 一、用法精讲 1206、pandas.tseries.offsets.SemiMonthEnd.is_on_offset方法 1206-1、语法 1206-2、参数 1206-3、功能 1206-4、返回值 1206-5、说明 1206-6、用法 1206-6-1、数据准备 1206-6-2、代码示例 1206-6-3、结果输出 1207、pandas.tseries.offsets.S…

大数据新视界 -- Hive 元数据管理:核心元数据的深度解析(上)(27 / 30)

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

【网络安全】网站常见安全漏洞 - 网站基本组成及漏洞定义

文章目录 引言1. 一个网站的基本构成2. 一些我们经常听到的安全事件3. 网站攻击者及其意图3.1 网站攻击者的类型3.2 攻击者的意图 4. 漏洞的分类4.1 按来源分类4.2 按危害分类4.3 常见漏洞与OWASP Top 10 引言 在当今的数字化时代&#xff0c;安全问题已成为技术领域不可忽视的…

Web 毕设篇-适合小白、初级入门练手的 Spring Boot Web 毕业设计项目:智行无忧停车场管理系统(前后端源码 + 数据库 sql 脚本)

&#x1f525;博客主页&#xff1a; 【小扳_-CSDN博客】 ❤感谢大家点赞&#x1f44d;收藏⭐评论✍ 文章目录 1.0 项目介绍 1.1 项目功能 2.0 用户登录功能 3.0 首页界面 4.0 车辆信息管理功能 5.0 停车位管理功能 6.0 入场登记管理功能 7.0 预约管理功能 8.0 收费规则功能 9.0…

猎板 PCB特殊工艺:铸就电子行业核心竞争力新高度

在当今竞争激烈且技术驱动的电子制造领域&#xff0c;印制电路板&#xff08;PCB&#xff09;作为电子产品的关键基石&#xff0c;其特殊工艺的发展水平直接影响着整个行业的创新步伐与产品品质。猎板 PCB 凭借在厚铜板、孔口铺铜、HDI 板、大尺寸板以及高频高速板等特殊工艺方…

STM32 进阶 定时器3 通用定时器 案例2:测量PWM的频率/周期

需求分析 上一个案例我们输出了PWM波&#xff0c;这个案例我们使用输入捕获功能&#xff0c;来测试PWM波的频率/周期。 把测到的结果通过串口发送到电脑&#xff0c;检查测试的结果。 如何测量 1、输入捕获功能主要是&#xff1a;测量输入通道的上升沿和下降沿 2、让第一个…

Android平台GB28181设备接入模块如何支持GB28181云端录像补录

技术背景 GB28181 的补录功能是一种用于弥补视频数据缺失的重要机制。在实际的视频监控场景中&#xff0c;由于网络不稳定、设备故障等多种因素&#xff0c;可能会导致视频数据在上云或存储过程中出现缺失&#xff0c;无法保证数据的完整性。GB28181 的补录功能就是为了解决这…

如何将python项目导出为docker镜像

如何将python项目导出为docker镜像 前提条件步骤 1: 创建并准备 Python 项目步骤 2: 创建 `setup.py`步骤 3: 打包项目步骤 4: 创建 Dockerfile步骤 5: 构建 Docker 镜像步骤 6: 运行 Docker 容器步骤 7: 保存修改并继续开发总结要将修改后的Python代码导出为 .tar.gz 格式,并…

Lua使用点号和冒号的区别

首先建立一个table&#xff0c;再分别定义两个方法&#xff0c;如下&#xff1a; local meta {}function meta:test1(...)print(self)print("")for k,v in pairs({...}) doprint(v)end endfunction meta.test2(...)print(self)print("")for k,v in pairs…

OpenGL ES详解——文字渲染

目录 一、文字渲染 二、经典文字渲染&#xff1a;位图字体 1.概念 2.优缺点 三、现代文字渲染&#xff1a;FreeType 1.着色器 2.渲染一行文字 四、关于未来 一、文字渲染 当你在图形计算领域冒险到了一定阶段以后你可能会想使用OpenGL来绘制文字。然而&#xff0c;可能…

【数据中心建设资料】数据中心安全建设解决方案,数据中心整理解决方案,数据中心如何做到安全保障,数据中台全方案(Word全原件)

第一章 解决方案 1.1 建设需求 1.2 建设思路 1.3 总体方案 信息安全系统整体部署架构图 1.3.1 IP准入控制系统 1.3.2 防泄密技术的选择 1.3.3 主机账号生命周期管理系统 1.3.4 数据库账号生命周期管理系统 1.3.5 双因素认证系统 1.3.6 数据库审计系统 1.3.7 数据脱敏系统 1.3.8…

菲涅尔透镜加工:倚光科技的光学创新之路

在光学元件的广袤星空中&#xff0c;菲涅尔透镜以其独特的设计和卓越的性能闪耀着独特光芒。菲涅尔透镜通过将透镜表面由一系列同心棱纹组成&#xff0c;大幅减少了材料的使用量&#xff0c;却依然能够有效地汇聚或发散光线&#xff0c;在众多领域展现出无可比拟的优势&#xf…

OSCP:我理解的Web环境知识

你需要特别关注以下模块所涵盖的知识点&#xff0c;因为它们在考试中出现的概率很高。 1、SQL 注入&#xff08;SQL Injection&#xff09; ●允许攻击者注入自定义的、潜在恶意的 SQL 代码&#xff0c;由底层数据库执行。 ●可能导致数据泄露或目标服务器上的远程代码执行&…

flink-connector-mysql-cdc:01 mysql-cdc础配置代码演示

flink-connector-mysql-cdc&#xff1a; 01 mysql-cdc基础配置代码演示02 mysql-cdc高级扩展03 mysql-cdc常见问题汇总04 mysql-cdc-kafka生产级代码分享05 flink-kafka-doris生产级代码分享06 flink-kafka-hudi生产级代码分享 flink-cdc版本&#xff1a;3.2.0 flink版本&…

c++数据结构算法复习基础--11--高级排序算法-快速排序-归并排序-堆排序

高阶排序 1、快速排序 冒泡排序的升级算法 每次选择一个基准数&#xff0c;把小于基准数的放到基准数的左边&#xff0c;把大于基准数的放到基准数的右边&#xff0c;采用 “ 分治算法 ”处理剩余元素&#xff0c;直到整个序列变为有序序列。 最好和平均的复杂度&#xff1a…

分类算法中的样本不平衡问题及其解决方案

一、样本不平衡问题概述 在机器学习的分类任务中&#xff0c;样本不平衡是指不同类别训练样本数量存在显著差异的现象。这一差异会给模型训练和性能评估带来挑战&#xff0c;尤其在处理少数类样本时&#xff0c;模型可能难以有效学习其特征。 以二分类为例&#xff0c;理想情况…

GPS模块/SATES-ST91Z8LR:电路搭建;直接用电脑的USB转串口进行通讯;模组上报定位数据转换地图识别的坐标手动查询地图位置

从事嵌入式单片机的工作算是符合我个人兴趣爱好的,当面对一个新的芯片我即想把芯片尽快搞懂完成项目赚钱,也想着能够把自己遇到的坑和注意事项记录下来,即方便自己后面查阅也可以分享给大家,这是一种冲动,但是这个或许并不是原厂希望的,尽管这样有可能会牺牲一些时间也有哪天原…

AVL树:自平衡的二叉搜索树

AVL树是一种自平衡的二叉搜索树&#xff08;BST&#xff09;。它最早由G.M. Adelson-Velsky和E.M. Landis在1962年提出。AVL树的特点是任何节点的两个子树的高度最多相差1&#xff0c;这确保了树的平衡性&#xff0c;从而保证了树的操作&#xff08;如查找、插入和删除&#xf…

AMR移动机器人赋能制造业仓储自动化升级

在当今制造业的激烈竞争中&#xff0c;智能化、数字化已成为企业转型升级的关键路径。一家制造业巨头&#xff0c;凭借其庞大的生产体系和多个仓库资源&#xff0c;正以前所未有的决心和行动力&#xff0c;在制造业智能化浪潮中勇立潮头&#xff0c;开启了降本增效的新篇章。这…