AI 应用的流式输出全链路

从 LLM 的第一个 Token 到用户屏幕上的逐字渲染——拆解流式输出的每一层。

---

1. 为什么流式输出是 AI 应用的标配

打开 ChatGPT 或 Claude，发一条消息，你会看到文字一个一个蹦出来——像有人在实时打字。这不是噱头，而是 AI 应用体验的分水岭。

这一章，我们先搞清楚一个根本问题：为什么所有主流 AI 产品都选择了流式输出？

---

1.1 一个对比实验：等待 vs 逐字呈现

先看一组直观对比：

实验：用 GPT-4 生成一篇 500 字的回答

  方案 A：非流式（一次性返回）
  ─────────────────────────────────────
  用户发送问题
    │
    │  ⏳ ...... 等待 8 秒 ......
    │  （屏幕空白，没有任何反馈）
    │
    ▼
  💬 500 字一次性出现

  方案 B：流式（逐字呈现）
  ─────────────────────────────────────
  用户发送问题
    │
    │  ⏳ 等待 0.3 秒
    │
    ▼
  💬 "在" → "在这" → "在这个" → "在这个问题" → ...
     ↑ 第一个字出现      ↑ 持续流出，8 秒后全部完成

  总时间完全相同：都是 8 秒
  用户感知完全不同：
    方案 A → "好慢啊，是不是卡了？"
    方案 B → "它在认真思考，正在回答我"

两种方案的总耗时完全一样——模型都要花 8 秒生成完整回答。但用户的心理感受截然不同。这不是技术指标的差异，而是认知心理学在起作用。

进度感知效应

人类对"等待"的忍受能力，取决于有没有进度反馈：

用户等待心理模型：

  没有反馈的等待：
    0s        3s        6s        8s
    ├─────────┼─────────┼─────────┤
    │ 还好     │ 有点慢   │ 是不是挂了？│
    │         │         │  → 焦虑上升 │

  有持续反馈的等待：
    0s        3s        6s        8s
    ├─────────┼─────────┼─────────┤
    │ 开始了   │ 在生成   │ 快完了    │
    │ → 安心   │ → 参与感 │ → 满意度高│

  心理学依据：
    • Miller (1968) 的响应时间研究：
      超过 1 秒无反馈 → 用户注意力开始漂移
      超过 10 秒无反馈 → 用户倾向于放弃
    • 进度条效应：即使实际时间不变，
      有进度指示的等待被感知为更短

核心洞察：流式输出不是让 AI "变快"了——它是把一个 8 秒的黑箱，变成了一段有参与感的实时对话。用户在等待的同时已经在阅读，等待时间被阅读时间覆盖了。

1.2 TTFT——衡量流式输出的核心指标

在流式输出的语境下，有一个指标比"总耗时"更重要——TTFT。

什么是 TTFT

TTFT（Time to First Token）= 从发送请求到收到第一个 Token 的时间

  完整时间线：

  用户发消息                  第一个 Token         最后一个 Token
       │                         │                     │
       ▼                         ▼                     ▼
  ─────┼─────────────────────────┼─────────────────────┼──▶ 时间
       │←──── TTFT ─────────────→│                     │
       │                         │←── Token 间间隔 ───→│
       │←───────────── 总耗时（TTLT）────────────────→│

  TTFT = Time to First Token（首 Token 时间）
  TTLT = Time to Last Token（总完成时间）
  ITL  = Inter-Token Latency（Token 间延迟）

为什么 TTFT 比 TTLT 更重要

用户感知对比：

  模型 A：TTFT = 0.3s，TTLT = 8s
    → 用户 0.3 秒就看到第一个字
    → 心理感受："响应好快！"
    → 然后边读边等，8 秒自然过去

  模型 B：TTFT = 3s，TTLT = 6s
    → 用户等了 3 秒才看到第一个字
    → 心理感受："怎么这么慢？"
    → 虽然总时间更短，但用户满意度更低

  结论：
    TTFT 0.3s + 总耗时 8s  >  TTFT 3s + 总耗时 6s
    ↑ 用户更喜欢这个        ↑ 虽然更快，但体感更差

影响 TTFT 的因素

TTFT 的组成部分（逐层分解）：

  用户发请求
    │
    ├── 网络延迟（Client → Server）        ~10-100ms
    ├── 后端处理（鉴权、限流、路由）        ~5-20ms
    ├── API 调用（后端 → LLM 提供商）       ~50-200ms
    ├── 模型加载 / 队列等待                  ~0-2000ms ← 波动最大
    ├── Prompt 处理（Prefill 阶段）          ~100-3000ms ← 与输入长度正相关
    │     → 输入 100 tokens  ≈ 100ms
    │     → 输入 10000 tokens ≈ 1-3s
    └── 第一个 Token 生成                    ~10-50ms
    │
    ▼
  第一个 Token 到达用户屏幕

  关键发现：
    • Prompt 越长，TTFT 越高（Prefill 是瓶颈）
    • 模型越大，TTFT 越高（计算量更大）
    • 带 RAG 的应用 TTFT 更高（要先检索再生成）

各模型的 TTFT 基准

