首页 > 其他分享 >使用pako.js压缩、解压数据

使用pako.js压缩、解压数据

时间:2023-09-26 15:37:08浏览次数:40  
标签:解压 pako const js let result str hahaha data

最近发现有个接口响应时间很长,查看network发现数据量比较大,导致需要用近3秒才能完成请求。于是决定后端压缩数据后再发给前端解压,顺便把发送数据的地方也改成了压缩数据。 本文用到的插件:pako.js、js-base64 废话不多说,附上demo: cdn引入插件

<script src="https://cdn.bootcdn.net/ajax/libs/pako/2.0.4/pako.es5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/base64.min.js"></script>
压缩、解压的方法
// 压缩
zip = (data) => {
  if (!data) return data
  // 判断数据是否需要转为JSON
  const dataJson = typeof data !== 'string' && typeof data !== 'number' ? JSON.stringify(data) : data

  // 使用Base64.encode处理字符编码,兼容中文
  const str = Base64.encode(dataJson)
  let binaryString = pako.gzip(str);
  let arr = Array.from(binaryString);
  let s = "";
  arr.forEach((item, index) => {
    s += String.fromCharCode(item)
  })
  return btoa(s)
}

// 解压
unzip = (b64Data) => {
  let strData = atob(b64Data);
  let charData = strData.split('').map(function (x) {
    return x.charCodeAt(0);
  });
  let binData = new Uint8Array(charData);
  let data = pako.ungzip(binData);

  // ↓切片处理数据,防止内存溢出报错↓
  let str = '';
  const chunk = 8 * 1024
  let i;
  for (i = 0; i < data.length / chunk; i++) {
    str += String.fromCharCode.apply(null, data.slice(i * chunk, (i + 1) * chunk));
  }
  str += String.fromCharCode.apply(null, data.slice(i * chunk));
  // ↑切片处理数据,防止内存溢出报错↑
        
  const unzipStr = Base64.decode(str);
  let result = ''
   // 对象或数组进行JSON转换
  try {
    result = JSON.parse(unzipStr)
  } catch (error) {
    if (/Unexpected token o in JSON at position 0/.test(error)) {
      // 如果没有转换成功,代表值为基本数据,直接赋值
      result = unzipStr
     }
   }
   return result
}
执行结果
const obj = [
  { a: 1, b: 2, c: 'hahaha 我 哈哈哈' },
  { a: 1, b: 5, c: 'hahaha 你 哈哈哈' },
  { a: 1, b: 3, c: 'hahaha 它 哈哈哈' },
  { a: 1, b: 22, c: 'hahaha 他 哈哈哈' },
  { a: 1, b: 24, c: 'hahaha 她 哈哈哈' },
  { a: 1, b: 21, c: 'hahaha 来 哈哈哈' }
]
const data = zip(obj)
console.log(data, 'data+++++++++++');
const result = unzip(data)
console.log(result, 'result++++++++++');

 

标签:解压,pako,const,js,let,result,str,hahaha,data
From: https://www.cnblogs.com/Micity/p/17730207.html

相关文章

  • 【面试题】Js数组去重都有哪些方法?
    1.indexOf定义:indexOf()方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回-1。注意:iindexOf()方法区分大小写。语法:string.indexOf(searchvalue,start)//;searchvalue必需。searchvalue可选参数。返回值:Number//查找指定字符串第一次......
  • json数据传输压缩以及数据切片分割分块传输多种实现方法,大数据量情况下zlib压缩以及by
    json数据传输压缩以及数据切片分割分块传输多种实现方法,大数据量情况下zlib压缩以及bytes指定长度分割。importsysimportzlibimportjsonimportmathKAFKA_MAX_SIZE=1024*1024CONTENT_MIN_MAX_SIZE=KAFKA_MAX_SIZE*0.9defsplit_data(data):""":param......
  • flv.js的追帧、断流重连及实时更新的直播优化方案
    1.前言最近在处理前端直播的业务,根据业务需要,使用flv.js的方案播放实时的flv视频流。不得不承认,flv.js是一个伟大的库。在使用flv.js开发的过程中,遇到了一些问题,也无外乎是视频延迟,视频卡顿等问题,经过在githubissues里摸爬滚打,加上长时间的试错,将这些问题归纳出了对应的解......
  • 基于vue.js的社区健康服务管理系统-计算机毕业设计源码+LW文档
    摘要:本社区健康服务管理系统是针对目前社区健康服务管理的实际需求,从实际工作出发,对过去的社区健康服务管理系统存在的问题进行分析,完善用户的使用体会。采用计算机系统来管理信息,取代人工管理模式,查询便利,信息准确率高,节省了开支,提高了工作的效率。本系统结合计算机系统的结构、......
  • 使用js模板引擎心得
    最近几年随着web开发前后端分工越来越细,同时mvc、mvp模式大行其道,js模板引擎也越来越流行了js模板引擎很多,我经常用的是artTemplate、jsviews这两个模板引擎,12306用的就是jsviewsartTemplate特性:性能卓越,执行速度通常是Mustache与tmpl的20多倍(性能测试)支持运行时调试,可......
  • Chrome插件manifest.json文件详解
    {//扩展名称"name":"MyExtension",//版本。由1到4个整数构成。多个整数间用"."隔开"version":"1.0",//manifest文件版本号。Chrome18开始必须为2"manifest_version":2,//描述。132个字符以内"......
  • Json输出List集合对象和map对象 JSON格式
    Json输出List集合对象和map对象JSON格式//Json输出List集合对象[{"属性1":["值1"],"属性2":"值2"},{"属性3":["值3"],"属性4":"值4"}]importcom.alibaba.fastjson.JSONObject;importjava.util.ArrayList;impor......
  • 博客园[JS美化]简单教程
    PS:这篇的美化不是此博客的效果,只是较为简单的效果,不过很好看在使用此教程以前,需要先申请JS权限,进入管理->设置中自行寻找(看我多懒QAQ)申请JS权限时填写内容参考模板:尊敬的博客园管理员:请问是否可以帮我开通js权限,我想对文章的样式和布局需要js代码进行调整外观。谢谢您的......
  • requests 响应头部转json时报错TypeError: Object of type CaseInsensitiveDict is n
    前言requests响应头部在转json时,想格式化输出,结果报错TypeError:ObjectoftypeCaseInsensitiveDictisnotJSONserializable报错详情示例代码importrequestsimportjson#上海悠悠wx:283340479#blog:https://www.cnblogs.com/yoyoketang/r=requests.get('htt......
  • Selenium模拟登录(数字验证码)+Requests获取json数据
    前言我只是想算算每个月洗澡花了多少钱……Selenium模拟登录登录需要提交账号、密码、验证码#实例化browser=webdriver.Edge()browser.implicitly_wait(10)url1='http://card.cqu.edu.cn/'browser.get(url1)#学工号和密码user_id='学号/工号'user_psd='密码'#输入学......