CompressionStream 是浏览器原生流式压缩 API,仅支持 "gzip" 和 "deflate" 格式,必须通过 pipeThrough() 链入 ReadableStream,不支持直接压缩字符串或设置压缩级别,且需显式指定 MIME 类型。

Html2md
使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...
下载
CompressionStream 是浏览器原生支持的流式压缩 API,不需要引入第三方库,但必须在支持它的环境中使用(Chrome 120+、Firefox 122+、Safari 17.4+)。它不适用于 `<script>` 直接操作字符串或 <code>XMLHttpRequest 响应体,只作用于 <code>ReadableStream。
<h3>CompressionStream 构造函数参数必须是字符串
<p>你不能传入数字、对象或 <code>undefined:<code>new CompressionStream("gzip") 合法,<code>new CompressionStream(9) 或 <code>new CompressionStream("GZIP") 都会抛出 <code>TypeError: Failed to construct 'CompressionStream': invalid format。
<p>目前仅支持两个值:
<ul>
<li><code>"gzip":标准 GZIP 格式,带 10 字节头部和 8 字节尾部(含 CRC32)
<li><code>"deflate":RFC 1951 格式,无头部/尾部;注意不是 <code>"deflate-raw"(该值不被接受)
<p>传错格式名是开发中最常遇到的报错点,尤其容易把 <code>"deflate-raw" 当作合法选项——它在 <code>CompressionStream 中无效,只在 Node.js 的 <code>zlib.createDeflateRaw() 或某些后端库中存在。
<h3>必须配合 stream().pipeThrough() 使用
<p><code>CompressionStream 不是直接调用的工具函数,它只作为 <code>TransformStream 插入到 ReadableStream 管道中。常见错误是试图对 <code>ArrayBuffer 或 <code>Blob 直接构造:<p><span>立即学习“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记(深入)”;
<p>❌ 错误写法:<code>const compressed = new CompressionStream("gzip").compress(rawData) —— <code>compress() 方法根本不存在。
<p>✅ 正确链路:
<pre class="brush:php;toolbar:false;">const readStream = file.stream();
const compressStream = new CompressionStream("gzip");
const compressedStream = readStream.pipeThrough(compressStream);
const blob = await new Response(compressedStream).blob();</pre>
<p>注意:<code>pipeThrough() 返回的是新的 <code>ReadableStream,原始流不会被消耗或关闭,但你不能再对原始流重复调用 <code>pipeThrough()(会报错 <code>InvalidStateError)。
<h3>压缩后 Blob 的 type 不能自动推断
<p>浏览器不会因为用了 <code>"gzip" 就自动设 <code>type: "application/gzip"。如果你用 <code>new Blob([blob]) 包一层,<code>type 默认是空字符串,下载时可能被识别为 <code>text/plain 或触发乱码。
<p>务必显式设置 MIME 类型:
<ul>
<li>gzip 输出:用 <code>new File([blob], filename + ".gz", {type: "application/gzip"})
<li>deflate 输出:没有标准 MIME 类型,建议用 <code>application/x-deflate(非官方但通用)或自定义类型如 <code>application/octet-stream
<p>漏掉这步会导致前端解压失败(比如用 <code>DecompressionStream 解压时抛 <code>DataError: Invalid compressed data),因为解压器依赖格式标识做初始化校验。
<h3>不支持配置压缩级别或字典
<p><code>CompressionStream 是浏览器封装的黑盒,不暴露 <code>level、<code>windowBits、<code>memLevel 等参数。这意味着:
<ul>
<li>你无法在客户端控制「压缩率 vs 速度」权衡
<li>无法复现服务端用 <code>zlib.gzip(data, { level: 1 }) 生成的低开销 gzip 流
<li>无法与需要特定窗口大小的嵌入式设备通信(例如某些 IoT 固件只接受 windowBits=12 的 deflate)
<p>如果项目有这类强约束,得改用 WebAssembly 实现(如 <code>fflate)或退回到服务端压缩——这是最容易被忽略的兼容性盲区。</script>