前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速链接温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司影刀面试时间近期面试岗位AI前端一面面试背景4年前端有AI行业工作经历❓面试问题为什么会有给AI用的sandbox它的出现是为了解决什么问题有没有用过sandboxllm playground深挖sse和socket的区别为什么用sse做流式而不是socket假设你现在在用这个playground和AI进行对话发送按钮点击了此时模型在不断的一个字一个字的蹦出来在这个流式输出的过程中我刷新了页面或者切了一下对话再切回来这个时候作为用户我肯定希望对话是继续的这种场景你是怎么处理的后续面试官补充sse不是socket在断掉之后是没有重连这个概念的你是怎么保证断了之后还能继续的模型在输出的时候用户可以随时点击停止按钮让模型停下来你是怎么设计中止这部分的功能的前端会不会把fetch取消掉如果只是前端取消掉后端不是还在sse吗怎么处理的给llm的tool是前端实现的吗你们是怎样去调用web search的上面聊了这么多你有参与过agent的开发吗你对llm本身的运行过程了解吗用户的输出VS模型的输入多模态模型的消息和普通的纯文本的消息有什么区别吗为什么你需要用到swr为什么会有请求缓存你项目里写了国际化你是怎么做国际化的接上一条假设有一个论坛是全球可用的你发了一条帖子是中文的这个时候我在海外我希望能看到英文如果是你你会怎么设计后端翻译的时机是什么时候如果有同样的文本后端难道每一次都要翻译吗怎么优化因为论坛的实时性如果你缓存了但我还是得调接口才能拿到新的那缓存还有必要么来源牛客网 秋盈丶木木有话说刷前先看这是一份“含金量”极高的面经不是因为题难而是因为每道题都切中AI前端生产的核心痛点。用户自述“惨不忍睹”但能聊四五十分钟说明面试官很感兴趣。问题覆盖沙箱安全、SSE断线恢复、中止生成、多模态、国际化缓存……全是真实场景。如果你也在做AI前端这份面经是绝佳的“实战演练”建议一道一道跟着思考。 影刀AI前端一面·深度解析面试整体画像维度特征面试风格场景驱动型 深挖细节型 系统设计型难度评级⭐⭐⭐⭐⭐五星实战难题考察系统设计考察重心AI沙箱安全、SSE断线恢复、中止生成、多模态、国际化缓存特殊之处每道题都是AI应用的真实痛点考察“能不能落地”逐题深度解析一、AI沙箱Sandbox的作用与使用回答思路沙箱是AI应用中的关键安全组件。LLM可以生成代码并执行沙箱提供一个隔离环境防止恶意代码影响主程序或访问系统资源。为什么需要沙箱安全隔离防止AI生成的代码执行危险操作删除文件、网络攻击资源限制限制CPU、内存、网络访问防止无限循环耗尽资源环境可控提供一致的执行环境避免依赖冲突使用场景AI执行代码Python/JavaScript代码运行AI调用工具浏览器、计算器、数据库查询AI操作外部系统发送邮件、操作文件实现方式Web Worker隔离JS执行环境不能访问DOMiframe沙箱iframe sandbox属性限制表单、脚本、弹窗服务端容器Docker、gVisor进程级隔离// Web Worker作为轻量沙箱constworkernewWorker(sandbox.js)worker.postMessage({code:userCode})worker.onmessage(e)console.log(e.data)worker.onerror(e)console.error(沙箱错误,e)二、LLM Playground深挖回答思路这里没有具体问题但面试官会围绕你做的Playground项目展开考察技术选型、交互设计、性能优化。建议准备技术栈Monaco Editor代码编辑器、SSE流式输出、Markdown渲染核心功能参数调节temperature、top_p、多模型切换、对话历史管理难点大模型输出慢、长文本渲染、历史记录持久化三、SSE和WebSocket的区别为什么用SSE做流式回答思路参考之前多次解析的SSE vs WebSocket对比。核心区别通信方向SSE单向服务端→客户端WebSocket双向协议SSE基于HTTPWebSocket独立协议ws/wss自动重连SSE内置WebSocket需手动实现为什么AI流式选SSE方向匹配AI生成是服务端到客户端的单向流不需要双向实现简单SSE基于HTTP无需协议升级兼容性好自动重连网络波动时自动恢复虽然面试官说“SSE没有重连概念”但标准SSE确实有自动重连机制资源开销小比WebSocket轻量// SSE客户端consteventSourcenewEventSource(/api/stream)eventSource.onmessage(e)console.log(e.data)四、SSE断线后如何恢复对话回答思路这是AI对话的真实痛点。用户刷新页面或切换对话后希望之前的回复还在且能继续。解决方案消息持久化 断点续传前端设计存储消息每收到一个chunk存入localStorage/IndexedDB或通过API同步到服务端会话恢复页面加载时从存储中恢复消息列表并记录“最后一条未完成的消息”续传请求携带lastMessageId参数请求服务端从断点继续发送// 消息结构{id:msg_123,content:已收到的部分内容,status:streaming,// complete | streaming | errorchunks:[Hello, world]}// 恢复连接functionresumeConversation(conversationId,lastMessageId){consteventSourcenewEventSource(/api/stream?resumetruelastId${lastMessageId})eventSource.onmessage(e){// 追加新chunk到已有消息appendToMessage(lastMessageId,e.data)}}服务端支持缓存每个会话的生成状态generation state支持?resume参数从断点继续推送五、中止生成的设计回答思路用户点击停止按钮需要同时取消前端请求和后端生成。前端实现letabortControllernewAbortController()asyncfunctiongenerate(){try{constresponseawaitfetch(/api/stream,{signal:abortController.signal})// 处理流式数据}catch(err){if(err.nameAbortError){console.log(用户主动停止)}}}functionstop(){abortController.abort()abortControllernewAbortController()// 重置}后端处理前端取消fetch只是浏览器不再接收响应后端的SSE生成不会自动停止需要前端发送一个“停止信号”给后端如单独的HTTP请求POST /api/stop带上会话ID后端收到信号后中断LLM生成关闭SSE连接// 停止生成asyncfunctionstopGeneration(sessionId){awaitfetch(/api/stop,{method:POST,body:JSON.stringify({sessionId})})abortController.abort()}六、Tool Calling是前端实现的吗Web Search怎么调用回答思路Tool Calling函数调用是模型决定调用工具的能力前后端配合完成。流程用户提问“今天天气怎么样”模型返回函数调用{ name: get_weather, args: { city: 北京 } }前端解析函数调用调用真实API天气接口前端将结果返回给模型模型生成最终回答Web Search调用可以是前端直接调用搜索API如Bing Search API也可以是后端代理前端调用时需注意API Key安全应走后端代理// 前端处理函数调用if(response.function_call){const{name,args}response.function_callif(nameweb_search){constresultsawaitfetch(/api/search?q${args.query})// 将结果返回给模型continueConversation(results)}}七、Agent开发和LLM运行过程回答思路Agent是能自主规划、调用工具、完成复杂任务的AI。LLM运行过程输入处理Tokenization分词将文本转成Token ID模型推理Token ID → Embedding → Transformer层 → 概率分布采样根据温度temperature、Top-K、Top-P选择下一个Token迭代重复直到生成结束或达到最大长度Agent开发要点规划将复杂任务拆解成步骤记忆短期记忆对话历史 长期记忆向量数据库工具使用模型选择工具前端/后端执行反思根据执行结果调整计划八、多模态消息 vs 纯文本消息的区别回答思路多模态模型可以处理文本、图像、音频等多种输入。消息结构差异// 纯文本消息{role:user,content:描述这张图片}// 多模态消息OpenAI格式{role:user,content:[{type:text,text:描述这张图片},{type:image_url,image_url:{url:https://...}}]}前端处理差异上传图片 → 转Base64或URL构造多模态content数组渲染时需支持图片、视频等富媒体九、为什么用SWR为什么需要请求缓存回答思路SWRstale-while-revalidate是数据请求库核心是缓存和重新验证。为什么需要缓存减少请求相同数据不重复请求提升体验先展示缓存后台更新节省带宽减少数据传输SWR在AI场景的应用缓存模型列表、历史对话摘要、配置参数用户快速切换对话时先展示缓存再请求最新const{data}useSWR(/api/conversations,fetcher,{revalidateOnFocus:false,// 不自动刷新dedupingInterval:60000// 60秒内去重})十、国际化i18n的实现回答思路参考之前面经的i18n解析。基础实现importi18nfromi18nextimport{initReactI18next}fromreact-i18nexti18n.use(initReactI18next).init({resources:{en:{translation:{welcome:Welcome}},zh:{translation:{welcome:欢迎}}},lng:zh})进阶动态加载语言包、命名空间、变量插值、日期格式化。十一、论坛帖子的国际化设计中文→英文回答思路用户发中文帖海外用户希望看英文。核心是“何时翻译、如何缓存”。设计方案用户发帖时存储原文中文同时调用翻译API生成英文版本一并存储用户阅读时根据用户语言偏好返回对应版本已翻译好的前端显示直接显示服务端返回的内容优点实时性好阅读时无翻译延迟缺点存储成本翻倍发帖时略慢十二、后端翻译的时机回答思路翻译时机影响实时性和成本。三种时机写入时翻译推荐用户发帖后立即翻译并存储阅读时直接返回。适合帖子内容不频繁修改的场景。读取时翻译阅读时实时翻译适合内容实时变化如聊天室异步翻译写入后放入队列异步翻译后更新适合大量内容论坛推荐写入时翻译 缓存翻译结果。十三、翻译缓存的必要性与优化回答思路相同文本重复翻译浪费资源缓存很有必要。但论坛内容实时更新需平衡。缓存策略内容哈希作为Key相同文本直接复用翻译设置合理TTL如24小时超时后重新翻译应对内容审核规则变化主动失效帖子编辑后删除对应缓存分级缓存热门内容优先缓存冷门内容实时翻译为什么缓存仍然必要相同文本如“你好”、“谢谢”可能出现无数次即使帖子是新的其中的常用短语可以复用缓存大幅降低翻译API调用成本// 缓存结构translationCache{你好:{en:Hello,ttl:Date.now()86400000},谢谢:{en:Thanks,ttl:Date.now()86400000}}知识点速查表知识点核心要点AI沙箱安全隔离、资源限制Web Worker/iframe/Docker实现SSE vs WebSocket单向/双向、协议、自动重连、AI场景选SSE原因SSE断线恢复消息持久化 断点续传服务端缓存生成状态中止生成AbortController 后端停止信号前后端协同Tool Calling模型返回函数名参数前端/后端执行真实调用Agent规划记忆工具反思自主完成复杂任务多模态消息content数组支持text/image_url结构不同于纯文本SWR/缓存减少请求、提升体验、AI场景缓存模型列表/配置国际化i18n配置、动态加载、变量插值论坛翻译写入时翻译、内容哈希缓存、TTL失效翻译优化相同文本复用、分级缓存、热门优先 最后一句影刀这场AI一面是我见过的最贴近AI生产实际的面经之一。从沙箱安全到SSE断线恢复从中止生成到多模态消息每一道题都是真实业务中会遇到的挑战。用户自述“惨不忍睹”但能聊四五十分钟恰恰说明面试官对这些问题的兴趣。AI前端开发不再是调个API渲染一下那么简单了——你需要懂安全、懂网络、懂缓存、懂系统设计。