pako插件——数据压缩利器工具

pako认识

项目开发中常常会遇到前后端之间有大量数据传输占用带宽导致页面响应慢的问题，这时候我们可以考虑使用Pako.js插件对信息进行压缩之后传输

压缩

在将pako.js引入前端页面中后，可以在浏览器中查看其内部结构，如图所示

常用	解释
deflate(data[, options]) -> Uint8Array	压缩函数， input类型 UInt8Array或者string ，返回类型为UInt8Array
inflate(data[, options]) -> Uint8Array|String	解压缩函数， input类型 UInt8Array或者string ，返回类型为UInt8Array；如果options:{to:‘string’}，则返回string字符串
gzip(data[, options]) -> Uint8Array	压缩函数， input类型 UInt8Array或者string ，返回类型为UInt8Array 。The same as [[deflate]], but create gzip wrapper instead of deflate one.
ungzip(input,options)	解压缩函数， input类型 UInt8Array或者string ，返回类型为UInt8Array；如果options:{to:'string'}，则返回string字符串。Decompress data with inflate/ungzip and options

实战

let rawData={name:'郜超超',age:25,sex:'男',hobbies:['篮球','排球','乒乓球'],married:false};
rawData
{name: "郜超超", age: 25, sex: "男", hobbies: Array(3), married: false}
let a=JSON.stringify(rawData);
a
"{"name":"郜超超","age":25,"sex":"男","hobbies":["篮球","排球","乒乓球"],"married":false}"
/**
*以下是压缩步骤
encodeURIComponnent将 / : ? 等字符转义，并支持中文压缩和解压缩
btoa将UInt8Array数组base64加密，最终得到压缩内容的base64密文字符串（可省略加密）
*/


let b=encodeURIComponent(a);
b
"%7B%22name%22%3A%22%E9%83%9C%E8%B6%85%E8%B6%85%22%2C%22age%22%3A25%2C%22sex%22%3A%22%E7%94%B7%22%2C%22hobbies%22%3A%5B%22%E7%AF%AE%E7%90%83%22%2C%22%E6%8E%92%E7%90%83%22%2C%22%E4%B9%92%E4%B9%93%E7%90%83%22%5D%2C%22married%22%3Afalse%7D"
let c=pako.deflate(b,{to:'string'});
c
Uint8Array(130) [120, 156, 109, 141, 205, 14, 194, 48, 12, 131, 159, 198, 119, 148, 82, 218, 28, 219, 45, 188, 71, 39, 2, 76, 98, 32, 173, 23, 30, 127, 221, 90, 254, 36, 46, 142, 21, 127, 178, 225, 34, 136, 238, 105, 210, 114, 96, 194, 170, 194, 240, 6, 220, 65, 60, 226, 1, 222, 126, 76, 73, 169, 43, 154, 46, 141, 39, 91, 31, 89, 159, 95, 5, 14, 188, 71, 116, 111, 252, 250, 24, 134, 81, 115, 35, 108, 108, 80, 56, 34, 200, 70, 239, 214, 197, 23, 13, 41, 91, 2, …]
let d=window.btoa(c);
d
"MTIwLDE1NiwxMDksMTQxLDIwNSwxNCwxOTQsNDgsMTIsMTMxLDE1OSwxOTgsMTE5LDE0OCw4MiwyMTgsMjgsMjE5LDQ1LDE4OCw3MSwzOSwyLDc2LDk4LDMyLDE3MywyMywzMCwxMjcsMjIxLDkwLDI1NCwzNiw0NiwxNDIsMjEsMTI3LDE3OCwyMjUsMzQsMTM2LDIzOCwxMDUsMjEwLDExNCw5NiwxOTQsMTcwLDE5NCwyNDAsNiwyMjAsNjUsNjAsMjI2LDEsMjIyLDEyNiw3Niw3MywxNjksNDMsMTU0LDQ2LDE0MSwzOSw5MSwzMSw4OSwxNTksOTUsNSwxNCwxODgsNzEsMTE2LDExMSwyNTIsMjUwLDI0LDEzNCw4MSwxMTUsMzUsMTA4LDEwOCw4MCw1NiwzNCwyMDAsNzAsMjM5LDIxNCwxOTcsMjMsMTMsNDEsOTEsMiwxNjYsMTI3LDgxLDIzMywyMjksNDUsMTcwLDE5OCwyNTIsNDgsMTgyLDE3NSwyMTYsMTQ4LDIzMCwxMjEsMjEyLDgzLDIyMSw1OSwxNjcsOTEsODYsMTg0LDEyNiwxLDE0OCwxNyw1Miwx"


