我在日常开发中遇到,由于后端返回JSON数据较大,导致前端响应的较慢,于是考虑通过后端压缩,前端解压的方式来进行优化:
后端压缩工具类:
package com.stt.common.util;
import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.zip.GZIPInputStream;
import java.util.zip.GZIPOutputStream;
public class GzipUtil {
/**
* 字符串的压缩
*
* @param str
* 待压缩的字符串
* @return 返回压缩后的字符串
* @throws IOException
*/
public static String compress(String str) throws IOException {
if (null == str || str.length() <= 0) {
return null;
}
// 创建一个新的 byte 数组输出流
ByteArrayOutputStream out = new ByteArrayOutputStream();
// 使用默认缓冲区大小创建新的输出流
GZIPOutputStream gzip = new GZIPOutputStream(out);
// 将 b.length 个字节写入此输出流
gzip.write(str.getBytes("UTF-8"));
gzip.close();
// 使用指定的 charsetName,通过解码字节将缓冲区内容转换为字符串
return out.toString("ISO-8859-1");
}
/**
* 字符串的解压
*
* @param b
* 对字符串解压
* @return 返回解压缩后的字符串
* @throws IOException
*/
public static String unCompress(byte[] b) {
try {
if (null == b || b.length <= 0) {
return null;
}
// 创建一个新的 byte 数组输出流
ByteArrayOutputStream out = new ByteArrayOutputStream();
// 创建一个 ByteArrayInputStream,使用 buf 作为其缓冲区数组
ByteArrayInputStream in;
in = new ByteArrayInputStream(b);
// 使用默认缓冲区大小创建新的输入流
GZIPInputStream gzip = new GZIPInputStream(in);
byte[] buffer = new byte[256];
int n = 0;
while ((n = gzip.read(buffer)) >= 0) {// 将未压缩数据读入字节数组
// 将指定 byte 数组中从偏移量 off 开始的 len 个字节写入此 byte数组输出流
out.write(buffer, 0, n);
}
// 使用指定的 charsetName,通过解码字节将缓冲区内容转换为字符串
return out.toString("UTF-8");
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}
使用压缩工具,返回压缩后的JSON字符串:
return GzipUtil.compress(jsonString);
前端使用pako.min.js进行解压,我这里使用的是2.0.4版本:
首先在页面引入pako.min.js
<script src="../js/pako/pako.min.js"></script>
//解压
function unzip(strData) {
// Convert binary string to character-number array
var charData = strData.split('').map(function(x){return x.charCodeAt(0);});
// Turn number array into byte-array
var binData = new Uint8Array(charData);
// // unzip
var data = pako.inflate(binData);
// Convert gunzipped byteArray back to ascii string:
return Utf8ArrayToStr(data);
}
//解决数据过大和中文乱码
function Utf8ArrayToStr(array) {
var out, i, len, c;
var char2, char3;
out = "";
len = array.length;
i = 0;
while(i < len) {
c = array[i++];
switch(c >> 4)
{
case 0: case 1: case 2: case 3: case 4: case 5: case 6: case 7:
// 0xxxxxxx
out += String.fromCharCode(c);
break;
case 12: case 13:
// 110x xxxx 10xx xxxx
char2 = array[i++];
out += String.fromCharCode(((c & 0x1F) << 6) | (char2 & 0x3F));
break;
case 14:
// 1110 xxxx 10xx xxxx 10xx xxxx
char2 = array[i++];
char3 = array[i++];
out += String.fromCharCode(((c & 0x0F) << 12) |
((char2 & 0x3F) << 6) |
((char3 & 0x3F) << 0));
break;
}
}
return out;
}
最后贴上我使用的pako.min.js文件:
<script src="https://cdn.staticfile.org/pako/2.0.4/pako.min.js"></script>
————————————————
版权声明:本文为CSDN博主「烂笔头~」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_42274229/article/details/124796502