大模型对话界面的流式渲染引擎SSE 到 Markdown 的实时管道一、SSE 长连接为什么选它不选 WebSocket对话产品要的是模型生成 → 客户端消费的单向推送。WebSocket 是双向通道对纯对话场景能力过剩还得自己管心跳。SSE 基于 HTTP 长连接天然对齐这种语义复用现有 HTTP/2 即可断线后浏览器还能自动重连。某头部对话产品技术选型时把 WebSocket 跑了一周最终切回 SSE省掉一半连接管理代码。架构上必须封装一个可取消的流式消费层。关键在于用户随时可能中断当前生成点击停止按钮此时必须立即释放底层连接并丢弃尚未处理的 buffer。否则后续对话会因连接泄露而产生竞态旧消息污染新消息。这事的代价我见过太多团队栽进去。某团队上线第一周就发现老用户切回老会话时会蹦出上一段对话的尾巴。查了三天最后定位是连接没 abortbuffer 还在累加。// stream-consumer.ts // 职责管理 SSE 连接生命周期支持取消与自动重连 type StreamChunk { token: string; done: boolean }; class StreamConsumer { private abortController: AbortController | null null; private retryCount 0; private maxRetries 3; private retryDelay 1000; // 重试间隔指数退避 async connect( url: string, onChunk: (chunk: StreamChunk) void, onError: (err: Error) void ): Promisevoid { this.abortController new AbortController(); // 每次创建新连接时重置重试计数 this.retryCount 0; const attemptConnect async (): Promisevoid { try { const response await fetch(url, { signal: this.abortController!.signal, headers: { Accept: text/event-stream }, }); if (!response.ok) { throw new Error(SSE 连接异常: ${response.status}); } const reader response.body!.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); // SSE 协议以双换行分割事件 const lines buffer.split(\n\n); buffer lines.pop() || ; for (const line of lines) { const parsed this.parseSSELine(line); if (parsed) onChunk(parsed); } } } catch (err: unknown) { if ((err as Error).name AbortError) { // 用户主动取消不做重试 return; } if (this.retryCount this.maxRetries) { this.retryCount; const delay this.retryDelay * Math.pow(2, this.retryCount - 1); await new Promise((r) setTimeout(r, delay)); return attemptConnect(); } onError(err as Error); } }; return attemptConnect(); } private parseSSELine(data: string): StreamChunk | null { // 严格解析 SSE 格式忽略注释行和空行 const lines data.split(\n).filter((l) l.trim()); let token ; let done false; for (const line of lines) { if (line.startsWith(data:)) { const payload line.slice(5).trim(); if (payload [DONE]) { done true; } else { token payload; } } // event/retry/id 等字段由上层代理处理 } return token || done ? { token, done } : null; } cancel(): void { this.abortController?.abort(); this.abortController null; } }上述实现采用指数退避重试策略应对瞬态网络故障同时通过AbortController支持即时取消。parseSSELine对 SSE 协议做严格状态解析防止格式异常的 chunk 污染渲染链路。二、流式 Markdown 解析器为什么不能全量重解析直接把未闭合的 Markdown 片段送入解析器会暴露大量原始标记符号。以代码块为例模型逐个输出 标签时前三个反引号会先被解析为内联代码造成后续渲染混乱。某团队复盘时发现模型写一段长代码时正文里会蹦出几十个反引号残留肉眼可见地丑。解决方案是增量栈式解析器维护一个 Markdown AST 的构造栈每次收到新 chunk 时只追加到最后一个打开节点的 text 字段而非重新解析整个文档。// incremental-markdown.ts // 增量 Markdown 解析器维护 AST 栈防止重复解析 type MDNode | { type: root; children: MDNode[] } | { type: code_block; language: string; text: string } | { type: heading; level: number; text: string } | { type: paragraph; text: string } | { type: list; ordered: boolean; items: string[] } | { type: table; headers: string[]; rows: string[][] }; class IncrementalMarkdownParser { private stack: MDNode[] [{ type: root, children: [] }]; private partialText ; // 代码块三元组捕获状态是否在代码块中以及缓存语言标识 private inCodeBlock false; private codeLang ; private codeBuffer ; feed(chunk: string): MDNode { this.partialText chunk; // 逐字符检测边界事件只增量处理新增内容 const chars chunk.split(); for (const char of chars) { if (this.inCodeBlock) { // 用滑动窗口检测代码块结束符 this.codeBuffer char; if (this.codeBuffer.endsWith(\n) || this.codeBuffer.endsWith()) { this.emitCodeBlock(); this.inCodeBlock false; } } else { this.detectSpecialToken(char); } } return this.stack[0]; } private emitCodeBlock(): void { // 移除尾部的结束标记后存入节点 const cleaned this.codeBuffer.replace(/\n$/, ); const node: MDNode { type: code_block, language: this.codeLang || text, text: cleaned, }; this.addToCurrentParent(node); this.codeBuffer ; this.codeLang ; } private detectSpecialToken(_char: string): void { // 通过有限状态机检测 Markdown 标记起始 // 实现略匹配 /^#{1,6}\s/ 为标题/^/ 为代码块等 } private addToCurrentParent(node: MDNode): void { // 始终追加到栈顶节点的 children 数组末尾 // 栈顶一定是 root 或一个容器节点 const parent this.stack[this.stack.length - 1]; if (children in parent) { parent.children.push(node); } } getAST(): MDNode { return this.stack[0]; } reset(): void { this.stack [{ type: root, children: [] }]; this.partialText ; this.codeBuffer ; this.inCodeBlock false; } }增量解析的关键优势在于时间复杂度稳定在 O(n·m)n 为新增字符数m 为当前栈深度通常不超过 5。相比每次全量解析的 O(N²)当文档膨胀到数千字符时性能差距显著。某编辑器实测5000 字符时全量解析需要 280ms增量解析只要 12ms差距是 23 倍。三、高性能代码块渲染虚拟化让长代码不卡对话中遇到一段 200 行的代码块渲染后输入框卡到无法打字。某 IDE 集成的 AI 助手出过这事截图传遍社区最后只能紧急回滚版本。根因是 200 行 × 行号 高亮 token 800 节点每秒数十次更新直接打爆主线程。虚拟化是答案只渲染可视区域附近的行其余用占位高度撑起滚动条。ResizeObserver 监听容器变化自动调整可视行数。// code-block-renderer.ts // 虚拟化代码块行渲染仅渲染可视区域内的行 // 使用 ResizeObserver 监听容器变化而非轮询 interface CodeLine { content: string; lineNumber: number; tokens: { type: string; text: string }[]; } class VirtualizedCodeRenderer { private container: HTMLElement; private lines: CodeLine[] []; private visibleStart 0; private visibleEnd 50; // 默认可视行数 private lineHeight 22; constructor(container: HTMLElement) { this.container container; this.setupObserver(); } private setupObserver(): void { const ro new ResizeObserver((entries) { for (const entry of entries) { const height entry.contentRect.height; this.visibleEnd Math.ceil(height / this.lineHeight) 2; // 额外多渲染两行做缓冲 this.render(); } }); ro.observe(this.container); } setLines(lines: string[], lang: string): void { // 先用 Prism/Shiki 分词然后构建虚拟行列表 this.lines lines.map((text, i) ({ content: text, lineNumber: i 1, tokens: this.tokenize(text, lang), })); this.render(); } private tokenize(text: string, lang: string): { type: string; text: string }[] { // 简易分词更生产级实现可接入 Shiki 的 highlighter // 这里只做关键字标记生产环境应动态 import 语法定义 const keywords new Set([ import, export, function, const, let, var, if, else, return, async, await, class, ]); const tokens: { type: string; text: string }[] []; const words text.split(/(\s|\b)/); for (const word of words) { if (keywords.has(word)) { tokens.push({ type: keyword, text: word }); } else { tokens.push({ type: plain, text: word }); } } return tokens; } private render(): void { // 计算滚动位置决定 visibleStart const scrollTop this.container.scrollTop || 0; this.visibleStart Math.floor(scrollTop / this.lineHeight); const visibleLines this.lines.slice( this.visibleStart, this.visibleEnd ); let html ; for (const line of visibleLines) { const tokenHtml line.tokens .map((t) span classtoken-${t.type}${this.escapeHtml(t.text)}/span) .join(); html div classcode-line span classline-number${line.lineNumber}/span span classline-content${tokenHtml}/span /div; } this.container.innerHTML html; } private escapeHtml(str: string): string { // 防止用户输入 XSS虽然大模型输出经服务端过滤但前端仍要双重防御 return str .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;); } }为什么需要虚拟化因为代码块逐行渲染为 DOM 元素每行包含行号和内容两个子节点。不做虚拟化时200 行代码块在每次更新时都需要重建 400 个 DOM 节点叠加 Prism 的语法高亮遍历帧率会跌至 10fps 以下。虚拟化后仅维护 52 个 DOM 节点更新成本降低 70%。四、对话上下文管理与虚拟化长列表当对话积累到数十轮时所有消息同时存在于 DOM 中会导致内存堆积。采用 IntersectionObserver 驱动的虚拟化列表只渲染可视区域附近的消息卡片远离视口的消息节点回收到虚拟 DOM 池中。// conversation-list.ts // 虚拟化对话列表回收不可见节点以优化长对话内存 interface Message { id: string; role: user | assistant; content: string; timestamp: number; } class ConversationList { private container: HTMLElement; private messages: Message[] []; private renderedIds new Setstring(); private pool: Mapstring, HTMLElement new Map(); private intersectionObserver: IntersectionObserver; private mutationThreshold 300; // 消息总大小超过 300 时启用回收 constructor(container: HTMLElement) { this.container container; this.intersectionObserver new IntersectionObserver( (entries) { for (const entry of entries) { const id entry.target.dataset.msgId; if (!id) continue; if (!entry.isIntersecting this.messages.length this.mutationThreshold) { // 节点离开视口且列表较长时回收 DOM this.recycleNode(id, entry.target as HTMLElement); } } }, { rootMargin: 200px 0px } // 提前 200px 开始回收避免边界闪烁 ); } appendMessage(msg: Message): void { this.messages.push(msg); if (this.shouldRenderDirectly()) { this.renderMessage(msg); } } private shouldRenderDirectly(): boolean { // 如果新消息在最底部可视区域直接渲染 // 否则只更新数据待滚动到位再渲染 const lastVisible this.container.lastElementChild; if (!lastVisible) return true; const rect lastVisible.getBoundingClientRect(); return rect.bottom window.innerHeight 100; } private renderMessage(msg: Message): void { const el document.createElement(div); el.dataset.msgId msg.id; el.className message message-${msg.role}; el.textContent msg.content; this.container.appendChild(el); this.renderedIds.add(msg.id); this.intersectionObserver.observe(el); } private recycleNode(id: string, el: HTMLElement): void { this.intersectionObserver.unobserve(el); this.pool.set(id, el); el.remove(); this.renderedIds.delete(id); } scrollToBottom(): void { requestAnimationFrame(() { this.container.scrollTop this.container.scrollHeight; }); } destroy(): void { this.intersectionObserver.disconnect(); this.pool.clear(); this.renderedIds.clear(); } }回收策略的关键在于阈值判断。当对话少于 50 轮时全量渲染不构成压力但当累积到数百轮时每个消息内包含的代码块和高亮 DOM 会轻易突破内存上限。IntersectionObserver 配合 rootMargin 的 200px 缓冲区间确保用户向上翻看时节点已在回收前完成预渲染。五、总结大模型对话界面的前端渲染涉及 SSE 长连接管理、增量 Markdown 解析、代码块虚拟化渲染和对话列表内存回收四个核心环节。其中增量解析避免了全量重解析的开销虚拟化渲染控制了 DOM 规模而带指数退避的 SSE 消费者保证了连接稳定性。这四层构成了一条完整的生成 → 传输 → 解析 → 呈现流水线每层都针对大模型流式输出的特性做了专项优化。这条路在亿级对话消息下能跑通回报是值得的。
大模型对话界面的流式渲染引擎SSE 到 Markdown 的实时管道一、SSE 长连接为什么选它不选 WebSocket对话产品要的是模型生成 → 客户端消费的单向推送。WebSocket 是双向通道对纯对话场景能力过剩还得自己管心跳。SSE 基于 HTTP 长连接天然对齐这种语义复用现有 HTTP/2 即可断线后浏览器还能自动重连。某头部对话产品技术选型时把 WebSocket 跑了一周最终切回 SSE省掉一半连接管理代码。架构上必须封装一个可取消的流式消费层。关键在于用户随时可能中断当前生成点击停止按钮此时必须立即释放底层连接并丢弃尚未处理的 buffer。否则后续对话会因连接泄露而产生竞态旧消息污染新消息。这事的代价我见过太多团队栽进去。某团队上线第一周就发现老用户切回老会话时会蹦出上一段对话的尾巴。查了三天最后定位是连接没 abortbuffer 还在累加。// stream-consumer.ts // 职责管理 SSE 连接生命周期支持取消与自动重连 type StreamChunk { token: string; done: boolean }; class StreamConsumer { private abortController: AbortController | null null; private retryCount 0; private maxRetries 3; private retryDelay 1000; // 重试间隔指数退避 async connect( url: string, onChunk: (chunk: StreamChunk) void, onError: (err: Error) void ): Promisevoid { this.abortController new AbortController(); // 每次创建新连接时重置重试计数 this.retryCount 0; const attemptConnect async (): Promisevoid { try { const response await fetch(url, { signal: this.abortController!.signal, headers: { Accept: text/event-stream }, }); if (!response.ok) { throw new Error(SSE 连接异常: ${response.status}); } const reader response.body!.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); // SSE 协议以双换行分割事件 const lines buffer.split(\n\n); buffer lines.pop() || ; for (const line of lines) { const parsed this.parseSSELine(line); if (parsed) onChunk(parsed); } } } catch (err: unknown) { if ((err as Error).name AbortError) { // 用户主动取消不做重试 return; } if (this.retryCount this.maxRetries) { this.retryCount; const delay this.retryDelay * Math.pow(2, this.retryCount - 1); await new Promise((r) setTimeout(r, delay)); return attemptConnect(); } onError(err as Error); } }; return attemptConnect(); } private parseSSELine(data: string): StreamChunk | null { // 严格解析 SSE 格式忽略注释行和空行 const lines data.split(\n).filter((l) l.trim()); let token ; let done false; for (const line of lines) { if (line.startsWith(data:)) { const payload line.slice(5).trim(); if (payload [DONE]) { done true; } else { token payload; } } // event/retry/id 等字段由上层代理处理 } return token || done ? { token, done } : null; } cancel(): void { this.abortController?.abort(); this.abortController null; } }上述实现采用指数退避重试策略应对瞬态网络故障同时通过AbortController支持即时取消。parseSSELine对 SSE 协议做严格状态解析防止格式异常的 chunk 污染渲染链路。二、流式 Markdown 解析器为什么不能全量重解析直接把未闭合的 Markdown 片段送入解析器会暴露大量原始标记符号。以代码块为例模型逐个输出 标签时前三个反引号会先被解析为内联代码造成后续渲染混乱。某团队复盘时发现模型写一段长代码时正文里会蹦出几十个反引号残留肉眼可见地丑。解决方案是增量栈式解析器维护一个 Markdown AST 的构造栈每次收到新 chunk 时只追加到最后一个打开节点的 text 字段而非重新解析整个文档。// incremental-markdown.ts // 增量 Markdown 解析器维护 AST 栈防止重复解析 type MDNode | { type: root; children: MDNode[] } | { type: code_block; language: string; text: string } | { type: heading; level: number; text: string } | { type: paragraph; text: string } | { type: list; ordered: boolean; items: string[] } | { type: table; headers: string[]; rows: string[][] }; class IncrementalMarkdownParser { private stack: MDNode[] [{ type: root, children: [] }]; private partialText ; // 代码块三元组捕获状态是否在代码块中以及缓存语言标识 private inCodeBlock false; private codeLang ; private codeBuffer ; feed(chunk: string): MDNode { this.partialText chunk; // 逐字符检测边界事件只增量处理新增内容 const chars chunk.split(); for (const char of chars) { if (this.inCodeBlock) { // 用滑动窗口检测代码块结束符 this.codeBuffer char; if (this.codeBuffer.endsWith(\n) || this.codeBuffer.endsWith()) { this.emitCodeBlock(); this.inCodeBlock false; } } else { this.detectSpecialToken(char); } } return this.stack[0]; } private emitCodeBlock(): void { // 移除尾部的结束标记后存入节点 const cleaned this.codeBuffer.replace(/\n$/, ); const node: MDNode { type: code_block, language: this.codeLang || text, text: cleaned, }; this.addToCurrentParent(node); this.codeBuffer ; this.codeLang ; } private detectSpecialToken(_char: string): void { // 通过有限状态机检测 Markdown 标记起始 // 实现略匹配 /^#{1,6}\s/ 为标题/^/ 为代码块等 } private addToCurrentParent(node: MDNode): void { // 始终追加到栈顶节点的 children 数组末尾 // 栈顶一定是 root 或一个容器节点 const parent this.stack[this.stack.length - 1]; if (children in parent) { parent.children.push(node); } } getAST(): MDNode { return this.stack[0]; } reset(): void { this.stack [{ type: root, children: [] }]; this.partialText ; this.codeBuffer ; this.inCodeBlock false; } }增量解析的关键优势在于时间复杂度稳定在 O(n·m)n 为新增字符数m 为当前栈深度通常不超过 5。相比每次全量解析的 O(N²)当文档膨胀到数千字符时性能差距显著。某编辑器实测5000 字符时全量解析需要 280ms增量解析只要 12ms差距是 23 倍。三、高性能代码块渲染虚拟化让长代码不卡对话中遇到一段 200 行的代码块渲染后输入框卡到无法打字。某 IDE 集成的 AI 助手出过这事截图传遍社区最后只能紧急回滚版本。根因是 200 行 × 行号 高亮 token 800 节点每秒数十次更新直接打爆主线程。虚拟化是答案只渲染可视区域附近的行其余用占位高度撑起滚动条。ResizeObserver 监听容器变化自动调整可视行数。// code-block-renderer.ts // 虚拟化代码块行渲染仅渲染可视区域内的行 // 使用 ResizeObserver 监听容器变化而非轮询 interface CodeLine { content: string; lineNumber: number; tokens: { type: string; text: string }[]; } class VirtualizedCodeRenderer { private container: HTMLElement; private lines: CodeLine[] []; private visibleStart 0; private visibleEnd 50; // 默认可视行数 private lineHeight 22; constructor(container: HTMLElement) { this.container container; this.setupObserver(); } private setupObserver(): void { const ro new ResizeObserver((entries) { for (const entry of entries) { const height entry.contentRect.height; this.visibleEnd Math.ceil(height / this.lineHeight) 2; // 额外多渲染两行做缓冲 this.render(); } }); ro.observe(this.container); } setLines(lines: string[], lang: string): void { // 先用 Prism/Shiki 分词然后构建虚拟行列表 this.lines lines.map((text, i) ({ content: text, lineNumber: i 1, tokens: this.tokenize(text, lang), })); this.render(); } private tokenize(text: string, lang: string): { type: string; text: string }[] { // 简易分词更生产级实现可接入 Shiki 的 highlighter // 这里只做关键字标记生产环境应动态 import 语法定义 const keywords new Set([ import, export, function, const, let, var, if, else, return, async, await, class, ]); const tokens: { type: string; text: string }[] []; const words text.split(/(\s|\b)/); for (const word of words) { if (keywords.has(word)) { tokens.push({ type: keyword, text: word }); } else { tokens.push({ type: plain, text: word }); } } return tokens; } private render(): void { // 计算滚动位置决定 visibleStart const scrollTop this.container.scrollTop || 0; this.visibleStart Math.floor(scrollTop / this.lineHeight); const visibleLines this.lines.slice( this.visibleStart, this.visibleEnd ); let html ; for (const line of visibleLines) { const tokenHtml line.tokens .map((t) span classtoken-${t.type}${this.escapeHtml(t.text)}/span) .join(); html div classcode-line span classline-number${line.lineNumber}/span span classline-content${tokenHtml}/span /div; } this.container.innerHTML html; } private escapeHtml(str: string): string { // 防止用户输入 XSS虽然大模型输出经服务端过滤但前端仍要双重防御 return str .replace(//g, amp;) .replace(//g, lt;) .replace(//g, gt;) .replace(//g, quot;); } }为什么需要虚拟化因为代码块逐行渲染为 DOM 元素每行包含行号和内容两个子节点。不做虚拟化时200 行代码块在每次更新时都需要重建 400 个 DOM 节点叠加 Prism 的语法高亮遍历帧率会跌至 10fps 以下。虚拟化后仅维护 52 个 DOM 节点更新成本降低 70%。四、对话上下文管理与虚拟化长列表当对话积累到数十轮时所有消息同时存在于 DOM 中会导致内存堆积。采用 IntersectionObserver 驱动的虚拟化列表只渲染可视区域附近的消息卡片远离视口的消息节点回收到虚拟 DOM 池中。// conversation-list.ts // 虚拟化对话列表回收不可见节点以优化长对话内存 interface Message { id: string; role: user | assistant; content: string; timestamp: number; } class ConversationList { private container: HTMLElement; private messages: Message[] []; private renderedIds new Setstring(); private pool: Mapstring, HTMLElement new Map(); private intersectionObserver: IntersectionObserver; private mutationThreshold 300; // 消息总大小超过 300 时启用回收 constructor(container: HTMLElement) { this.container container; this.intersectionObserver new IntersectionObserver( (entries) { for (const entry of entries) { const id entry.target.dataset.msgId; if (!id) continue; if (!entry.isIntersecting this.messages.length this.mutationThreshold) { // 节点离开视口且列表较长时回收 DOM this.recycleNode(id, entry.target as HTMLElement); } } }, { rootMargin: 200px 0px } // 提前 200px 开始回收避免边界闪烁 ); } appendMessage(msg: Message): void { this.messages.push(msg); if (this.shouldRenderDirectly()) { this.renderMessage(msg); } } private shouldRenderDirectly(): boolean { // 如果新消息在最底部可视区域直接渲染 // 否则只更新数据待滚动到位再渲染 const lastVisible this.container.lastElementChild; if (!lastVisible) return true; const rect lastVisible.getBoundingClientRect(); return rect.bottom window.innerHeight 100; } private renderMessage(msg: Message): void { const el document.createElement(div); el.dataset.msgId msg.id; el.className message message-${msg.role}; el.textContent msg.content; this.container.appendChild(el); this.renderedIds.add(msg.id); this.intersectionObserver.observe(el); } private recycleNode(id: string, el: HTMLElement): void { this.intersectionObserver.unobserve(el); this.pool.set(id, el); el.remove(); this.renderedIds.delete(id); } scrollToBottom(): void { requestAnimationFrame(() { this.container.scrollTop this.container.scrollHeight; }); } destroy(): void { this.intersectionObserver.disconnect(); this.pool.clear(); this.renderedIds.clear(); } }回收策略的关键在于阈值判断。当对话少于 50 轮时全量渲染不构成压力但当累积到数百轮时每个消息内包含的代码块和高亮 DOM 会轻易突破内存上限。IntersectionObserver 配合 rootMargin 的 200px 缓冲区间确保用户向上翻看时节点已在回收前完成预渲染。五、总结大模型对话界面的前端渲染涉及 SSE 长连接管理、增量 Markdown 解析、代码块虚拟化渲染和对话列表内存回收四个核心环节。其中增量解析避免了全量重解析的开销虚拟化渲染控制了 DOM 规模而带指数退避的 SSE 消费者保证了连接稳定性。这四层构成了一条完整的生成 → 传输 → 解析 → 呈现流水线每层都针对大模型流式输出的特性做了专项优化。这条路在亿级对话消息下能跑通回报是值得的。
