1. 三个月转型AI应用前端这个计划到底靠不靠谱先把话说在前头AI应用前端工程师不是让你去训模型、调参、搞算力调度。这个岗位的核心是——把大模型的能力用前端技术包装成用户能直接用的产品。你打开任何一个AI对话网页、AI写作工具、AI画图应用看到的那层界面、交互逻辑、流式输出效果、会话管理全是这个岗位的活儿。我在前端圈混了十来年最近两年明显感觉到一个变化以前招前端问的是Vue还是React、Webpack怎么优化、首屏加载怎么压到1秒内。现在招AI应用前端面试官会问你SSE怎么处理断线重连、流式Markdown怎么边收边渲染、多轮对话的上下文怎么在前端做裁剪、Token超限了怎么给用户优雅提示。这些问题的答案传统前端教程里基本找不到。这个三个月计划就是冲着这些新问题去的。它适合什么人有三类第一类是有一定前端基础HTML/CSS/JS能写页面至少熟悉一个框架想往AI方向靠的开发者第二类是后端或全栈想补上前端交互这块短板自己能独立做出AI产品的第三类是在校生或刚入行想找一个有明确差异化的方向切入避免和纯切图仔卷同一条赛道。三个月能不能成我的判断是能入门、能做出可演示的作品、能应付初级AI应用前端的面试但别指望三个月变成资深。这个计划的目标是让你从“只会写静态页面”变成“能独立搭建一个可用的AI对话应用”中间的路要靠项目驱动来走不是靠看视频堆时长。注意这个计划默认你每天能投入3-4小时有效学习时间。如果每天只有1小时建议把周期拉长到5-6个月否则每个阶段都是夹生饭后面越学越痛苦。2. 三个月节奏怎么排从“能跑”到“能打”2.1 第一个月把AI交互的底层链路打通第一个月的核心任务只有一个——搞明白“前端怎么和大模型说上话”。很多人一上来就学LangChain、学Agent框架结果连最基本的流式请求都没手写过遇到问题根本不知道是哪一层出的错。第一周环境与基础请求。你需要准备一个能调用大模型API的Key各大厂商都有免费额度然后用最朴素的方式——fetch或axios——发一个POST请求拿到返回结果并渲染到页面上。这一步不涉及任何框架就是纯JS。目的是让你亲眼看到哦原来大模型的返回就是一段JSON里面有个字段叫content。第二周流式输出。这是AI应用前端和传统前端最大的分水岭。传统请求是“发出去→等→拿完整结果”流式是“发出去→一个字一个字往外蹦”。你需要理解SSEServer-Sent Events的基本原理知道EventSource和fetchReadableStream两种实现方式的区别。我个人的建议是先用fetchReadableStream手写一遍因为EventSource不支持POST请求而大模型调用基本都是POST。第三周Markdown渲染与代码高亮。大模型返回的内容里经常带Markdown格式尤其是代码块。你需要选一个Markdown解析库marked或markdown-it都行配合代码高亮库highlight.js或prism.js把流式收到的文本实时渲染成带格式的内容。这里有个坑流式过程中Markdown是不完整的比如代码块只收到了开头三个反引号解析库可能会报错或渲染异常。解决办法是做一个“缓冲区”等代码块闭合后再交给解析器。第四周会话管理与上下文。做一个能保存多轮对话的界面左侧是会话列表右侧是消息流。每轮对话要把历史消息带上但要注意Token限制——不能无限往上下文里塞。你需要实现一个简单的裁剪策略比如只保留最近N轮或者按Token数估算来截断。第一个月结束时你应该有一个能跑起来的AI对话页面能发消息、能流式接收、能渲染Markdown、能保存多轮会话。丑一点没关系功能跑通最重要。2.2 第二个月工程化与体验优化第二个月的目标是把“能跑”变成“好用”。这个阶段你要解决的是真实用户会碰到的问题网络断了怎么办、响应太慢怎么提示、用户误操作怎么撤销、多设备怎么同步。第一周错误处理与重试机制。大模型API不是100%稳定的超时、限流、返回格式异常都可能发生。你需要在前端做分层处理网络层捕获HTTP错误码业务层判断返回内容是否为空UI层给用户明确的提示。重试策略上我一般用指数退避——第一次等1秒第二次等2秒第三次等4秒最多重试3次。别小看这个很多AI应用用起来“感觉不稳”其实就是错误处理没做好。第二周性能优化。流式输出本身对性能压力不大但消息列表长了之后会有问题。你需要做虚拟滚动只渲染可视区域的消息否则几百条消息一上来页面直接卡死。另外输入框的防抖、发送按钮的禁用状态、加载中的骨架屏这些细节决定了用户觉得你“专业”还是“业余”。第三周状态管理与持久化。用Zustand或Pinia把会话状态管起来然后做本地持久化IndexedDB或localStorage。用户刷新页面后之前的对话还在这个体验很加分。如果要做多设备同步就需要后端配合但前端这边至少要把数据结构设计好——会话ID、消息ID、时间戳、角色标识这些字段一个都不能少。第四周做一个完整的AI应用Demo。可以是AI写作助手、AI代码解释器、AI翻译工具选一个你感兴趣的场景。要求是有明确的输入输出、有流式效果、有错误处理、有历史记录、界面干净。这个Demo就是你后面找工作或接私活的门面。2.3 第三个月进阶能力与作品打磨第三个月是拉开差距的阶段。前两个月大家做出来的东西可能差不多但第三个月你如果能掌握一些进阶能力就能在面试或实际项目中脱颖而出。第一周多模型切换与参数调节。很多AI应用支持切换不同的大模型比如快速模型和高质量模型前端需要做一个模型选择器并且把temperature、max_tokens这些参数暴露给高级用户。这里要注意不同厂商的API参数名可能不一样你需要做一层适配层把统一的参数映射到各家的实际字段。第二周Prompt工程的前端视角。前端虽然不写Prompt但需要给用户提供Prompt模板、变量填充、历史Prompt管理这些功能。你可以做一个Prompt库让用户保存常用的提示词一键填充到输入框。这个功能在实际产品中很实用尤其是面向专业用户的AI工具。第三周AI Agent的前端交互。Agent和普通对话的区别在于它会调用工具、执行多步任务。前端需要展示“正在思考”“正在调用工具”“工具返回结果”这些中间状态。这比单纯的流式输出复杂得多你需要设计一套状态机来管理Agent的执行流程。我建议先用一个简单的Agent Demo来练手比如“查天气写邮件”这种两步任务。第四周作品集整理与面试准备。把你三个月做的东西整理成2-3个完整项目每个项目写清楚解决了什么问题、用了什么技术、遇到了什么坑、怎么解决的。面试AI应用前端岗位时面试官最关心的不是你用了多少框架而是你对流式交互、错误处理、性能优化这些核心问题的理解深度。3. 核心技术点拆解流式输出到底怎么玩3.1 SSE与ReadableStream的选择逻辑流式输出是AI应用前端的命根子这块必须吃透。目前主流有两种实现方式EventSource和fetchReadableStream。EventSource的优点是简单浏览器原生支持自动重连。但它的硬伤是不支持POST请求而大模型API基本都需要POST来传消息体。所以实际项目中EventSource基本被排除。fetchReadableStream是更通用的方案。你发一个普通的fetch请求然后在response.body上拿到一个ReadableStream用getReader()逐块读取再用TextDecoder把二进制转成文本。每一块可能包含多个SSE事件你需要按\n\n分割然后解析出data:后面的内容。const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages }) }); const reader response.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const lines buffer.split(\n\n); buffer lines.pop() || ; for (const line of lines) { if (line.startsWith(data: )) { const data line.slice(6); if (data [DONE]) continue; try { const json JSON.parse(data); const content json.choices?.[0]?.delta?.content || ; if (content) appendToMessage(content); } catch (e) { console.warn(解析失败:, data); } } } }这段代码的关键点有三个第一decoder.decode要加{ stream: true }否则中文会被截断成乱码第二buffer要保留最后一个不完整的块等下一块来了再拼第三JSON.parse要包在try-catch里因为流式过程中可能收到不完整的数据。实操心得我见过太多人在这里踩坑最常见的就是中文乱码和JSON解析报错。中文乱码是因为TextDecoder没有用流式模式JSON报错是因为没有做缓冲区。这两个问题解决了流式输出就稳了。3.2 流式Markdown渲染的难点与解法大模型返回的内容经常是Markdown格式但流式过程中Markdown是不完整的。比如代码块这是解释文字 python def hello():当只收到“python\ndef hello():”的时候Markdown解析器会认为代码块没有闭合可能把后面的内容都当成代码。等闭合的反引号到了又需要重新渲染。我的解法是做一个“安全渲染”策略在流式过程中检测未闭合的代码块暂时用纯文本展示等代码块闭合后再切换成高亮渲染。具体实现上可以维护一个状态变量记录当前是否在代码块内。每次收到新内容时统计的出现次数奇数表示未闭合偶数表示已闭合。另一个坑是表格和列表的流式渲染。Markdown表格需要表头分隔行才能正确解析但流式过程中可能先收到表头分隔行还没到这时候渲染出来是乱的。我的做法是对于表格等收到分隔行后再整体渲染对于列表逐项渲染问题不大但要注意缩进层级。3.3 上下文裁剪的工程实践多轮对话必然面临Token限制。你不能把全部历史消息都发给大模型否则要么超限报错要么费用爆炸。前端需要做一层裁剪。最简单的策略是保留最近N轮对话。但N取多少合适这取决于你的模型上下文窗口和单条消息的平均长度。假设模型支持8K Token系统提示词占500每条用户消息平均100 Token每条AI回复平均300 Token那么一轮对话约400 Token。留2K给AI回复剩下5.5K可以放约13轮对话。保险起见我一般设10轮。更精细的策略是按Token数动态裁剪。你可以用一个简单的估算函数中文按1.5字符/Token英文按4字符/Token。然后从最新消息往前累加直到接近上限为止。这样比固定轮数更灵活。还有一个技巧把重要的历史信息压缩成摘要。比如前5轮对话讨论了一个项目的需求你可以让大模型生成一段摘要然后把摘要作为系统提示的一部分而不是把原始对话都带上。这个做法在长对话场景下很有效但需要额外一次API调用。4. 工具链与框架选型别为了用而用4.1 前端框架React还是Vue这个问题没有标准答案取决于你现有的技术栈。如果你已经熟悉React就用React如果熟悉Vue就用Vue。AI应用前端对框架的依赖并不深核心逻辑流式处理、状态管理在哪个框架里都差不多。不过有一个趋势值得注意React生态里AI相关的库更多一些比如Vercel AI SDK它封装了流式请求、消息管理、工具调用这些常用功能能省不少事。Vue这边也有类似的库但成熟度稍差一些。如果你是从零开始ReactNext.js的组合在AI应用开发中更常见部署也方便。我的建议是不要为了学AI前端而专门换框架。用你最熟的框架把项目做出来比花两周学一个新框架然后只写了个Hello World要划算得多。4.2 状态管理Zustand够用了AI应用的状态不算复杂主要是会话列表、当前会话、消息流、加载状态这几块。Zustand足够应付而且它的API很简洁不需要像Redux那样写一堆action和reducer。import { create } from zustand; const useChatStore create((set) ({ sessions: [], currentSessionId: null, messages: [], isLoading: false, addMessage: (message) set((state) ({ messages: [...state.messages, message] })), updateLastMessage: (content) set((state) { const messages [...state.messages]; const last messages[messages.length - 1]; if (last last.role assistant) { messages[messages.length - 1] { ...last, content: last.content content }; } return { messages }; }), setLoading: (isLoading) set({ isLoading }) }));这个store的核心是updateLastMessage流式过程中每收到一个片段就调用一次把内容追加到最后一条AI消息上。注意要用不可变更新返回新数组否则React不会重新渲染。4.3 UI组件库别自己造轮子AI应用的界面元素其实很固定消息气泡、输入框、发送按钮、加载动画、代码块、复制按钮。这些都有现成的组件库可以用比如shadcn/ui、Ant Design、Element Plus。没必要从零写CSS把时间花在核心逻辑上。但有一个组件我建议自己写消息气泡。因为AI应用的消息气泡需要支持Markdown渲染、代码高亮、复制代码、重新生成这些功能现成的组件往往不够灵活。自己写一个也不难核心就是根据role判断样式然后把内容交给Markdown渲染器。5. 常见问题与排查技巧实录5.1 流式输出中断了怎么办这是最常见的问题。用户发了一条消息AI回复到一半突然停了。原因可能有几种网络波动导致连接断开、API服务端超时、前端读取流的时候出了异常。排查思路首先看浏览器控制台有没有报错如果是网络错误检查请求的timeout设置如果是读取流的异常检查reader.read()的循环有没有正确处理done状态。另外有些API会在流结束时发送一个特殊的结束标记比如data: [DONE]前端要识别这个标记并主动结束读取否则会一直等下去。重试策略上我一般这样做如果已经收到了部分内容就把已收到的内容作为上下文重新发起请求让AI继续补全如果什么都没收到就直接重试整个请求。但要注意重试次数不能太多否则用户会觉得卡死了。5.2 中文乱码怎么解决前面提过TextDecoder要用流式模式。但还有一个隐藏问题如果服务端返回的SSE数据没有按UTF-8编码或者分块的时候把一个中文字符切成了两半也会出现乱码。解决办法是在服务端确保按UTF-8编码输出并且每次发送的数据块是完整的字符。如果服务端不好改前端可以在解码后做一个检测如果发现乱码字符比如就暂存当前块等下一块来了再一起解码。5.3 消息列表卡顿怎么优化消息多了之后每次流式更新都会触发整个列表重新渲染性能很差。优化方案有三个层次第一层用React.memo或Vue的computed缓存消息组件只有内容变化的消息才重新渲染。第二层虚拟滚动。只渲染可视区域的消息其他消息用占位符代替。react-window和vue-virtual-scroller都是成熟的方案。第三层把流式更新的粒度控制好。不要每收到一个字符就setState可以攒一小段比如每50ms或每10个字符再更新一次。这样能大幅减少渲染次数。5.4 API Key暴露了怎么办前端直接调用大模型API时Key会暴露在浏览器里。这是一个严重的安全问题。正确的做法是加一层后端代理前端请求你自己的后端后端再转发给大模型APIKey存在后端的环境变量里。如果只是本地开发或Demo可以直接调但上线前一定要加代理。代理层还可以做限流、鉴权、日志记录一举多得。问题现象可能原因排查方向解决方案流式输出中断网络波动/超时控制台网络面板指数退避重试已收内容作为上下文续写中文乱码解码方式错误检查TextDecoder配置使用{ stream: true }服务端确保UTF-8消息列表卡顿全量重新渲染React DevTools Profiler虚拟滚动批量更新API Key暴露前端直调检查网络请求加后端代理层Markdown渲染异常流式内容不完整检查代码块闭合缓冲区策略等闭合后再渲染Token超限上下文过长估算Token数保留最近N轮或动态裁剪避坑技巧我建议在开发阶段就加一个“调试面板”把每次请求的URL、请求体、响应状态、Token用量都打出来。这样出问题的时候能快速定位是哪一层的问题不用靠猜。6. 作品集怎么做出差异化三个月结束后你手里应该有两三个项目。但光有项目不够关键是怎么呈现。我见过太多人把项目往GitHub一扔README就写个“AI聊天应用”面试官根本不知道你做了什么。差异化体现在三个地方第一你有没有解决一个具体场景的问题。比如“AI辅助代码审查工具”就比“AI聊天应用”更有针对性。第二你有没有处理边界情况。比如断线重连、Token超限、并发请求冲突这些在README里写清楚面试官会觉得你考虑得周全。第三你有没有性能数据。比如“消息列表1000条时滚动帧率保持在55fps以上”这种量化指标比“优化了性能”有说服力得多。另外我建议每个项目都写一篇技术总结发在技术社区或自己的博客上。内容不用太长重点讲你遇到的一个具体问题和解决过程。比如“我是如何解决流式Markdown渲染中代码块闪烁问题的”这种文章既能展示你的技术深度又能吸引同行的关注。7. 学习资源与日常练习建议资源这块我不列具体链接因为AI领域变化太快今天推荐的库明天可能就过时了。我说几个找资源的原则官方文档永远是最好的学习材料。大模型厂商的API文档、前端框架的官方指南、流式处理相关的MDN页面这些比任何二手教程都准确。遇到问题先查官方文档再去社区搜。GitHub上的开源项目是最好的参考。搜“AI chat”或“LLM frontend”找star多的项目看他们的源码怎么处理流式、怎么做状态管理、怎么组织组件。不用全看懂挑你关心的部分看。日常练习上我建议每天花15分钟做一件事打开一个你常用的AI应用观察它的交互细节。比如输入框在AI回复时是禁用还是可编辑流式输出时滚动条是自动跟随还是固定错误提示是弹窗还是内联这些细节你注意到了就能用到自己的项目里。最后说一个我自己的体会AI应用前端这个方向技术更新快但核心能力是稳定的——对流式交互的理解、对用户体验的敏感、对边界情况的处理。把这三点练好不管底层模型怎么换、框架怎么变你都能快速适应。三个月只是一个起点真正的成长在项目里、在踩坑里、在一次次“为什么这里会出问题”的追问里。
三个月转型AI应用前端：流式输出与工程化实战计划
1. 三个月转型AI应用前端这个计划到底靠不靠谱先把话说在前头AI应用前端工程师不是让你去训模型、调参、搞算力调度。这个岗位的核心是——把大模型的能力用前端技术包装成用户能直接用的产品。你打开任何一个AI对话网页、AI写作工具、AI画图应用看到的那层界面、交互逻辑、流式输出效果、会话管理全是这个岗位的活儿。我在前端圈混了十来年最近两年明显感觉到一个变化以前招前端问的是Vue还是React、Webpack怎么优化、首屏加载怎么压到1秒内。现在招AI应用前端面试官会问你SSE怎么处理断线重连、流式Markdown怎么边收边渲染、多轮对话的上下文怎么在前端做裁剪、Token超限了怎么给用户优雅提示。这些问题的答案传统前端教程里基本找不到。这个三个月计划就是冲着这些新问题去的。它适合什么人有三类第一类是有一定前端基础HTML/CSS/JS能写页面至少熟悉一个框架想往AI方向靠的开发者第二类是后端或全栈想补上前端交互这块短板自己能独立做出AI产品的第三类是在校生或刚入行想找一个有明确差异化的方向切入避免和纯切图仔卷同一条赛道。三个月能不能成我的判断是能入门、能做出可演示的作品、能应付初级AI应用前端的面试但别指望三个月变成资深。这个计划的目标是让你从“只会写静态页面”变成“能独立搭建一个可用的AI对话应用”中间的路要靠项目驱动来走不是靠看视频堆时长。注意这个计划默认你每天能投入3-4小时有效学习时间。如果每天只有1小时建议把周期拉长到5-6个月否则每个阶段都是夹生饭后面越学越痛苦。2. 三个月节奏怎么排从“能跑”到“能打”2.1 第一个月把AI交互的底层链路打通第一个月的核心任务只有一个——搞明白“前端怎么和大模型说上话”。很多人一上来就学LangChain、学Agent框架结果连最基本的流式请求都没手写过遇到问题根本不知道是哪一层出的错。第一周环境与基础请求。你需要准备一个能调用大模型API的Key各大厂商都有免费额度然后用最朴素的方式——fetch或axios——发一个POST请求拿到返回结果并渲染到页面上。这一步不涉及任何框架就是纯JS。目的是让你亲眼看到哦原来大模型的返回就是一段JSON里面有个字段叫content。第二周流式输出。这是AI应用前端和传统前端最大的分水岭。传统请求是“发出去→等→拿完整结果”流式是“发出去→一个字一个字往外蹦”。你需要理解SSEServer-Sent Events的基本原理知道EventSource和fetchReadableStream两种实现方式的区别。我个人的建议是先用fetchReadableStream手写一遍因为EventSource不支持POST请求而大模型调用基本都是POST。第三周Markdown渲染与代码高亮。大模型返回的内容里经常带Markdown格式尤其是代码块。你需要选一个Markdown解析库marked或markdown-it都行配合代码高亮库highlight.js或prism.js把流式收到的文本实时渲染成带格式的内容。这里有个坑流式过程中Markdown是不完整的比如代码块只收到了开头三个反引号解析库可能会报错或渲染异常。解决办法是做一个“缓冲区”等代码块闭合后再交给解析器。第四周会话管理与上下文。做一个能保存多轮对话的界面左侧是会话列表右侧是消息流。每轮对话要把历史消息带上但要注意Token限制——不能无限往上下文里塞。你需要实现一个简单的裁剪策略比如只保留最近N轮或者按Token数估算来截断。第一个月结束时你应该有一个能跑起来的AI对话页面能发消息、能流式接收、能渲染Markdown、能保存多轮会话。丑一点没关系功能跑通最重要。2.2 第二个月工程化与体验优化第二个月的目标是把“能跑”变成“好用”。这个阶段你要解决的是真实用户会碰到的问题网络断了怎么办、响应太慢怎么提示、用户误操作怎么撤销、多设备怎么同步。第一周错误处理与重试机制。大模型API不是100%稳定的超时、限流、返回格式异常都可能发生。你需要在前端做分层处理网络层捕获HTTP错误码业务层判断返回内容是否为空UI层给用户明确的提示。重试策略上我一般用指数退避——第一次等1秒第二次等2秒第三次等4秒最多重试3次。别小看这个很多AI应用用起来“感觉不稳”其实就是错误处理没做好。第二周性能优化。流式输出本身对性能压力不大但消息列表长了之后会有问题。你需要做虚拟滚动只渲染可视区域的消息否则几百条消息一上来页面直接卡死。另外输入框的防抖、发送按钮的禁用状态、加载中的骨架屏这些细节决定了用户觉得你“专业”还是“业余”。第三周状态管理与持久化。用Zustand或Pinia把会话状态管起来然后做本地持久化IndexedDB或localStorage。用户刷新页面后之前的对话还在这个体验很加分。如果要做多设备同步就需要后端配合但前端这边至少要把数据结构设计好——会话ID、消息ID、时间戳、角色标识这些字段一个都不能少。第四周做一个完整的AI应用Demo。可以是AI写作助手、AI代码解释器、AI翻译工具选一个你感兴趣的场景。要求是有明确的输入输出、有流式效果、有错误处理、有历史记录、界面干净。这个Demo就是你后面找工作或接私活的门面。2.3 第三个月进阶能力与作品打磨第三个月是拉开差距的阶段。前两个月大家做出来的东西可能差不多但第三个月你如果能掌握一些进阶能力就能在面试或实际项目中脱颖而出。第一周多模型切换与参数调节。很多AI应用支持切换不同的大模型比如快速模型和高质量模型前端需要做一个模型选择器并且把temperature、max_tokens这些参数暴露给高级用户。这里要注意不同厂商的API参数名可能不一样你需要做一层适配层把统一的参数映射到各家的实际字段。第二周Prompt工程的前端视角。前端虽然不写Prompt但需要给用户提供Prompt模板、变量填充、历史Prompt管理这些功能。你可以做一个Prompt库让用户保存常用的提示词一键填充到输入框。这个功能在实际产品中很实用尤其是面向专业用户的AI工具。第三周AI Agent的前端交互。Agent和普通对话的区别在于它会调用工具、执行多步任务。前端需要展示“正在思考”“正在调用工具”“工具返回结果”这些中间状态。这比单纯的流式输出复杂得多你需要设计一套状态机来管理Agent的执行流程。我建议先用一个简单的Agent Demo来练手比如“查天气写邮件”这种两步任务。第四周作品集整理与面试准备。把你三个月做的东西整理成2-3个完整项目每个项目写清楚解决了什么问题、用了什么技术、遇到了什么坑、怎么解决的。面试AI应用前端岗位时面试官最关心的不是你用了多少框架而是你对流式交互、错误处理、性能优化这些核心问题的理解深度。3. 核心技术点拆解流式输出到底怎么玩3.1 SSE与ReadableStream的选择逻辑流式输出是AI应用前端的命根子这块必须吃透。目前主流有两种实现方式EventSource和fetchReadableStream。EventSource的优点是简单浏览器原生支持自动重连。但它的硬伤是不支持POST请求而大模型API基本都需要POST来传消息体。所以实际项目中EventSource基本被排除。fetchReadableStream是更通用的方案。你发一个普通的fetch请求然后在response.body上拿到一个ReadableStream用getReader()逐块读取再用TextDecoder把二进制转成文本。每一块可能包含多个SSE事件你需要按\n\n分割然后解析出data:后面的内容。const response await fetch(/api/chat, { method: POST, headers: { Content-Type: application/json }, body: JSON.stringify({ messages }) }); const reader response.body.getReader(); const decoder new TextDecoder(); let buffer ; while (true) { const { done, value } await reader.read(); if (done) break; buffer decoder.decode(value, { stream: true }); const lines buffer.split(\n\n); buffer lines.pop() || ; for (const line of lines) { if (line.startsWith(data: )) { const data line.slice(6); if (data [DONE]) continue; try { const json JSON.parse(data); const content json.choices?.[0]?.delta?.content || ; if (content) appendToMessage(content); } catch (e) { console.warn(解析失败:, data); } } } }这段代码的关键点有三个第一decoder.decode要加{ stream: true }否则中文会被截断成乱码第二buffer要保留最后一个不完整的块等下一块来了再拼第三JSON.parse要包在try-catch里因为流式过程中可能收到不完整的数据。实操心得我见过太多人在这里踩坑最常见的就是中文乱码和JSON解析报错。中文乱码是因为TextDecoder没有用流式模式JSON报错是因为没有做缓冲区。这两个问题解决了流式输出就稳了。3.2 流式Markdown渲染的难点与解法大模型返回的内容经常是Markdown格式但流式过程中Markdown是不完整的。比如代码块这是解释文字 python def hello():当只收到“python\ndef hello():”的时候Markdown解析器会认为代码块没有闭合可能把后面的内容都当成代码。等闭合的反引号到了又需要重新渲染。我的解法是做一个“安全渲染”策略在流式过程中检测未闭合的代码块暂时用纯文本展示等代码块闭合后再切换成高亮渲染。具体实现上可以维护一个状态变量记录当前是否在代码块内。每次收到新内容时统计的出现次数奇数表示未闭合偶数表示已闭合。另一个坑是表格和列表的流式渲染。Markdown表格需要表头分隔行才能正确解析但流式过程中可能先收到表头分隔行还没到这时候渲染出来是乱的。我的做法是对于表格等收到分隔行后再整体渲染对于列表逐项渲染问题不大但要注意缩进层级。3.3 上下文裁剪的工程实践多轮对话必然面临Token限制。你不能把全部历史消息都发给大模型否则要么超限报错要么费用爆炸。前端需要做一层裁剪。最简单的策略是保留最近N轮对话。但N取多少合适这取决于你的模型上下文窗口和单条消息的平均长度。假设模型支持8K Token系统提示词占500每条用户消息平均100 Token每条AI回复平均300 Token那么一轮对话约400 Token。留2K给AI回复剩下5.5K可以放约13轮对话。保险起见我一般设10轮。更精细的策略是按Token数动态裁剪。你可以用一个简单的估算函数中文按1.5字符/Token英文按4字符/Token。然后从最新消息往前累加直到接近上限为止。这样比固定轮数更灵活。还有一个技巧把重要的历史信息压缩成摘要。比如前5轮对话讨论了一个项目的需求你可以让大模型生成一段摘要然后把摘要作为系统提示的一部分而不是把原始对话都带上。这个做法在长对话场景下很有效但需要额外一次API调用。4. 工具链与框架选型别为了用而用4.1 前端框架React还是Vue这个问题没有标准答案取决于你现有的技术栈。如果你已经熟悉React就用React如果熟悉Vue就用Vue。AI应用前端对框架的依赖并不深核心逻辑流式处理、状态管理在哪个框架里都差不多。不过有一个趋势值得注意React生态里AI相关的库更多一些比如Vercel AI SDK它封装了流式请求、消息管理、工具调用这些常用功能能省不少事。Vue这边也有类似的库但成熟度稍差一些。如果你是从零开始ReactNext.js的组合在AI应用开发中更常见部署也方便。我的建议是不要为了学AI前端而专门换框架。用你最熟的框架把项目做出来比花两周学一个新框架然后只写了个Hello World要划算得多。4.2 状态管理Zustand够用了AI应用的状态不算复杂主要是会话列表、当前会话、消息流、加载状态这几块。Zustand足够应付而且它的API很简洁不需要像Redux那样写一堆action和reducer。import { create } from zustand; const useChatStore create((set) ({ sessions: [], currentSessionId: null, messages: [], isLoading: false, addMessage: (message) set((state) ({ messages: [...state.messages, message] })), updateLastMessage: (content) set((state) { const messages [...state.messages]; const last messages[messages.length - 1]; if (last last.role assistant) { messages[messages.length - 1] { ...last, content: last.content content }; } return { messages }; }), setLoading: (isLoading) set({ isLoading }) }));这个store的核心是updateLastMessage流式过程中每收到一个片段就调用一次把内容追加到最后一条AI消息上。注意要用不可变更新返回新数组否则React不会重新渲染。4.3 UI组件库别自己造轮子AI应用的界面元素其实很固定消息气泡、输入框、发送按钮、加载动画、代码块、复制按钮。这些都有现成的组件库可以用比如shadcn/ui、Ant Design、Element Plus。没必要从零写CSS把时间花在核心逻辑上。但有一个组件我建议自己写消息气泡。因为AI应用的消息气泡需要支持Markdown渲染、代码高亮、复制代码、重新生成这些功能现成的组件往往不够灵活。自己写一个也不难核心就是根据role判断样式然后把内容交给Markdown渲染器。5. 常见问题与排查技巧实录5.1 流式输出中断了怎么办这是最常见的问题。用户发了一条消息AI回复到一半突然停了。原因可能有几种网络波动导致连接断开、API服务端超时、前端读取流的时候出了异常。排查思路首先看浏览器控制台有没有报错如果是网络错误检查请求的timeout设置如果是读取流的异常检查reader.read()的循环有没有正确处理done状态。另外有些API会在流结束时发送一个特殊的结束标记比如data: [DONE]前端要识别这个标记并主动结束读取否则会一直等下去。重试策略上我一般这样做如果已经收到了部分内容就把已收到的内容作为上下文重新发起请求让AI继续补全如果什么都没收到就直接重试整个请求。但要注意重试次数不能太多否则用户会觉得卡死了。5.2 中文乱码怎么解决前面提过TextDecoder要用流式模式。但还有一个隐藏问题如果服务端返回的SSE数据没有按UTF-8编码或者分块的时候把一个中文字符切成了两半也会出现乱码。解决办法是在服务端确保按UTF-8编码输出并且每次发送的数据块是完整的字符。如果服务端不好改前端可以在解码后做一个检测如果发现乱码字符比如就暂存当前块等下一块来了再一起解码。5.3 消息列表卡顿怎么优化消息多了之后每次流式更新都会触发整个列表重新渲染性能很差。优化方案有三个层次第一层用React.memo或Vue的computed缓存消息组件只有内容变化的消息才重新渲染。第二层虚拟滚动。只渲染可视区域的消息其他消息用占位符代替。react-window和vue-virtual-scroller都是成熟的方案。第三层把流式更新的粒度控制好。不要每收到一个字符就setState可以攒一小段比如每50ms或每10个字符再更新一次。这样能大幅减少渲染次数。5.4 API Key暴露了怎么办前端直接调用大模型API时Key会暴露在浏览器里。这是一个严重的安全问题。正确的做法是加一层后端代理前端请求你自己的后端后端再转发给大模型APIKey存在后端的环境变量里。如果只是本地开发或Demo可以直接调但上线前一定要加代理。代理层还可以做限流、鉴权、日志记录一举多得。问题现象可能原因排查方向解决方案流式输出中断网络波动/超时控制台网络面板指数退避重试已收内容作为上下文续写中文乱码解码方式错误检查TextDecoder配置使用{ stream: true }服务端确保UTF-8消息列表卡顿全量重新渲染React DevTools Profiler虚拟滚动批量更新API Key暴露前端直调检查网络请求加后端代理层Markdown渲染异常流式内容不完整检查代码块闭合缓冲区策略等闭合后再渲染Token超限上下文过长估算Token数保留最近N轮或动态裁剪避坑技巧我建议在开发阶段就加一个“调试面板”把每次请求的URL、请求体、响应状态、Token用量都打出来。这样出问题的时候能快速定位是哪一层的问题不用靠猜。6. 作品集怎么做出差异化三个月结束后你手里应该有两三个项目。但光有项目不够关键是怎么呈现。我见过太多人把项目往GitHub一扔README就写个“AI聊天应用”面试官根本不知道你做了什么。差异化体现在三个地方第一你有没有解决一个具体场景的问题。比如“AI辅助代码审查工具”就比“AI聊天应用”更有针对性。第二你有没有处理边界情况。比如断线重连、Token超限、并发请求冲突这些在README里写清楚面试官会觉得你考虑得周全。第三你有没有性能数据。比如“消息列表1000条时滚动帧率保持在55fps以上”这种量化指标比“优化了性能”有说服力得多。另外我建议每个项目都写一篇技术总结发在技术社区或自己的博客上。内容不用太长重点讲你遇到的一个具体问题和解决过程。比如“我是如何解决流式Markdown渲染中代码块闪烁问题的”这种文章既能展示你的技术深度又能吸引同行的关注。7. 学习资源与日常练习建议资源这块我不列具体链接因为AI领域变化太快今天推荐的库明天可能就过时了。我说几个找资源的原则官方文档永远是最好的学习材料。大模型厂商的API文档、前端框架的官方指南、流式处理相关的MDN页面这些比任何二手教程都准确。遇到问题先查官方文档再去社区搜。GitHub上的开源项目是最好的参考。搜“AI chat”或“LLM frontend”找star多的项目看他们的源码怎么处理流式、怎么做状态管理、怎么组织组件。不用全看懂挑你关心的部分看。日常练习上我建议每天花15分钟做一件事打开一个你常用的AI应用观察它的交互细节。比如输入框在AI回复时是禁用还是可编辑流式输出时滚动条是自动跟随还是固定错误提示是弹窗还是内联这些细节你注意到了就能用到自己的项目里。最后说一个我自己的体会AI应用前端这个方向技术更新快但核心能力是稳定的——对流式交互的理解、对用户体验的敏感、对边界情况的处理。把这三点练好不管底层模型怎么换、框架怎么变你都能快速适应。三个月只是一个起点真正的成长在项目里、在踩坑里、在一次次“为什么这里会出问题”的追问里。