性能优化:前端通过gzip压缩，解压大量数据

前言： 

    前后端交互经常会遇到在传输大量数据时造成接口严重耗时，针对这个问题，最常用的方法就是通过压缩数据，使数据体积减小，从而达到快速传输的效果。

压缩工具有很多，今天来讲讲gzip在前端的使用：

1.  
   1,引入pako
2.  
   import pako from "pako";
3.  
    
4.  
   2，js中使用
5.  
    
6.  
   this.uncompress(ssjson)
7.  
   //（1）解压缩
8.  
   uncompress(b64Data) {
9.  
   var strData = atob(b64Data);
10.  
    var charData = strData.split("").map(function (x) {
11.  
    return x.charCodeAt(0);
12.  
    });
13.  
    var binData = new Uint8Array(charData);
14.  
    var data = pako.inflate(binData);
15.  
    var strData = this.Utf8ArrayToStr(data);
16.  
    return strData;
17.  
    },
18.  
    //（2）fix解压中文乱码
19.  
    Utf8ArrayToStr(array) {
20.  
    var out, i, len, c;
21.  
    var char2, char3;
22.  
    out = "";
23.  
    len = array.length;
24.  
    i = 0;
25.  
    while (i < len) {
26.  
    c = array[i ];
27.  
    switch (c >> 4) {
28.  
    case 0:
29.  
    case 1:
30.  
    case 2:
31.  
    case 3:
32.  
    case 4:
33.  
    case 5:
34.  
    case 6:
35.  
    case 7:
36.  
    out = String.fromCharCode(c);
37.  
    break;
38.  
    case 12:
39.  
    case 13:
40.  
    char2 = array[i ];
41.  
    out = String.fromCharCode(((c & 0x1f) << 6) | (char2 & 0x3f));
42.  
    break;
43.  
    case 14:
44.  
    char2 = array[i ];
45.  
    char3 = array[i ];
46.  
    out = String.fromCharCode(
47.  
    ((c & 0x0f) << 12) | ((char2 & 0x3f) << 6) | ((char3 & 0x3f) << 0)
48.  
    );
49.  
    break;
50.  
    }
51.  
    }
52.  
    return out;
53.  
    },
54.  
    // （3）压缩
55.  
    compress(json) {
56.  
    var binaryString = pako.gzip(json, { to: "string" });
57.  
    return btoa(binaryString);
58.  
    },

这篇好文章是转载于：学新通技术网