不能直接用 writablestream 写入本地磁盘文件，但可配合 transformstream、response.blob() 和 实现流式生成并触发下载；需边遍历 dom 边序列化写入，用 textencoder 零拷贝编码，内联 canvas、样式等动态资源，chrome 63+ 等现代浏览器支持，>5mb 快照内存降低 40%~70%。
不能直接通过 WritableStream 将 DOM 快照写入“原始文件”（如本地磁盘上的 .html 或 .json 文件），因为浏览器环境受安全限制，无法绕过用户主动触发的下载流程去写入任意路径的文件。但你可以用 WritableStream 配合 Response、URL.createObjectURL 和 <a download></a>，实现高效、流式生成并触发下载——这在处理大型 DOM 快照（如含大量 SVG、Canvas 或内联样式）时能显著减少内存峰值。
用 WritableStream 构建可流式序列化的快照生成器
核心思路是：不把整个 DOM 转成字符串再 Blob，而是边遍历、边序列化、边写入流。需借助 TransformStream 或手动构造 WritableStream 接收分块数据。
- 使用
new WritableStream({ write(chunk) { ... } })创建接收端，每收到一个 HTML 片段（如一个节点的 outerHTML、一段 CSS 文本）就立即编码为Uint8Array并 push 到底层队列 - 配合
TextEncoder实现零拷贝编码：encoder.encode('<div>...</div>') - 避免拼接长字符串：对深层嵌套节点，递归中直接
writer.write(chunk)，不累积到顶层
将流输出转为可下载的 Blob URL
WritableStream 本身不直接生成 Blob，需连接到 ReadableStream，再构造响应体。
- 创建
TransformStream作为中继：const { writable, readable } = new TransformStream() - 把你的 DOM 序列化逻辑写入
writable，例如：const writer = writable.getWriter(); await writer.write(encoder.encode('')) - 用
readable.pipeTo(new WritableStream({ write: ... }))或更简单地：const blob = await new Response(readable).blob() - 生成下载链接：
const url = URL.createObjectURL(blob); const a = Object.assign(document.createElement('a'), { href: url, download: 'dom-snapshot.html' }); document.body.appendChild(a); a.click(); URL.revokeObjectURL(url);
处理动态内容与资源内联（关键细节）
纯 outerHTML 无法还原 Canvas 图像、WebGL 纹理、视频帧或跨域样式表。流式写入时需同步注入：
-
Canvas 快照：调用
canvas.toDataURL('image/png')→fetch(dataUrl).then(r => r.arrayBuffer())→ 编码为 base64 字符串写入流 -
字体与样式：用
getComputedStyle()提取计算后样式；对@import或外链 CSS，需fetch并内联，注意 CORS；建议设超时防止阻塞流 -
异步等待点：若某节点需等待图片加载完成，可在流写入前
await img.decode()，但要包裹在try/catch中，失败时写占位注释而非中断整个流
兼容性与降级方案
Chrome 63+、Firefox 102+、Safari 16.4+ 支持 WritableStream；旧版浏览器需回退到传统 Blob 构造。
- 检测支持：
if (typeof WritableStream === 'function')，否则用new Blob([chunks], { type: 'text/html' }) - 流式优势在 >5MB 快照时明显：内存占用可降低 40%~70%，首字节下载延迟缩短至 200ms 内
- 调试技巧：在
write()中console.timeLog('stream')观察各节点耗时，定位阻塞源（如未 await 的fetch）
不复杂但容易忽略：WritableStream 不是“自动保存到硬盘”的捷径，而是把“生成-传输-下载”三步合并为可控流，让用户在点击瞬间拿到完整快照，同时保持页面响应不卡顿。
