可实现边下载边解析html流：用textdecoderstream转码+transformstream状态机捕获title/meta/script等标签，domparser解析片段；或通过沙箱iframe增量write渲染；亦可用cloudflare htmlrewriter服务端预处理。
不能直接用 ReadableStream 构建完整 DOM，但可以实现“边下载边解析”——即在 HTML 数据流到达时，增量提取关键结构（如 title、meta、script 标签、首屏元素），而无需等待整个文档加载完成。核心是结合 TextDecoderStream、TransformStream 和轻量级 HTML 片段解析逻辑，避开完整 DOM 解析器的阻塞与内存开销。
用流式解码 + 字节流切片捕获关键标签
原始 HTML 流通常是 UTF-8 编码的字节流（Uint8Array）。需先用 TextDecoderStream 转为字符串流，再通过自定义 TransformStream 实现“按需截断+增量匹配”：
- 不等待整个流结束，而是监听
<title></title>、<meta name="viewport">、<script src="..."></script>等起始/结束标签边界 - 使用状态机（而非正则）处理标签嵌套和转义，例如：遇到
<script> 后持续收集直到匹配 <code></script>（注意 CDATA 和注释干扰） - 对每个捕获到的片段，用
DOMParser().parseFromString(html, 'text/html')解析出对应节点（仅解析小片段，开销可控）
用 document.write() 或 document.open()/close() 增量写入（仅限 iframe 场景）
若目标是“可视化渲染”，可在隐藏 <iframe></iframe> 中启用流式写入：
- 创建沙箱 iframe：
const iframe = document.createElement('iframe'); iframe.sandbox = 'allow-scripts'; - 调用
iframe.contentDocument.open()，然后对每个 HTML 片段调用iframe.contentDocument.write(chunk) - 注意：必须严格按 HTML 语法顺序写入（如不能先写
再写），且write()会触发增量解析与渲染 - 该方式天然支持 script 执行、样式应用和首屏绘制，但无法从主文档直接访问 iframe 内 DOM（需 postMessage 通信）
用 HTMLRewriter（Cloudflare Workers）做服务端预处理
若 HTML 来源可控（如代理请求），可将“边下载边解析”移至边缘：
- 在 Cloudflare Worker 中用
HTMLRewriter监听element、doctype、comment等事件 - 例如：匹配
head元素时，注入预加载脚本；匹配body开始时，插入骨架屏 HTML - 重写后的流直接返回给客户端，浏览器按标准流程解析，无需前端 JS 处理流逻辑
- 优势是零客户端计算、兼容所有浏览器，适合 SSR 或 CDN 加速场景
避免常见陷阱
流式 HTML 解析极易出错，需特别注意：
-
编码问题：确保服务端明确声明
Content-Type: text/html; charset=utf-8，否则TextDecoderStream可能乱码 -
标签跨 chunk 断裂：一个
<script>...</script>可能被切在两个Uint8Array之间，状态机必须缓存未闭合标签的前缀（如只收到<scri>）</scri> -
安全限制：主文档中无法用
document.write()增量写入（会清空页面），仅 iframe 或新窗口可用；直接操作innerHTML则会反复销毁重建 DOM，失去“边解析边执行”的意义 -
Script 执行时机：流式写入 iframe 时，script 按到达顺序执行；但若用
DOMParser解析片段再appendChild，script 不会自动执行（需手动eval或insertAdjacentHTML）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