模型	典型 TTFT	生成速度（tokens/s）	场景
GPT-4o	0.2-0.5s	80-100	最快的旗舰模型
GPT-4 Turbo	0.5-1.5s	40-60	能力强但较慢
Claude 3.5 Sonnet	0.3-0.8s	60-80	平衡型
Claude 3 Opus	0.8-2.0s	30-50	最强但最慢
Llama 3 70B (vLLM)	0.1-0.3s	40-60	本地部署，无网络延迟
Llama 3 8B (Ollama)	0.05-0.1s	30-80	小模型，极速

经验值：TTFT 控制在 1 秒以内，用户体验就是"流畅"的。超过 2 秒，用户开始焦躁。超过 5 秒，你需要一个加载动画来安抚他们。

1.3 不只是快：流式输出的产品价值

TTFT 只是冰山一角。流式输出改变的不仅是速度感知，而是整个产品交互模式。

价值 1：随时中断，节省资源

非流式的尴尬：

  用户：帮我写一篇 1000 字的文章
  AI：[生成中...... 等了 15 秒]
  AI：这是您的文章：（1000 字全部出现）
  用户：等等，第一段就跑题了……但 1000 字已经全生成了
  → 浪费了 15 秒计算 + 全部 Token 费用

流式的优势：

  用户：帮我写一篇 1000 字的文章
  AI：这是您的文章：在当今快速发展的 AI 领域——
  用户：（看到第一句就知道方向不对）停！重新来
  → 只生成了 20 个 Token，节省了 95% 的计算和费用

产品启示：流式输出让用户拥有了"实时审核"的能力——不满意就立刻打断。这对于 Token 按量计费的 API 来说，是实打实的成本节省。

价值 2：流式过程中引导交互

流式输出不等于"傻等文字跑完"——好的产品会在流式过程中做更多事：

  ┌────────────────────────────────────────┐
  │  ChatGPT / Claude 的流式增强：          │
  │                                        │
  │  📝 边生成边渲染 Markdown               │
  │     → 标题、列表、代码块实时格式化       │
  │                                        │
  │  📊 代码块生成完毕时显示"运行"按钮       │
  │     → 用户不用等全文写完就能试代码       │
  │                                        │
  │  🔗 引用来源标注实时出现                 │
  │     → 用户边读边验证                    │
  │                                        │
  │  ⏹️ "停止生成"按钮始终可见              │
  │     → 用户拥有控制权                    │
  └────────────────────────────────────────┘

  这些都依赖流式输出——
  如果是非流式，上述交互全部退化为"等加载→看结果"

价值 3：建立信任感

一个经常被忽略的维度——流式输出帮助建立用户对 AI 的信任。

信任感来源：

  1. 透明性
     → 用户能看到 AI "正在思考"
     → 不是一个黑箱吐出一坨文字
     → 类比：你更信任当面给你解释的医生，还是直接丢你一张诊断书的？

  2. 可预测性
     → 逐字出现让用户建立预期
     → "大概还有 3 秒就说完了"
     → 不确定性降低 → 焦虑降低 → 信任提升

  3. 拟人感
     → 流式输出模拟了"人在打字"的效果
     → 人类天然更信任"像人"的交互
     → 这也是为什么 ChatGPT 选择逐字渲染而非逐句

全链路预览

理解了"为什么要流式输出"，接下来的问题是：它是怎么实现的？

从 LLM 生成第一个 Token 到用户屏幕上看到第一个字，中间经过了整整 6 层：

流式输出全链路（本教程的路径）：

  ┌──────────────────────────────────────────────────────┐
  │                                                      │
  │  第 2 章        第 4 章        第 5 章        第 6 章  │
  │  ┌─────┐     ┌──────────┐  ┌──────────┐  ┌───────┐ │
  │  │ LLM ├────▶│ 提供商API ├──▶│ 后端中转  ├──▶│ 前端   │ │
  │  │     │     │ (OpenAI) │  │ (FastAPI)│  │ (React)│ │
  │  └─────┘     └──────────┘  └──────────┘  └───────┘ │
  │  Token         stream=True   Streaming     逐字      │
  │  生成           chunk 格式    Response      渲染      │
  │                                                      │
  │          第 3 章                                      │
  │          SSE / WebSocket / gRPC                       │
  │          ↑ 贯穿整个链路的传输协议                       │
  │                                                      │
  │  第 7 章：全栈实战          第 8 章：生产优化           │
  └──────────────────────────────────────────────────────┘

后续每一章拆解一层，最终在第 7 章把它们串联成一个完整的流式聊天应用。

---

本章小结

知识点	要点
流式 vs 非流式	总时间相同，但用户感知截然不同
进度感知效应	有反馈的等待被感知为更短
TTFT	Time to First Token，流式体验的核心指标
TTFT 基准	< 1s 流畅，1-2s 可接受，> 5s 需要加载动画
TTFT 瓶颈	Prefill 阶段（与输入长度正相关）
中断能力	流式输出让用户可以随时叫停，节省成本
信任感	透明性 + 可预测性 + 拟人感
全链路	LLM → 提供商 API → 后端中转 → 前端渲染

下一章预告：LLM 的 Token 生成机制 —— 从自回归解码（Autoregressive Decoding）原理开始，理解为什么 LLM 天然就是"一个一个吐 Token"的，以及 Token 编码的那些细节。