前端面试最常问的 AI 相关问题 + 精简标准答案

一、概念类1. 你做过 AI 相关的前端项目吗AI 工作台是什么答做过 AI 对话、AI 助手、智能工作台。AI 工作台就是集成大模型能力的一站式操作平台包含对话、流式输出、文件上传、插件调用、历史记录等。2. 前端如何和大模型对接答调用后端提供的接口不直接调用模型 API流式输出用SSE 或 Fetch Stream非流式用普通 POST 请求3. SSE 和 WebSocket 区别答SSE服务端单向推送适合流式打字机效果WebSocket全双工适合实时聊天、通知AI 流式对话优先SSE更轻量二、技术实现类高频4. 前端实现 AI 流式输出打字机效果怎么做答后端返回Content-Type: text/event-stream前端用fetch获取reader循环reader.read()读取数据流解析data: {...}逐字渲染到界面支持取消请求AbortController5. 前端实现流式输出遇到哪些问题数据分包不完整JSON 解析失败异常断开无法重试快速连续发送导致消息错乱大量消息渲染卡顿6. 怎么处理大文件上传 AI 解析答文件上传用分片上传后端返回文件 ID发送对话时带上 fileId前端做格式限制、大小限制、进度条7. 富文本、代码块、表格怎么渲染答使用react-markdown/marked代码高亮用prism.js表格、图片、链接统一渲染组件三、性能 体验类8. 长对话列表卡顿怎么优化答使用虚拟列表消息懒加载避免频繁重渲染流式内容分段更新9. 如何实现中断 AI 响应答使用AbortController中断 fetch关闭 SSE 连接状态置为完成10. AI 回答过程中页面刷新怎么办答后端支持会话恢复前端保存 conversationId重新进入自动拉取历史四、项目 业务类11. 你在 AI 项目里负责哪些前端工作标准答法负责 AI 聊天界面、流式输出、富文本渲染封装请求 Hook、历史记录管理做异常处理、重试、取消、空状态优化长列表性能、适配移动端、夜间模式12. AI 带来了哪些前端新挑战流式数据处理复杂异常、重试、超时逻辑多长对话性能压力大多模态文件、图片、语音处理复杂交互体验要求高接近真人对话13. 技术如何为 AI 业务赋能流畅对话提升用户留存流式输出降低等待焦虑多模态交互提高产品能力自动化流程减少人工成本数据埋点帮助业务优化提示词与模型五、可能被深挖的高级问题14. 前端如何安全使用 AI不暴露 Key 在前端鉴权、接口权限控制敏感信息过滤内容安全审核15. 低代码/表单/BI 如何结合 AI自然语言生成查询条件自动生成图表、SQL智能推荐字段、样式自然语言生成页面配置六、一句话万能总结面试收尾AI 前端核心就是流式渲染、对话管理、多模态交互、性能优化、异常健壮、体验流畅最终让 AI 能力更易用、更稳定地服务业务。七、AI 对话前端核心代码基于 Vue3 JS流式输出 取消请求 异常处理 消息管理精简可直接背。1. 核心流程口述版用fetchReadableStream实现流式接收AbortController实现停止响应逐段解析 SSE 格式数据实时更新消息内容打字机效果统一处理加载、异常、结束状态2. 完整代码面试书写版templatedivclasschat-box!--消息列表--divclassmessage-listreflistRefdiv v-for(item, idx) in messages:keyidxclassmessagedivclassrole{{item.role}}/divdivclasscontentv-htmlitem.content/div/div/div!--输入框--divclassinput-bartextarea v-modelinputMsgkeydown.entersend/textareabutton clicksend发送/buttonbutton clickstop:disabled!loading停止/button/div/div/templatescript setupimport{ref,onUnmounted}fromvueconstinputMsgref()constmessagesref([])constloadingref(false)constlistRefref(null)constcontrollerref(null)// 发送消息constsendasync(){if(!inputMsg.value.trim()||loading.value)returnconstmsginputMsg.value inputMsg.value// 推入用户消息messages.value.push({role:user,content:msg})// 初始化AI回复消息constaiMsg{role:ai,content:}messages.value.push(aiMsg)loading.valuetrue// 取消控制器controller.valuenewAbortController()try{constresawaitfetch(/api/chat/stream,{method:POST,headers:{Content-Type:application/json},body:JSON.stringify({message:msg}),signal:controller.value.signal})constreaderres.body.getReader()constdecodernewTextDecoder()while(true){const{done,value}awaitreader.read()if(done)break// 解析流数据constchunkdecoder.decode(value)constlineschunk.split(\n).filter(ii)for(letlineoflines){if(!line.startsWith(data: ))continueconstdataline.replace(data: ,)if(data[DONE])breakconstjsonJSON.parse(data)aiMsg.contentjson.content||}}}catch(err){aiMsg.content请求异常err.message}finally{loading.valuefalsecontroller.valuenull}}// 停止AI输出conststop(){if(controller.value){controller.value.abort()loading.valuefalse}}// 销毁时取消请求onUnmounted((){controller.value?.abort()})/script3. 面试高频亮点讲出来就加分流式输出不用等全部返回逐字展示体验更好停止输出AbortController中断请求避免无效流量SSE 格式解析标准data: {}格式兼容后端异常兜底捕获错误防止页面崩溃防重复提交loading 锁内存安全组件销毁自动取消请求4. 面试官常追问 秒答Q为什么不用 SSE 对象而用 fetch 手动读Afetch 更灵活支持 POST、传 body、更容易控制取消与异常。Q流式会出现 JSON 解析失败吗A会因为分包可能截断。后端一般返回纯文本流避免 JSON 分段。Q长对话卡顿怎么办A使用虚拟列表vue-virtual-scroller只渲染可视区域。Q怎么实现历史对话、刷新恢复A保存conversationId刷新后根据 ID 拉取历史记录。