在 AI 应用里流式输出几乎已经成了默认选项。使用者不必等模型把整段内容都生成完，界面就可以先把正在生成的部分展示来整体体验会自然很多。其实，

使用者痛点

• 性能下降内容越长。重新解析和重新渲染的成本就越高。
• 结构不稳定代码块、表格、公式这类结构化内容在未闭合时很容易渲染异常。
• 页面抖动每次全量重绘都会导致已有内容位置闪动，破坏阅读连贯性。
• 资源浪费对已经确定的文本重复解析、重复绘制，浪费 CPU 与内存。

问题的根源并不复杂：我们把“流式追加文本”当成了“重新渲染整篇文档”来处理。

至于更合适的思路。分块渲染

主要原则只有两条：

• 已经确认完成的块不再重复解析，也不再重复渲染。
• 新增内容只影响最终一个块，或者直接追加新的块。

这样一来渲染成本从“整篇文档重复处理”降到“仅处理增量部分”，页面也会保持稳定。

先定义一个中间结构

type Block = {
type的观点是，'codeblock' | 'formula' | 'table' | 'list' | 'paragraph' | 'heading';content: string;isComplete: boolean;// 是否已闭合
}，

对渲染层它未必需要完整的语法树，只关心三件事：

• 类型；
• 它是否已经稳定；
• 下一次更新时是替换还是追加。

最小示例

console.log

$$E=mc^2$$

解析后可以得到一组明确的块：

有了这种结构。前端只需要根据块类型和完成状态进行对应渲染即可，大幅简化实现逻辑。按理说，

流式场景真正难点：不完整内容

模型可能先返回类似下面的片段：

function sum {
// …尚未闭合

如果直接把它当成完整块渲染，会出现：

• 整块解析失败；按理说，
• 被误当普通文本显示；
• 后续 token 到来时整段重新纠正，引发闪烁。

需要在块结构中加入 isComplete 标记，以区分 “已闭合” 与 “待补全”。有了这个维度，渲染层可以采用两种策略：

• { isComplete: true }: 按正式样式直接渲染。
• { isComplete: false }: 使用占位或降级样式，并在后续 token 抵达时仅更新该块本身。

如何判断一个块是否完整？

• 代码块：检查是否出现配对的 分隔符。
• 公式：# 行内公式使用 $…$，怎么说呢，块级公式使用 $$…$$，需两端匹配，表格：# 表头行与分隔行均已出现且列数一致。列表：# 连续的 -、* 或数字序号未被空行打断即视为完整。段落：# 遇到空行或新块类型即认为前段落完成。

  This lightweight state‑machine approach avoids building a full AST on every update.

  Status Machine 示例

  // 简化版增量解析器
  let currentBlock = null;function feed {
  // 将新字符加入缓冲区，根据规则更新 currentBlock.isComplete
  }
  function finalize {
  if {
  emitBlock;currentBlock = null;}
  }
  

  A 更贴近实现的处理流程

  1. 接收模型流式输出的原始文本。
  2. SPLIT & INCREMENTAL PARSE： 把新增文本喂给增量解析器。仅解析新增部分，不重新遍历已有内容。
  3. CACHE 已完成块： 对已经标记为 true 的块直接复用之前生成的 DOM/React 元素。
  4. DYNAMIC UPDATE 最终一个未完成块： 仅在该块内部做局部更新或占位展示，不触发全局重绘。
  5. CLEAR & COMMIT： 当 block 完成后将其标记为 stable 并推入缓存队列，以供后续直接复用。

     The key isn’t ultra‑precise parsing;it’s keeping “update boundary” stable.

     Sensitivity 对比示例

     方案	每次新增字符的处理量
     全量重跑	重新解析 N 行 → 重绘 N 行
     分块增量	仅更新最终一个 block → 重绘 1 行

     The longer and more structured document,larger performance gap becomes.

     & 行动要点 🎯

     • Pain points 明确：性能下降、结构异常、页面抖动、资源浪费。
     • Solve by 分块渲染：将文档拆成独立 Block，并使用 {isComplete} 标记。
     • Aggressive caching：已完成 Block 永久复用，不再参与后续计算。
     • Simplify parser：采用轻量状态机而非全 AST，实现快速增量解析。怎么说呢，
     • If you adopt this pattern。you’ll see显著降低 CPU 消耗、提高 UI 稳定性还有调整使用者感知速度。