前端面试题：如何设计 ChatGPT 式的 Markdown 流式渲染

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

class StreamRenderer {
  private buffer = '';
  private rafId: number | null = null;

  onTokenReceived(token: string) {
    this.buffer += token;
    this.scheduleRender();
  }

  private scheduleRender() {
    if (this.rafId !== null) return;
    this.rafId = requestAnimationFrame(() => {
      this.doRender();
      this.rafId = null;
    });
  }

  private doRender() {
    // 这里只渲染“已闭合”的内容，未闭合的暂时保留
    this.renderSafeContent(this.buffer);
  }
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

// 伪代码：BFF 中转流 —— 尊重下游消费速度
const upstream = llmResponse.body!; // ReadableStream
const downstream = new TransformStream(); // 转给 SSE / UI stream

// pull 语义：下游要数据时才读上游，不要一次 read() 到 done
async function pull(controller) {
  const { value, done } = await upstreamReader.read();
  if (done) { controller.close(); return; }
  controller.enqueue(transform(value));
  // 若 controller.desiredSize <= 0，本轮 pull 结束，等下游消费后再继续
}

1
2
3
4
5
6
7
8

function renderCodeBlock(code: string, lang: string, isComplete: boolean) {
  if (!isComplete) {
    // 未闭合：纯文本展示，不做高亮
    return `<pre><code>${escapeHTML(code)}</code></pre>`;
  }
  // 已闭合：才走 highlight.js
  return `<pre><code>${hljs.highlight(code, { language: lang }).value}</code></pre>`;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

function renderLaTeX(text: string) {
  // 1. 匹配已闭合的 $$...$$ 块
  const closedBlocks = text.match(/\$\$(.*?)\$\$/gs) || [];

  // 2. 检查是否存在未闭合的 $$（出现次数为奇数则块未闭合）
  const delimiterCount = (text.match(/\$\$/g) || []).length;
  const hasUnclosedBlock = delimiterCount % 2 !== 0;

  // 3. 渲染策略：
  //    - 已闭合的 → KaTeX 渲染
  //    - 未闭合的 → 纯文本展示（不报错）
  //    - 行内 $...$ → 只匹配成对边界，避免误判价格（如 $99.9）
}

1
2
3
4
5

enum LaTeXState {
  NORMAL,
  INLINE_OPEN,
  BLOCK_OPEN
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

function findSafeCutPoint(text: string): number {
  // 代码围栏：只有 ``` 出现偶数次，最后一个 ``` 才是闭合
  const fenceCount = (text.match(/```/g) || []).length;
  const lastFenceEnd = fenceCount >= 2 && fenceCount % 2 === 0
    ? text.lastIndexOf('```') + 3
    : -1;

  // LaTeX 块：$$ 出现偶数次才算闭合
  const latexCount = (text.match(/\$\$/g) || []).length;
  const lastLatexEnd = latexCount >= 2 && latexCount % 2 === 0
    ? text.lastIndexOf('$$') + 2
    : -1;

  const lastParagraphEnd = text.lastIndexOf('\n\n');

  return Math.max(lastParagraphEnd, lastFenceEnd, lastLatexEnd);
}

1
2
3
4
5
6
7
8
9

# BFF 在 Stop + drain 上游完成后执行
def on_stop(session_id: str, visible_char_offset: int):
    full_text = ''.join(buffer_after_drain)  # drain 完上游后的全量

    # 1. 全量落盘（DB / Redis，保证刷新不丢）
    save_message(session_id, full_text)

    # 2. 记录 UI 已展示到的字符偏移（非 token 数，除非一 token 一 char）
    save_meta(session_id, visible_until=visible_char_offset)

1
2
3
4
5
6
7

fetch('/api/chat/cancel', {
  method: 'POST',
  body: JSON.stringify({
    session_id: sessionId,
    visible_char_offset: getVisiblePlainTextLength(), // 用户实际看到的纯文本长度
  }),
});

1
2
3
4
5
6

def get_history(session_id):
    full_text = load_message(session_id)
    visible_until = load_meta(session_id, "visible_until")

    # 返回全量 + 展示边界；前端首次只渲染 full_text[:visible_until]
    return {"full_text": full_text, "display_until": visible_until}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

import { startTransition, useOptimistic, useState } from 'react';

function Chat({ sendMessage }) {
  const [messages, setMessages] = useState<Message[]>([]);
  const [optimisticMessages, addOptimistic] = useOptimistic(
    messages,
    (state, newMsg: Message) => [...state, newMsg]
  );

  const handleSend = async (text: string) => {
    startTransition(async () => {
      // 乐观插入用户消息
      addOptimistic({ id: 'tmp-user', role: 'user', content: text });
      addOptimistic({ id: 'tmp-ai', role: 'assistant', content: '', isStreaming: true });

      // 真实请求：SSE 流式 append 到 messages，完成后 optimistic 自动回退
      await sendMessage(text, {
        onChunk: (chunk) => setMessages((prev) => appendAssistantChunk(prev, chunk)),
      });
    });
  };

  // 渲染 optimisticMessages，而非 messages
  return <MessageList items={optimisticMessages} />;
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

function ChatMessage({ text }: { text: string }) {
  const deferredText = useDeferredValue(text);

  // 重计算绑定 deferredText，避免每个 token 都触发 analyze
  const highlights = useMemo(
    () => analyzeHighlights(deferredText),
    [deferredText]
  );

  // 展示仍用最新 text（打字机效果），高亮可滞后一拍
  return <div>{renderWithHighlights(text, highlights)}</div>;
}