我在日常开发中遇到,由于后端返回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