AI流式输出实现

• AI对话的流式内容如何实现
• 如何处理大模型 Token 流式输出保证 UI 顺滑？

AI对话的流式内容如何实现

在 AI 对话中（如 ChatGPT、Claude、Gemini 等），可以看到“回答逐字输出”的效果，这种 流式响应（Streaming Response） 通常是通过 SSE 协议 实现的

• SSE（Server-Sent Events） 是一种单向通信机制，由 服务器主动推送消息 到客户端
• AI 对话中，服务端通常不会一次性返回整段文本，而是随着模型生成 token 就实时发送给客户端

如何处理大模型 Token 流式输出保证 UI 顺滑

• 我不会每来一个 Token 就 setState，而是先写入缓冲区，按 requestAnimationFrame 批量来更新视图 UI。滚动上做“在底部才自动跟随”，用户上滑时不抢焦点。这样既保证实时感，也避免卡顿和跳动。

requestAnimationFrame和requestIdleCallback

• requestAnimationFrame`：给“下一帧渲染”用的。
• requestIdleCallback`：给“主线程空闲时”用的。

API	作用	适合场景	特点
requestAnimationFrame	在浏览器下一次重绘前执行	动画、滚动效果、DOM 视觉更新	时机稳定，跟渲染同步
requestIdleCallback	在浏览器空闲时执行	预计算、埋点、缓存、低优先级任务	不保证马上执行，可能延后很久

AI应用场景：

• requestAnimationFrame 负责“让 AI 结果看起来顺滑”，
• requestIdleCallback负责“把 AI 相关的复杂的任务、复杂的计算放到空闲时做”