# PHP+JS(pako)前后端数据压缩,节省带宽方案 ## **一、准备工具** ### **1.pako脚本库** github地址：https://github.com/nodeca/pako ### **2.前端Uint8Array与Base64互转函数（代码如下）** ~~~ // uint8array转为base64字符串 function uint8arrayToBase64(u8Arr) {     let CHUNK_SIZE = 0x8000; //arbitrary number     let index = 0;     let length = u8Arr.length;     let result = '';     let slice;     while (index < length) {         slice = u8Arr.subarray(index, Math.min(index + CHUNK_SIZE, length));         result += String.fromCharCode.apply(null, slice);         index += CHUNK_SIZE;     }     // web image base64图片格式: "data:image/png;base64," + b64encoded;     // return  "data:image/png;base64," + btoa(result);     return btoa(result); } // base64字符串转为uint8array数组 function base64ToUint8Array(base64String) {     let padding = '='.repeat((4 - base64String.length % 4) % 4);     let base64 = (base64String + padding)         .replace(/\-/g, '+')         .replace(/_/g, '/');     let rawData = window.atob(base64);     let outputArray = new Uint8Array(rawData.length);     for (var i = 0; i < rawData.length; ++i) {         outputArray[i] = rawData.charCodeAt(i);     }     return outputArray; } ~~~ ## **二、具体用法案例** ### **1.前端JS压缩+后端PHP解压** ### JS压缩 ~~~ // JS压缩，注意：需要引入dist/pako_deflate.js(仅支持压缩)或dist/pako.js(支持压缩和解压) var rawData = {title:"this is pako.defalte test",author:  "slongzhang@qq.com", date: "2021-04-02", content: "test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test  test test test test test test test test test test test test test test test "} var binaryString = pako.deflateRaw(JSON.stringify(rawData), { to: 'string' }); var compressedBase64  = uint8arrayToBase64(binaryString); console.log(compressedBase64);// q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA ~~~ PHP解压 ~~~ // PHP解压 $base64String = 'q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8dI fCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA'; print_r(gzinflate(base64_decode($base64String))); ~~~ ### ### **2.后端PHP压缩+前端JS解压** PHP压缩 ~~~ // php压缩 $array = array(   "title"       => "this is pako.defalte test",   "author"      => "slongzhang@qq.com",   "date"        => "2021-04-02",   "content"       => "test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test test test test test test test test test test test test test  test test" ); function compress($str) { return base64_encode(gzdeflate($str, 9)); } echo compress(json_encode($array,256)); // q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz8vPSqjMS8d //IfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA ~~~ ### ### JS解压 ~~~ // JS解压，注意：需要引入dist/pako_inflate.js(仅支持压缩)或dist/pako.js(支持压缩和解压) var decompress = function(str){     return pako.inflateRaw(base64ToUint8Array(str), {to: 'string'}); } var rawData = decompress('q1YqySzJSVWyUirJyCxWAKKCxOx8vZTUtMScklSFktTiEiUdpcTSkoz8IqCi4pz 8vPSqjMS8dIfCQr3k/FygZEpiCUi/kYGRoa6Bia6BEVAsOT+vJDWvBGQs0ASFUWKUwEco1QIA' ); console.log(rawData); ~~~ 数据压缩对比可达8倍  **三、注意事项** **1.前端JS** 必须引入Uint8Array与Base64互转函数 如果不需要同时处理压缩和解压可按需单独引入脚本pako\_deflate.min.js（压缩）| pako\_inflate.min.js（解压）；  如果需要同时处理压缩和解压那么请直接引入pako.js ### ### **2.PHP要求(PHP 5.6, PHP 7, PHP 8)** **原文链接：https://mp.weixin.qq.com/s/qoYd1SxOVOdipaXLjux8-g**