面经策

当大模型 API 响应延迟超过 1 秒时，前端可以采取哪些优化策略保证用户体验？ ​

  • 标签：大模型

🏛 业务架构师 ​

API 延迟超 1 秒时的前端优化，我按"感知层—交互层—架构层"三级讲：

感知层（最先做，成本最低）：

  • 流式输出（SSE）：首 token 200~500ms 就开始"打字机式"渲染，用户感知延迟从"等 3 秒"变成"立刻在动"——这是 LLM 产品的标配，没有理由不做；
  • 骨架屏/加载动画+阶段性提示（"正在查询知识库…"→"正在生成答案…"），把后台流程可视化，等待焦虑大幅下降。

交互层：

  • 乐观 UI：把用户消息先上屏，不等回执；
  • 预取与缓存：高频问题预生成、语义缓存命中毫秒级返回；
  • 答案分段呈现：先出结论段，细节逐步展开，配合"停止生成"按钮给用户控制感。

架构层（治本）：

  • 模型路由：简单意图走小模型/缓存，复杂任务才用旗舰模型；
  • 并行化：检索、改写、审核等环节并发执行压串行链路；
  • 降级策略：超时 N 秒自动切换备用模型或返回"稍后推送答案"。

业务视角：用户要的不是"客观快"而是"体感顺"。我的优先级永远是：先上流式输出（一天工作量，覆盖 80% 体验问题），再压后端 P95 延迟——顺序反了就是花大钱办小事。

🏗 系统架构师 ​

LLM API 延迟超 1 秒（尤其首 token 超时）是常态，前端优化我分感知层、交互层、架构层：

感知层（让等待可感知）：

  • 流式输出（SSE/WebSocket）：首 token 200ms 内开始渲染，用户对"逐字出现"的耐心远高于白屏等待——这是第一优先级，感知延迟从数秒降到亚秒；
  • 骨架屏 + 打字指示器，进度条对多步任务（Agent 场景展示步骤状态）。

交互层：

  • 乐观 UI：用户操作立即反馈，AI 结果异步替换（点赞、提交后立即显示"处理中"卡片）；
  • 分阶段呈现：先返回检索到的参考文档（快），再流式生成答案（慢）——两级时间线设计；
  • 可中断/可重试，失败静默降级到缓存或规则答案。

架构层（真正减少延迟）：

  • 请求分级：简单 query 路由到小模型（几百 ms），复杂才走大模型；
  • Prompt Cache 命中前缀，省 prefill 时间；
  • CDN/边缘部署 + 就近接入推理集群；
  • 预生成：高概率请求后台预取（用户输入停止 500ms 时预测性发起）。

量级参考：首 token 延迟（TTFT）是体验核心指标——交互类目标 <1s，流式下总时长 10s 也可接受。我的原则：先流式、再分级、后预取，别一上来就换模型。

💻 全栈开发专家 ​

API 延迟超 1 秒时，我的优化按「感知优先」排列：

  1. 流式响应（必做）：SSE 逐 token 推送，前端打字机渲染。首 token 300ms 出来，用户感知就是「快」，总时长 5 秒也不焦虑：
javascript
const es = new EventSource('/api/chat?stream=true');
es.onmessage = (e) => appendToken(JSON.parse(e.data).delta);
  1. 骨架屏 + 分区渲染：答案区域先出占位结构（标题/要点骨架），内容逐块填充；
  2. 乐观 UI / 预加载：用户输入时预取（keydown 防抖 500ms 先发预测请求）、常用问题悬停预加载、下一轮建议问题预生成；
  3. 取消与去重：AbortController 取消过期请求（用户已改问题），避免队列堆积拖慢后续；
  4. 超时降级：3 秒没首 token 自动切备用小模型或返回缓存相似答案，附「查看完整生成」入口；
  5. 语义缓存：FAQ 型 query 命中缓存毫秒级返回；
  6. CDN/边缘：静态资源和 SSE 网关就近部署，减少握手往返。

后端配合（前后端一起看才是全栈）：并行化（检索与 query 改写并行）、指定 max_tokens 上限、prompt 前缀稳定吃 token 缓存、交互类请求与生成类请求分线程池隔离。原则：让用户「看到进展」比绝对缩短总时长更有效，这是体验优化的第一定律。