HTML Compression Streams 是浏览器提供的 API，允许在客户端对数据进行流式压缩。以下是一个简单的使用示例：// 创建一个压缩流 const compressor = new CompressionStream('deflate'); // 创建一个可读流和可写流 const readable = new ReadableStream({ start(controll

HTML Compression Streams 是浏览器原生支持的流式压缩 API，允许前端直接对 HTML、JSON 等纯文本数据进行高效 gzip 或 deflate 压缩，无需依赖第三方库，特别适合日志上传、大体积 HTML 快照导出等内存敏感场景；虽然目前仅 Chrome 118+、Edge 118+ 和 Safari 16.4+ 原生支持（Firefox 尚未实现），且需注意字节流处理、正确等待流结束及 MIME 类型设置等关键细节，但它以轻量、零依赖和真正流式处理能力，为现代 Web 应用提供了比 JSZip 更简洁的单文件压缩解决方案——如果你追求性能与原生体验，又可控目标浏览器环境，这项 API 值得立刻尝试并加入降级兜底策略。

Compression Streams API 是什么，浏览器支持现状如何

Compression Streams API 是 Web 标准中用于在浏览器端执行流式压缩/解压的原生能力，核心是 CompressionStream 和 DecompressionStream 构造函数。它不依赖第三方库，直接基于 ReadableStream / WritableStream 工作，适合处理大块文本、日志、导出数据等场景。

目前仅 Chromium 系列（Chrome 118+、Edge 118+、Opera 104+）和 Safari 16.4+ 原生支持；Firefox 尚未实现，会抛出 ReferenceError: CompressionStream is not defined。使用前必须检测：

if (typeof CompressionStream === 'undefined') {
  console.error('Compression Streams not supported');
  // fallback to JSZip or skip compression
}

如何用 CompressionStream 对 HTML 字符串做流式 gzip 压缩

不能直接传字符串给 CompressionStream —— 它只接受 Uint8Array 流。需先编码为 UTF-8，再通过 TextEncoderStream 转为字节流，最后链入压缩流。

关键步骤：

• 用 new TextEncoderStream() 将文本转为字节流
• 创建 new CompressionStream('gzip')，注意参数只能是 'gzip' 或 'deflate'（'brotli' 不被支持）
• 用 pipeThrough() 串联流，再用 pipeTo() 输出到 WritableStream 收集结果

简短示例：

async function compressHTML(htmlString) {
  const stream = new ReadableStream({
    start(controller) {
      controller.enqueue(new TextEncoder().encode(htmlString));
      controller.close();
    }
  });
<p>const compressed = await stream
.pipeThrough(new TextEncoderStream())
.pipeThrough(new CompressionStream('gzip'))
.pipeTo(new WritableStream({
write(chunk) { /<em> collect Uint8Array chunks </em>/ }
}));
}
</p>

常见错误：为什么压缩后得到空 Blob 或乱码

典型现象包括：Blob.size === 0、解压失败、或生成的文件无法被系统识别为有效 gzip 文件。原因多为以下几点：

• 没等待 pipeTo() 的 Promise resolve，就提前调用 new Blob() —— 必须等整个流结束
• 误用 TextDecoder 解码压缩后的 Uint8Array，导致二进制被破坏（压缩输出是原始字节，不是 UTF-8 文本）
• 未设置 Blob 的 type 为 'application/gzip'，部分工具拒绝识别
• 试图对已压缩内容（如图片、字体）再次压缩，实际增益为负且可能损坏数据

安全做法是只对纯文本类内容（text/html, application/json）启用，且明确告知用户“仅限文本”。

和 JSZip 相比，该方案适合什么场景

CompressionStream 不解析 ZIP 结构，也不打包多个文件 —— 它只做单流压缩，类似 Node.js 的 zlib.createGzip()。所以它不适合“导出一个含 index.html + style.css + script.js 的 ZIP 包”这种需求。

它真正有用的地方是：

• 前端采集大量日志后，实时压缩上传，避免内存爆炸
• 将动态生成的 HTML 片段（如报表快照）压缩为 .html.gz 文件供用户下载
• 配合 fetch() 的 body 流，实现边接收、边压缩、边存盘（需 WritableStream 支持）

如果需要 ZIP 多文件打包，仍得用 JSZip；如果只是减小单个 HTML 文本体积，CompressionStream 更轻量、无依赖，但兼容性差、功能窄——选哪个，取决于目标浏览器范围和是否需要降级兜底。

今天关于《HTML Compression Streams 是浏览器提供的 API，允许在客户端对数据进行流式压缩。以下是一个简单的使用示例：// 创建一个压缩流 const compressor = new CompressionStream('deflate'); // 创建一个可读流和可写流 const readable = new ReadableStream({ start(controller) { const data = '要压缩的数据内容...'; controller.enqueue(new TextEncoder().encode(data)); controller.close(); } }); // 将可读流通过压缩流转换为压缩后的可读流 const compressedStream = readable.pipeThrough(compressor); // 读取压缩后的数据 const reader = compressedStream.getReader(); let result = ''; reader.read().then(function processText({ done, value }) { if (done) { console.log('压缩完成:', result); return; } result += new TextDecoder().decode(value); return reader.read().then(processText); });说明：CompressionStream 接受一个算法参数（如 'deflate' 或 'gzip'）。使用 ReadableStream 创建原始数据流。通过 pipeThrough 将数据流传递给压缩流。最后使用 getReader() 读取压缩后的数据。注意事项：浏览器支持：目前主要支持 Chrome 和 Edge（基于 Chromium）。压缩格式：`'》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！