当前位置:首页 > JavaScript

js实现gzip

2026-03-14 08:08:45JavaScript

使用 pako 库实现 Gzip 压缩与解压

pako 是一个流行的 JavaScript 库,提供高效的 zlib 压缩和解压功能,支持 Gzip 格式。

安装 pako:

npm install pako
# 或直接通过 CDN 引入
<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.1.0/pako.min.js"></script>

压缩字符串示例:

js实现gzip

const pako = require('pako');
const originalString = "This is a string to be compressed";
const compressed = pako.gzip(originalString);
// 转换为 Base64 便于传输
const compressedBase64 = btoa(String.fromCharCode.apply(null, compressed));

解压字符串示例:

const decompressed = pako.ungzip(
  Uint8Array.from(
    atob(compressedBase64)
      .split('')
      .map(c => c.charCodeAt(0))
  )
);
const result = new TextDecoder().decode(decompressed);

使用浏览器内置 Compression Streams API

现代浏览器支持 Compression Streams API,无需第三方库:

js实现gzip

压缩示例:

async function compressGzip(input) {
  const stream = new Blob([input]).stream();
  const compressedStream = stream.pipeThrough(new CompressionStream('gzip'));
  return await new Response(compressedStream).blob();
}

解压示例:

async function decompressGzip(input) {
  const stream = new Blob([input]).stream();
  const decompressedStream = stream.pipeThrough(new DecompressionStream('gzip'));
  return await new Response(decompressedStream).text();
}

Node.js 内置 zlib 模块

Node.js 环境可直接使用内置模块:

const zlib = require('zlib');
const fs = require('fs');

// 压缩文件
fs.createReadStream('input.txt')
  .pipe(zlib.createGzip())
  .pipe(fs.createWriteStream('input.txt.gz'));

// 解压文件
fs.createReadStream('input.txt.gz')
  .pipe(zlib.createGunzip())
  .pipe(fs.createWriteStream('output.txt'));

注意事项

  • 浏览器端 Gzip 压缩主要适用于文本数据,二进制数据可能需要特殊处理
  • 大文件建议使用流式处理避免内存问题
  • 跨浏览器兼容性需要考虑,老版本浏览器可能需要 polyfill
  • 服务端设置正确的 Content-Encoding 响应头

以上方法根据不同运行环境提供了 JavaScript 实现 Gzip 压缩/解压的解决方案,选择时需考虑目标平台支持情况。

标签: jsgzip
分享给朋友:

相关文章

js实现分页

js实现分页

实现分页的基本思路 分页功能通常需要处理数据分割、页码生成和用户交互。核心逻辑包括计算总页数、根据当前页截取数据、渲染页码按钮等。 前端分页实现(静态数据) 假设已有全部数据,仅需前端分页展示:…

js如何实现继承

js如何实现继承

原型链继承 通过将子类的原型指向父类的实例实现继承。子类实例能够访问父类原型上的属性和方法。 function Parent() { this.name = 'parent'; } Parent…

js树实现

js树实现

树的基本概念 树是一种非线性的数据结构,由节点和边组成。每个节点包含一个值和指向子节点的引用。树的顶部节点称为根节点,没有子节点的节点称为叶节点。 树的实现方式 在JavaScript中,树可以通过…

js实现投球

js实现投球

实现投球动画的基本思路 使用JavaScript和CSS动画结合的方式模拟投球效果。核心是通过改变元素的位置、旋转和缩放属性,配合定时器或CSS过渡实现平滑动画。 创建基础HTML结构 <…

js实现密码

js实现密码

密码强度验证 使用正则表达式验证密码强度是一种常见方法。以下代码检查密码是否包含大小写字母、数字和特殊字符,且长度至少为8位: function checkPasswordStrength(pass…

js节流实现

js节流实现

节流的概念 节流(Throttle)是一种限制函数执行频率的技术,确保函数在一定时间间隔内只执行一次。常用于滚动事件、窗口调整等高频触发的场景。 基础实现方法 使用时间戳判断是否执行函数: fun…