DecompressionStream 仅异步解压二进制数据，输出 ArrayBuffer 或 Blob，不还原 DOM；需先序列化 HTML 再解压，再用 DOMParser 或 innerHTML 安全重建节点，并手动恢复状态与事件。
DecompressionStream 本身不能直接还原 DOM 结构。它只负责二进制数据的异步解压（如 gzip、deflate），输出仍是 ArrayBuffer 或 Blob，不涉及 HTML 解析或 DOM 构建。要“还原复杂的原始 DOM 结构”，需分两步：先解压得到压缩后的 HTML 字符串或序列化数据，再通过 DOM API（如 DOMParser 或 innerHTML）重建节点。
1. 确保压缩内容是可还原的 DOM 序列化格式
浏览器无法从任意二进制流中“猜出”DOM。你必须提前将 DOM 正确序列化为文本格式再压缩：
-
推荐用 innerHTML + text/html：对目标容器调用
element.innerHTML获取 HTML 字符串，用TextEncoder转为 Uint8Array，再压缩上传/存储 -
避免直接压缩 DOM 对象：
JSON.stringify(document.body)会失败（DOM 节点不可序列化），也不保留事件、表单状态等运行时信息 -
若需保存状态，额外记录关键属性：例如 input 的
value、checkbox 的checked、自定义 dataset，解压后手动恢复
2. 使用 DecompressionStream 异步解压字节流
它工作在 ReadableStream 管道中，适合处理大体积压缩 HTML：
- 从
fetch()或Blob.stream()获取可读流 - 链式挂载
new DecompressionStream('gzip') - 用
stream.getReader().read()或stream.pipeThrough(new TextDecoderStream())得到解压后的字符串
示例片段：
const response = await fetch('/dom-archive.gz');const body = response.body;
const decompressed = body.pipeThrough(new DecompressionStream('gzip'));
const text = await new Response(decompressed).text(); // 自动解码为字符串
3. 安全解析并挂载还原的 DOM
拿到解压后的 HTML 字符串后，不能直接用 innerHTML 插入到现有页面（有 XSS 风险且可能破坏原有结构）：
-
用 DOMParser 创建干净文档片段：
const doc = new DOMParser().parseFromString(text, 'text/html');，然后取doc.body.children或doc.getElementById(...) -
批量插入前清空目标容器，或使用
replaceChildren(...)替换全部子节点，避免残留 -
脚本和样式不会自动执行：动态插入的
<script>默认不运行，需手动创建并 append；内联样式保留，但外部 CSS 需确保已加载
4. 注意异步时机与 DOM 就绪状态
解压和解析都是异步操作，还原后的 DOM 节点尚未被浏览器渲染树接纳：
- 插入完成后，若需测量尺寸或触发 layout，可等待
requestAnimationFrame - 若依赖 Vue/React 等框架响应式更新，不要直接操作其受控 DOM；应走对应的数据更新流程
- 事件监听需重新绑定——原生 DOM 重建后，旧的事件处理器全部失效
