Java记⼀次前后端⼤数据压缩过程
近期开发⼀个功能时，发现后端返回的数据量太⼤，前端解析也很慢，严重影响了⽤户体验，然后有了这次调优过程。先说下环境：
简单的应聘界面设计
jdk 1.8
springboot ,cloud
vue
pgsql
测试⼯具：
postman
Chorme
在⽹上也了很多的⽅法，有点是后端压缩了，但是速度也不理想，有的是后端加密了，前端解不了等等原因。
整个结论结果就是：
后端使⽤Base64压缩，前端使⽤Base64解压，其中依靠编码转换⽅法（unzip）。
没有时间的码友可以直接复制结果：
前端：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*" />
<title>Title</title>
<script
src="libs.baidu/jquery/1.9.0/jquery.js">
</script>
<script
src="cdn.bootcss/pako/1.0.8/pako.min.js">
</script>
</head>
<body>
<p id="bar"></p>
<script>
let Utf8ArrayToStr = function(array) {
let out = "", i = 0, len = array.length,
小时代结局为什么最后都死了
char1, char2, char3, char4;
while(i < len) {
char1 = array[i++];
java下载过程
if (char1 >> 4 <= 7) {
out += String.fromCharCode(char1);
} else if (char1 >> 4 == 12 || char1 >> 4 == 13) {
char2 = array[i++];
out += String.fromCharCode(((char1 & 0x1F) << 6)
| (char2 & 0x3F));
} else if (char1 >> 4 == 14) {
char2 = array[i++];
char3 = array[i++];
char4 = ((char1 & 0x0F) << 12)
| ((char2 & 0x3F) << 6);
| ((char2 & 0x3F) << 6);drupal数据库配置文件
out += String.fromCharCode(char4
| ((char3 & 0x3F) << 0));
}
}
return out;
};
function unzip(b64Data) {
let strData = atob(b64Data);
let charData = strData.split('').map(function (x) {
return x.charCodeAt(0);
});
let binData = new Uint8Array(charData);
let data = pako.inflate(binData);
//strData = Utf8ArrayToStr(data)
largeuint8ArrToString(data,(item) =>{
console.log(item);
});
//let json = JSON.parse(strData);
/
/let children = json['children'];
//正则表达式匹配全部"\" 需要加 /g
//let reg = /\\/g;
//使⽤replace⽅法将全部匹配正则表达式的转义符替换为空//let replaceAfter = place(reg,'');
return strData;
};
function largeuint8ArrToString(uint8arr, callback) {
var bb = new Blob([uint8arr]);
var f = new FileReader();
hibernate save 未保存
callback(sult);
};
c语言教学视频百度云
}
$(function () {
s = true;
let date = new Date();
let now = Time();
console.log('开始时间===='+now);
$.ajax({
type: "get",
url: "xxxxxx/93",
success: function (data, status) {
if (status == "success") {
let result = unzip(data.data);
//let childrens = JSON.parse(result);
//console.log(childrens);
//let oDiv = ElementById("bar");
//oDiv.innerHTML =result;
let date1 = new Date();
let end = Time();
let endTime = end-now;
console.log('⽤时==='+endTime);
}
},
error: function (e,data) {
let oDiv = ElementById("bar");
oDiv.innerHTML =sponseText) ;
},
complete: function () {
}
});
});
</script>
</body>
</html>
Java：
public class Base64Utils {
//  压缩字符串
public static String compressData(String data) throws UnsupportedEncodingException {
//要传输的字符串
try {
//压缩后写⼊字节流发送
ByteArrayOutputStream
box = new ByteArrayOutputStream();
DeflaterOutputStream
dos = new DeflaterOutputStream(box);
// 压缩并将压缩后的内容输出到字节输出流box中
dos.Bytes());
dos.close();
return ByteArray());
} catch (Exception ex) {
ex.printStackTrace();
return "error";
}
}
/
/为了压缩后的内容能够在⽹络上传输，⼀般采⽤Base64编码
public static String getenBASE64inCodec(byte [] b) {
if (b == null) return null;
return new deBase64(b, false));
}
}
第⼀步：
⾸先数据库，因为数据的特殊，查询时间在1s左右，整个后端处理完，⼤概不到2s。
浏览器F12看⽅法执⾏等待时间超5s，下载数据10x s，下载104m（未压缩），前端再渲染出来超过了1分钟，加上⽹络因素有的可达到2min +。
第⼆步：
思路是，将⼤数据在项⽬启动时，放⼊Redis，省去客户点击时，从数据库取的时间，尝试时间与之前基本没变。后⾯采取了⼏种压缩⽅式，将内存压缩到了20+m，但是要不前端解不了，要不就是数据格式有问题，最后采取的是上⾯⽅式，将数据在项⽬启动时，放⼊Redis 之前压缩加密，取时判断key是否存在，若存在，直接返回，⽽且将加密的字符串放⼊Redis，存取都更快。前前后后所⽤整个后端处理时间+前端处理时间控制在3-5s内。⽐之前快了很多，⽬前⽤的就是这种解决⽅法。
上⼀张图：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。