一、为什么流式输出成了 25 年大厂面试香饽饽？
（一）AI 时代的技术浪潮
2023 年 AI 聊天机器人爆火，2024 年聚焦模型推理，2025 年迎来 AI Agent 爆发期。在这个 AI 产品井喷的时代，流式输出作为提升用户体验的核心技术，成为前端开发的必备技能。想象一下，用户和 AI 聊天时，每输入一个字都能实时看到回应，这种丝滑的交互体验，正是流式输出的魅力所在，也是大厂面试重点考察的原因。
（二）前端的核心职责
用户体验是产品的生命线，而流式输出就是前端打造优质体验的秘密武器。它能让用户更快看到响应，减少等待的焦虑。就像魔术师的障眼法，虽然后端生成数据需要时间，但前端通过流式输出让用户感觉不到等待，这就是前端懂用户心理的体现。
二、流式输出：边生成边输出的神奇魔法
（一）大模型时代的必然选择
生成式大模型如 Transformer，是一个 token 一个 token 地生成内容。流式输出能让这些 token 生成后立即传输到前端，用户不用等到整个内容生成完毕。比如 “我是你的 assistant” 这句话，每个字生成后就实时显示，用户能第一时间看到，还能节省 token 开销，毕竟每一个 token 都是真金白银啊～
（二）前后端的完美配合
后端通过 LLM API 以流式方式提供数据，前端负责实时接收并展示。这种协作模式让数据传输更高效，用户体验更流畅。就像一场接力赛，后端跑完一棒立刻交给前端，没有丝毫停顿。
三、前端实现：打造丝滑的用户体验
（一）技术方案选择
- Server-Sent Events（SSE） ：适合服务器向客户端单向推送事件，简单易用，兼容性好。通过
EventSource对象，前端能轻松监听服务器发送的事件流。 - WebSocket：全双工通信，适合需要双向交互的场景，如实时聊天。
- Fetch 流式处理：利用
ReadableStream逐块读取数据，灵活处理流式响应。
（二）具体实现步骤
以 SSE 为例，前端代码如下：
const source = new EventSource('/sse');
source.onmessage = function(event) {
const messages = document.getElementById('messages');
messages.innerHTML += event.data + '<br>';
};
这段代码创建了一个EventSource对象，连接到服务器的sse端点。当收到服务器发送的消息时，将消息内容添加到页面的messages容器中，实现实时更新。
四、后端实现：搭建高效的流式服务
（一）基于 Express 的 SSE 实现
const express = require('express');
const app = express();
app.get('/sse', (req, res) => {
res.set({
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
'Connection': 'keep-alive'
});
res.flushHeaders();
setInterval(() => {
const message = `Current Time is ${new Date().toLocaleTimeString()}`;
res.write(`data: ${message}\n\n`);
}, 1000);
});
const http = require('http').Server(app);
http.listen(1314, () => {
console.log('server is running on 1314');
});
这段代码设置了响应头，告诉客户端这是一个事件流响应，禁止缓存并保持连接。通过setInterval定时向客户端发送当前时间，模拟流式数据输出。
（二）HTTP/2 Server Push
HTTP/2 的 Server Push 技术允许服务器在客户端请求之前，主动推送资源，减少客户端的等待时间。例如，当客户端请求一个 HTML 页面时，服务器可以同时推送页面所需的 CSS、JS 等资源，提升页面加载速度。
五、全栈实战：打造一个简单的流式应用
（一）项目初始化
使用npm init -y初始化 Node 项目，安装 Express 框架：npm i express。
（二）前端页面搭建
创建index.html，包含一个显示消息的容器和监听 SSE 的脚本：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>LLM Chatbot</title>
</head>
<body>
<h1>流式输出</h1>
<div id="messages"></div>
<script>
const source = new EventSource('/sse');
source.onmessage = function(event) {
const messages = document.getElementById('messages');
messages.innerHTML += event.data + '<br>';
};
</script>
</body>
</html>
（三）后端路由设置
在 Express 中设置根路由返回前端页面，sse路由处理流式数据推送，如前文所示。
六、最佳实践与优化
（一）错误处理
前端要处理EventSource的错误事件，如连接中断时自动重试；后端要处理客户端断开连接的情况，及时清理资源，避免内存泄漏。
（二）性能优化
- 控制数据推送频率，避免频繁更新影响性能。
- 使用缓存策略，对静态资源进行缓存，减少服务器压力。
- 对大文件进行分块传输，降低内存占用。
（三）安全考量
- 对客户端输入进行验证，防止恶意数据攻击。
- 使用 HTTPS 加密通信，保护数据传输安全。
七、总结
流式输出是提升用户体验的关键技术，在 AI 时代尤为重要。通过前后端的配合，选择合适的技术方案，我们可以打造出高效、流畅的流式应用。无论是大厂面试还是实际项目开发，掌握流式输出技术都能让你脱颖而出。赶紧动手实践吧，让你的应用也拥有丝滑的流式交互体验～
