decompressionstream("gzip") 必须接收 readablestream 输入，不能直接处理字符串或 arraybuffer；base64 解码需先清理前缀、atob 解码、再转 uint8array，最后用 readablestream.from() 包装。
DecompressionStream("gzip") 要求输入是 ReadableStream，不是字符串或 ArrayBuffer
浏览器中直接 new DecompressionStream("gzip") 不会报错，但如果你传入的是 Uint8Array、ArrayBuffer 或 base64 字符串，它会静默失败或抛出 TypeError: Failed to execute 'pipeThrough' on 'ReadableStream': parameter 1 is not of type 'TransformStream' 类似错误。根本原因是 DecompressionStream 是一个 transform stream，只能通过 .pipeThrough() 接在另一个可读流后面，不能“直接解压字节”。
常见误用：
- 把
atob(base64Str)得到的字符串直接传给new TextEncoder().encode()再喂给DecompressionStream—— 缺少流包装 - 用
new Blob([uint8array]).stream()临时绕过，但在大体积数据（>50MB）时易触发内存峰值或主线程卡顿
✅ 正确起点：必须从 ReadableStream 出发。小数据可用 ReadableStream.from(uint8array)；大数据建议用 fetch() 原生响应流（它天然就是 ReadableStream）。
base64 → Uint8Array → ReadableStream 的三步转换不能跳
如果你拿到的是 base64 编码的 gzip 数据（比如后端返回的 {"data": "H4sIAAAAA..."}），必须严格按顺序做三件事，缺一不可：
- 先清理前缀：
base64Str.replace(/^data:[^;]*;base64,/, '') - 再用
atob()解码为二进制字符串（⚠️仅限 ASCII 兼容 base64；含 Unicode 请换base64-js+TextEncoder） - 最后转成
Uint8Array：遍历字符串每个字符，取.charCodeAt(0)，填入数组
示例关键片段：
function base64ToUint8Array(base64Str) {
const clean = base64Str.replace(/^data:[^;]*;base64,/, '');
const binary = atob(clean);
const bytes = new Uint8Array(binary.length);
for (let i = 0; i
<h3>解压后读取 JSON 需用 TextDecoder，不能直接 .json()</h3>
<p><code>DecompressionStream</code> 输出仍是二进制流（<code>Uint8Array</code> chunks），不是文本。调用 <code>response.json()</code> 会失败，因为那只是 <code>fetch</code> 响应对象的方法，不适用于任意流。</p>
<p>正确链路是：<code>DecompressionStream</code> → <code>ReadableStream</code> → <code>getReader()</code> → <code>TextDecoder</code> 累积解码 → <code>JSON.parse()</code></p>
- 别用
reader.read()单次读取——gzip 流可能分多块到达 - 用
TextDecoder({ fatal: false, ignoreBOM: true })容忍 UTF-8 BOM 或截断 - 如果数据量极大（如百 MB 日志），考虑边解压边解析（streaming JSON parser），而非等全部解完再
JSON.parse()
简写示例：
const decoder = new TextDecoder("utf-8");
let chunks = "";
for await (const chunk of ds.getReader()) {
chunks += decoder.decode(chunk, { stream: true });
}
const json = JSON.parse(chunks + decoder.decode()); // 最后 flush
兼容性与 fallback 要看准实际运行环境
DecompressionStream 在 Chrome 102+、Firefox 117+、Safari 16.4+ 原生支持，但旧版 Safari（≤16.3）和所有 IE 完全不支持。不要依赖 try/catch 检测，而应显式判断：
-
typeof DecompressionStream !== "undefined"是必要条件，但还不够——还要确认构造函数能接受"gzip" - 若不支持，fallback 方案只能是：用
pako（纯 JS zlib 实现）解压Uint8Array，但它在主线程同步执行，大文件会卡死 UI - Service Worker 中无法使用
DecompressionStream（即使浏览器支持），因它不在 worker 全局作用域内
真正容易被忽略的一点：gzip 流开头的 10 字节 header（如 1f 8b 08...）必须完整，缺字节会导致 DecompressionStream 抛 DOMException: InvalidStateError，且无明确提示——务必校验 base64 解码后长度是否 ≥10。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
