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

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

性能面板(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

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【CSS in Depth 2 精译_067】11.2 颜色的定义(中):CSS 中的色域与色彩空间

当前内容所在位置&#xff08;可进入专栏查看其他译好的章节内容&#xff09; 第四部分 视觉增强技术 ✔️【第 11 章 颜色与对比】 ✔️ 11.1 通过对比进行交流 11.1.1 模式的建立11.1.2 还原设计稿 11.2 颜色的定义 11.2.1 色域与色彩空间 ✔️11.2.2 深入理解颜色表示法 文…

【附源码】基于环信鸿蒙IM SDK实现一个聊天Demo

项目背景 本项目基于环信IM 鸿蒙SDK 打造的鸿蒙IM Demo&#xff0c;完全适配HarmonyOS NEXT系统&#xff0c;实现了发送消息&#xff0c;添加好友等基础功能。代码开源&#xff0c;功能简洁&#xff0c;如果您有类似开发需求可以参考。 源码地址&#xff1a;https://github.c…

AWS创建ec2实例并连接成功

aws创建ec2实例并连接 aws创建ec2并连接 1.ec2创建前准备 首先创建一个VPC隔离云资源并且有公有子网 2.创建EC2实例 1.启动新实例或者创建实例 2.创建实例名 3.选择AMI使用linux(HVM) 4.选择实例类型 5.创建密钥对下载到本地并填入密钥对名称 6.选择自己创建的VPC和公有子网…

请求路径中缺少必需的路径变量[xxxId]

一、请求路径中缺少了必需的路径变量 xxxId。 这通常发生在构建API请求时&#xff0c;未正确设置URL中的参数。以下是解决此问题的步骤&#xff1a; 检查API文档&#xff1a;确认 xxxId是否确实是请求路径中的必需参数。 构建请求URL&#xff1a;确保在构建请求URL时&#xff…

初识TCP(编写回显服务器)

目录 初识TCP&#xff08;编写回显服务器&#xff09;TCP相关的API服务器代码实现客户端代码实现部分代码解释注意事项效果展示 初识TCP&#xff08;编写回显服务器&#xff09; TCP相关的API ServerSocket &#xff1a; 这是socket类&#xff0c;对应到网卡&#xff0c;但是…

Kali Linux使用Netdiscover工具的详细教程

Kali Linux使用Netdiscover工具的详细教程 引言 在网络安全和渗透测试的过程中&#xff0c;网络发现是一个至关重要的步骤。Netdiscover是Kali Linux中一个非常实用的网络发现工具&#xff0c;它可以帮助用户快速识别局域网中的活动设备。本文将详细介绍如何使用Netdiscover工…

R语言机器学习论文(二):数据准备

禁止商业或二改转载,仅供自学使用,侵权必究,如需截取部分内容请后台联系作者! 文章目录 介绍加载R包数据下载导入数据一、数据描述二、数据预处理(一)修改元素名称(二)剔除无关变量(三)缺失值检查(四)重复值检查(五)异常值检查三、描述性统计(一)连续变量数据情…

Net9 Abp Vnext查询、高级搜索、过滤终极解决方案,ORM支持Freesql/SqlSugar/EFCore或原生sql

以员工管理表为例&#xff0c;常用栏位如下图 基本需求&#xff1a;默认搜索框可以模糊查询搜索工号、姓名、手机号、年龄等不需要关联查询基本字段。 特殊需求需要高级搜索&#xff1a;例如按入职区间、部门、公司、年龄段、上级主管等进行模糊搜索&#xff0c;且支持并且或者…

在办公室环境中用HMD替代传统显示器的优势

VR头戴式显示器&#xff08;HMD&#xff09;是进入虚拟现实环境的一把钥匙&#xff0c;拥有HMD的您将能够在虚拟现实世界中尽情探索未知领域&#xff0c;正如如今的互联网一样&#xff0c;虚拟现实环境能够为您提供现实中无法实现的或不可能实现的事。随着技术的不断进步&#…

PPT怎样做的更加精美

目录 PPT怎样做的更加精美 3D的GIF图片 3维空间图​编辑 结果有明显的对比 阅读高质量文献,采用他们的图 PPT怎样做的更加精美 3D的GIF图片 3维空间图 结果有明显的对比

Altium Designer学习笔记 26-27 PCB布局优化_规则创建

基于Altium Designer 23学习版&#xff0c;四层板智能小车PCB 更多AD学习笔记&#xff1a;Altium Designer学习笔记 1-5 工程创建_元件库创建Altium Designer学习笔记 6-10 异性元件库创建_原理图绘制Altium Designer学习笔记 11-15 原理图的封装 编译 检查 _PCB封装库的创建Al…

在Unity编辑模式下运行Mono中的方法

[ExecuteAlways] 最简单的方法当然是直接给Mono加上[ExecuteAlways]修饰&#xff0c;这样Mono中的Awake&#xff0c;Update等等都可以在编辑模式下按照原本的时机运行。 [ExecuteAlways] public class TestScript : MonoBehaviour {void TestMethod(){Debug.Log("TestMe…

PDF与PDF/A的区别及如何使用Python实现它们之间的相互转换

目录 概述 PDF/A 是什么&#xff1f;与 PDF 有何不同&#xff1f; 用于实现 PDF 与 PDF/A 相互转换的 Python 库 Python 实现 PDF 转 PDF/A 将 PDF 转换为 PDF/A-1a 将 PDF 转换为 PDF/A-1b 将 PDF 转换为 PDF/A-2a 将 PDF 转换为 PDF/A-2b 将 PDF 转换为 PDF/A-3a 将…

【超图】iClient3D for Cesium 以动静结合方式加载WMTS服务

作者&#xff1a;taco 一、问题来源 在最近支持的项目中&#xff0c;我们面临一个挑战&#xff1a;客户需要在前端动态加载高达3亿级别的白模底面数据。这样做的主要原因是客户的数据库会频繁更新&#xff0c;因此我们需要采用动态加载的方式来确保用户界面能够实时反映最新的…

Y20030026 VUE+Springboot+MYSQL+LW+实体店推广平台的设计与实现 源代码 配置 文档 PPT

实体店推广平台的设计与实现 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 随着互联网的普及和电子商务的快速发展&#xff0c;消费者的购物习惯发生了显著变化。越来越多的消费者倾向于在线购物&#xff0c;享受便捷、丰富的选择和个性化的购物体验…

基数排序(代码+注释)

#include <stdio.h> #include <stdlib.h>// 获取数组中的最大值 int GetMax(int* a, int n) {int max a[0];for (int i 1; i < n; i) {if (a[i] > max) {max a[i];}}return max; }// 对数组按照某个位数进行计数排序 void CountingSortForRadix(int* a, i…

esp8266 编译、烧录环境搭建

一、准备 xtensa-lx106-elf-gcc8-4-0-esp-2020r3-win32下载&#xff1a;点击跳转 MSYS2 压缩包文件&#xff1a; 固件烧录工具&#xff1a;点击跳转 esp8266源码地址&#xff1a;点击跳转 二、搭建编译环境 1、在D盘创建一个ESP8266目录&#xff0c;解压MSYS2.zip到里面&a…

【Delphi】modbus-TCP 协议库

在日常开发中&#xff0c;也会遇到使用modbus的部件&#xff0c;比如温度控制器、读卡器等等&#xff0c;那么使用Delphi开发&#xff0c;也就必须遵守modbus-TCP协议&#xff0c;如果自己使用TCP控件写也没有问题&#xff0c;不过如果有开源的三方库&#xff0c;别人已经调试过…

AgGrid 组件封装设计笔记:自定义 icon 以及每个 icon 的点击事件处理

文章目录 问题目前解决效果 v1思路 目前解决效果 v0思路 代码V1 问题 自己封装的 AgGrid 如何自定义传递 icon &#xff0c;以及点击事件的处理&#xff1f; 目前解决效果 v1 思路 目前解决效果 v0 思路 一张图片说明一下 代码 V1 父组件使用 <template><MyPageL…

MySQL——MySQL 日志

文章目录 MySQL 文件介绍二进制日志&#xff08;bin log&#xff09;概念binlog 日志的三种格式两阶段提交binlog 落盘更新语句执行流程 慢查询日志&#xff08;slow query log&#xff09;重做日志&#xff08;redo log&#xff09;redo log 日志的理解WAL 技术redo log 的工作…