接口返回数据量过大，造成请求非常慢

今天在写代码时有个接口是调用第三方的，数据是树形结构的，在本地调用测试时数据量较小未发现原因，因为这个接口是进入页面时初始就要加载的，刚上线客户就反应进不去，要来地址一看，果然请求5、6秒，但是会卡一会才有值，一看请求，返回值2.7M,瞬间麻了。但是依然的解决。
解决方案 ，使用gzip流压缩
附后台代码

import java.io.ByteArrayInputStream;
import java.io.ByteArrayOutputStream;
import java.io.IOException;
import java.util.zip.GZIPInputStream;
import java.util.zip.GZIPOutputStream;

public class GZIPUtils {
   /**  
     * 字符串的压缩  
     *   
     * @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;  
  }

}

String encodeStr = URLEncoder.encode(JSON.toJSONString(buildMenuTree(menus)), “UTF-8”);
encodeStr = Base64.encodeBase64String(encodeStr.getBytes(“UTF-8”));

String menuCompressStr = GZIPUtils.compress(encodeStr);

前端js

//data为后台返回的值
JSON.parse(unzip(data));
// 解压
 function unzip(key) {
     var charData = [];
     var keyArray = key.split('');
     for(var i = 0; i < keyArray.length; i++){
         var item = keyArray[i];
         charData.push(item.charCodeAt(0));
     }

     // var binData = new Uint8Array(charData);
     // console.log('Uint8Array:' + binData);
     // 解压
     // var data = pako.inflate(binData);
     var data = pako.inflate(charData);

     // 将GunZip ByTAREAR转换回ASCII字符串
     // let   res= String.fromCharCode.apply(null, new Uint16Array(data));

 	let    res= String.fromCharCode.apply(null, data);
     return decodeURIComponent(Base64.decode(res));
 }


// 压缩
 function zip(str) {
     //escape(str)  --->压缩前编码，防止中午乱码
     var binaryString = pako.gzip(escape(str), { to: 'string' });
     return binaryString;
 }

当出现 Maximum call stack size exceeded 时是因为数据量过大导致
需要使用

  function unzip(key) {
        var charData = [];
        var keyArray = key.split('');
        for(var i = 0; i < keyArray.length; i++){
            var item = keyArray[i];
            charData.push(item.charCodeAt(0));
        }

        // var binData = new Uint8Array(charData);
        // console.log('Uint8Array:' + binData);
        // 解压
        // var data = pako.inflate(binData);
        var data = pako.inflate(charData);

        // 将GunZip ByTAREAR转换回ASCII字符串
        // let res= String.fromCharCode.apply(null, new Uint16Array(data));
        //let res = String.fromCharCode.apply(null, data);
         let res=''
		  for (x = 0; x < data.length / chunk; x++) {
		    res+= String.fromCharCode.apply(null, data.slice(x * chunk, (x+ 1) * chunk));
		  }
		  res+= String.fromCharCode.apply(null, data.slice(x * chunk));
        return decodeURIComponent(Base64.decode(res));
    }

前端解压需要用到pako.min.js，下载地址：https://download.youkuaiyun.com/download/qq_41615095/86932582