let e=atob(d);
e
"120,156,109,141,205,14,194,48,12,131,159,198,119,148,82,218,28,219,45,188,71,39,2,76,98,32,173,23,30,127,221,90,254,36,46,142,21,127,178,225,34,136,238,105,210,114,96,194,170,194,240,6,220,65,60,226,1,222,126,76,73,169,43,154,46,141,39,91,31,89,159,95,5,14,188,71,116,111,252,250,24,134,81,115,35,108,108,80,56,34,200,70,239,214,197,23,13,41,91,2,166,127,81,233,229,45,170,198,252,48,182,175,216,148,230,121,212,83,221,59,167,91,86,184,126,1,148,17,52,1"
let f=e.split(',').map(function(x){return parseInt(x);});
f
(130) [120, 156, 109, 141, 205, 14, 194, 48, 12, 131, 159, 198, 119, 148, 82, 218, 28, 219, 45, 188, 71, 39, 2, 76, 98, 32, 173, 23, 30, 127, 221, 90, 254, 36, 46, 142, 21, 127, 178, 225, 34, 136, 238, 105, 210, 114, 96, 194, 170, 194, 240, 6, 220, 65, 60, 226, 1, 222, 126, 76, 73, 169, 43, 154, 46, 141, 39, 91, 31, 89, 159, 95, 5, 14, 188, 71, 116, 111, 252, 250, 24, 134, 81, 115, 35, 108, 108, 80, 56, 34, 200, 70, 239, 214, 197, 23, 13, 41, 91, 2, …]
let g=pako.inflate(f,{to:'string'};
g
"%7B%22name%22%3A%22%E9%83%9C%E8%B6%85%E8%B6%85%22%2C%22age%22%3A25%2C%22sex%22%3A%22%E7%94%B7%22%2C%22hobbies%22%3A%5B%22%E7%AF%AE%E7%90%83%22%2C%22%E6%8E%92%E7%90%83%22%2C%22%E4%B9%92%E4%B9%93%E7%90%83%22%5D%2C%22married%22%3Afalse%7D"
let h=decodeURIComponent(g);
h
"{"name":"郜超超","age":25,"sex":"男","hobbies":["篮球","排球","乒乓球"],"married":false}"
let g2=pako.inflate(f);
g2
Uint8Array(235) [37, 55, 66, 37, 50, 50, 110, 97, 109, 101, 37, 50, 50, 37, 51, 65, 37, 50, 50, 37, 69, 57, 37, 56, 51, 37, 57, 67, 37, 69, 56, 37, 66, 54, 37, 56, 53, 37, 69, 56, 37, 66, 54, 37, 56, 53, 37, 50, 50, 37, 50, 67, 37, 50, 50, 97, 103, 101, 37, 50, 50, 37, 51, 65, 50, 53, 37, 50, 67, 37, 50, 50, 115, 101, 120, 37, 50, 50, 37, 51, 65, 37, 50, 50, 37, 69, 55, 37, 57, 52, 37, 66, 55, 37, 50, 50, 37, 50, 67, 37, …]
let g_h=String.fromCharCode.apply(null,g2);
g_h
"%7B%22name%22%3A%22%E9%83%9C%E8%B6%85%E8%B6%85%22%2C%22age%22%3A25%2C%22sex%22%3A%22%E7%94%B7%22%2C%22hobbies%22%3A%5B%22%E7%AF%AE%E7%90%83%22%2C%22%E6%8E%92%E7%90%83%22%2C%22%E4%B9%92%E4%B9%93%E7%90%83%22%5D%2C%22married%22%3Afalse%7D"
g_h===g
true

注意事项

• 如果压缩内容包含中文文本，压缩时需要使用encodeURIComponent来转移一下，解压时需要decodeURIComponent来转义回去。否则会出现中文乱码。
• [x]