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]