很多前端同行一听到“AI公司面试”就开始紧张总觉得要补一堆算法、要懂模型训练甚至得会写Python。其实我面完MiniMax这轮下来最大的感受是AI公司的前端面试考察的仍然是前端基本功只是场景变得更“实时”、更“重交互”而且面试官非常清楚前端在AI产品里能做什么、不能做什么。这篇文章把我的真实面试经历、每轮的考点、以及我复盘后觉得值得准备的细节全部拆开讲希望能给准备面AI方向前端岗的同学一些参考。我自己面的是MiniMax的前端岗位整体流程走完大概三周包含一轮电话沟通、两轮技术面、一轮HR面。整个过程下来方向上几乎没有考任何机器学习的内容但围绕AI应用常见的前端场景问得非常深尤其是流式输出、Web Worker、性能优化和工程化设计。1. 面试流程与整体考察思路1.1 岗位方向与业务背景MiniMax是做AI大模型应用的公司旗下产品线覆盖对话、音视频生成等场景。前端在这个体系里的位置很特殊既要承载Chat类产品的实时对话体验也要支撑视频生成、语音合成这类重交互、重状态管理的复杂界面。所以面试官在考察候选人时重点并不是你能不能写页面而是你面对“非传统前端场景”时能不能用前端手段给出可靠的方案。比如对话产品里的流式输出本质上是一个持续推送的异步数据流前端要处理的不只是渲染还有中断、重连、并发消息、滚动性能、虚拟列表等一系列问题。这比普通管理后台的表格页面要复杂得多也是MiniMax这类公司愿意在面试里花大量时间深挖的方向。1.2 各轮次面试的考察重点我整理了一下我经历的三轮面试大致侧重点轮次时长侧重点第一轮技术面60分钟JS基础、事件循环、手写代码第二轮技术面75分钟工程化、性能优化、AI场景方案设计HR面40分钟项目经历、协作方式、职业规划第一轮更像是一次“基本功体检”面试官会从你简历上的项目入手层层追问到底层原理。第二轮则是开放式的场景设计会给你一个AI产品的具体模块让你现场聊方案。HR面虽然不聊技术但会非常关注你在跨团队协作里扮演的角色以及你对AI产品本身有没有热情和理解。我的建议是如果你也想面类似的公司一定不要只刷八股文而是把每个知识点的“为什么”想清楚。面试官问“事件循环”基本不会只让你背概念而是给你一段混合了Promise、setTimeout、async/await的代码让你写出真实输出顺序再追问背后的任务队列机制。2. 核心考点拆解从事件循环到大文件上传2.1 事件循环与异步并发控制第一轮面试里事件循环几乎是必问的。面试官给了一段代码包含setTimeout、Promise.resolve、async函数和requestAnimationFrame让我写出执行顺序。说实话单纯背“微任务先于宏任务”是不够的因为async函数内部的await会改变代码的微观执行时机。比如这段代码async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test(); console.log(4);输出顺序是3、1、4、2。原因是async函数执行到await时会立即返回一个Promise后续代码被放入微任务队列。这个“立即返回”的机制很多人会忽略导致输出顺序判断错误。面试官还追问了一个问题如果用setTimeout实现一个任务队列怎么控制最大并发数这其实是前端上传、消息推送、批量请求场景里常遇到的工程问题。思路是维护一个执行中的计数器每次启动任务时检查是否达到并发上限。2.2 大文件上传与Web Worker热词里频繁出现“前端使用worker上传大文件”这正好也是我面试中遇到的一个题目如果让你实现一个大文件上传组件你会考虑哪些问题这个问题非常开放但核心考察点其实是三个切片、并发控制、断点续传。切片是把一个File对象按指定大小拆成多个Blob然后用FormData逐个上传断点续传需要计算每个切片的hash服务端记录已接收的切片前端在重新上传时先请求“已上传切片列表”只补传缺失的部分。Web Worker在这种场景下的价值体现在两个地方一是计算文件hash时如果文件很大在主线程算MD5会让页面卡死应该放到Worker里做二是当用户同时上传多个文件、每个文件又有很多切片时上传状态的管理逻辑放在Worker里可以让主线程只负责渲染结果。面试官追问了一个实际工程问题如果用户停掉上传重新打开页面已经上传的切片还在吗答案是前端需要把上传进度保存到localStorage或IndexedDB重新初始化时读取进度再向后端确认哪些切片已存在。这里能看出来一个看似简单的问题背后牵扯到浏览器存储、网络请求、状态持久化等多个知识点。2.3 虚拟列表与长列表渲染对话类应用、日志展示、AI生成的代码或文本流式输出都会遇到长列表问题。MiniMax这类AI产品的界面里消息列表可能很长如果直接把几千条消息节点全部渲染到DOM里性能会非常差。虚拟列表是必聊的话题。面试官让我聊“如果让你实现一个虚拟列表你会怎么做”核心思路是外层容器固定高度内层用一个高度等于总列表高度的占位元素撑开滚动条然后根据scrollTop计算出当前可视区起始索引只渲染可视区域附近的一小部分节点。这个题目不难但面试官会追问细节如果列表项高度不固定怎么办我当时的回答是先渲染一次未截断的内容拿到每个项目实际高度后缓存起来后续滚动时直接用缓存高度计算位置。这个方法在大多数场景下够用也有优化空间但至少说明你理解虚拟列表的根本问题是什么。3. 框架原理与工程化深度追问3.1 Vue还是React框架本质是什么我简历上写的主要是Vue但面试官并不介意你用的是哪个框架而是会问“你对Vue的响应式原理理解到什么程度”。这个问题如果只回答“用Object.defineProperty或Proxy拦截数据变化”肯定是不够的。我现场从三个层面答了数据拦截、依赖收集、派发更新。Vue 2用Object.definePropertyVue 3用Proxy核心都是要在数据变化时通知到依赖它的组件依赖收集发生在render函数执行时组件渲染访问了哪个数据就把当前组件的渲染effect收集到这个数据的依赖列表里数据变化时依次触发这些effect组件重新渲染。面试官接着问了一个很有深度的问题为什么Vue 3改成Proxy之后框架层面就不需要$set了这个问题的关键在于Object.defineProperty只能拦截已有属性的读取和写入所以Vue 2需要特殊API来检测“新增属性”而Proxy是整个对象的代理无论属性是否存在访问都会被代理捕获自然不需要$set。这类问题在AI公司出现是因为它们的前端项目往往需要处理大量动态数据——比如一个实时消息对象会不断追加字段、一个流式响应会逐步增加内容如果你的框架不适合动态数据模型代码写起来会非常别扭。3.2 微前端的价值与风险第二轮面试聊到工程化时面试官提到“假设我们要把多个AI产品整合到一个工作台里你会怎么考虑架构”。我自然提到了微前端但面试官其实更希望你聊清楚“什么时候不该用微前端”。微前端的思路是让多个独立团队用不同技术栈开发不同子应用然后在主应用里统一加载。它的价值在于解耦团队、独立发布、渐进迁移。但代价也很明显运行时性能损耗、样式隔离困难、公共依赖重复加载、通信机制复杂。如果团队只有一个产品线、人数也不多强行上微前端只会增加维护成本。面试时可以提出更务实的方案先统一技术栈用Monorepo管理多个包通过组件库和工具库实现代码复用当业务真的需要独立部署、独立发布时再考虑用qiankun或module federation。这种思路说明你不仅懂方案还懂“取舍”在真实项目里比堆技术名词有说服力得多。3.3 构建优化与前端架构MiniMax这类公司很在乎首屏性能和包体大小因为AI应用往往要加载SDK、模型状态、协议解析等额外资源。面试官问了我简历上一个项目是怎么做构建优化的我的回答用到了三个方向代码分割、依赖优化、按需加载。代码分割用动态import把路由组件拆成独立chunk访问对应路由时才加载资源依赖优化则是把变化频率低的第三方库externals出来通过CDN引用减少打包体积按需加载对应的是业务层面的组件或模块比如一个视频编辑器的功能面板用户打开才加载。还有一个容易被忽略的点sourcemap策略。很多人上线时会把它关闭但一旦线上报错需要定位问题没有sourcemap会非常痛苦。我的做法是生产环境生成sourcemap但不公开URL上传到内部错误监控平台这样既能定位问题也不暴露源码。这种细节面试官听的时候明显眼前一亮。4. AI场景下的前端技术要点4.1 SSE与流式交互设计AI对话类产品的核心体验就是“字一个一个蹦出来”这个效果的底层技术是SSEServer-Sent Events而不是WebSocket。这是面试里反复出现的问题我也单独拿出来讲。SSE基于HTTP协议服务器可以向客户端持续推送事件流。相比WebSocketSSE的优势是协议简单、自带重连机制、不需要额外的心跳封装。对话产品只需要服务端单向推送SSE是最合适的选择。前端接入SSE的代码大致是这样的const eventSource new EventSource(/api/chat/stream); eventSource.onmessage (event) { const data JSON.parse(event.data); updateMessageContent(data.text); }; eventSource.onerror (error) { // 处理断线重连 };但面试官真正关注的是如果一条消息没推完就断开了怎么办这里的方案是给每条消息一个唯一ID前端记录最后接收到的ID重连后从服务端补齐缺失的部分。另外生成型AI的输出可能包含特殊字符、换行、Markdown代码块前端在做增量渲染时需要小心处理不能直接把半截Markdown扔给渲染器否则会出现闪烁。4.2 本地化部署与前端边界最近热词里频繁出现“MiniMax H3本地部署”“Anything-LLM”“ComfyUI”这些内容如果你面试前了解过这些概念会在谈业务场景时更有底气。Anything-LLM是一个将大模型包装成知识库应用的框架它本身是一个前端应用通过浏览器调用后端API支持多文档检索和对话。这里前端的核心挑战是如何管理一个持续增长的会话上下文上下文太长会导致Token超限前端需要在界面上提供“清空上下文”“切换知识库”等控制能力同时把上下文状态同步到URL或本地存储让用户刷新页面后还能恢复会话。ComfyUI则是节点式AI工作流工具前端需要处理大量节点的拖拽、连线、实时状态展示。它本质上是一个非常复杂的前端图形化编辑器需要用到画布渲染、自定义节点、图数据结构、序列化等能力。如果你能在面试中谈到“我很清楚AI工具类前端不只是套壳而是要把复杂状态管理做扎实”面试官会认为你真的理解这个岗位。4.3 前端如何参与AI产品迭代面试官在第二轮问了一个我没想到的问题你觉得前端在AI产品里能做什么不只是实现UI这个问题很开放但也是体现你对岗位理解深度的好机会。我的回答分了几层第一层是做沉浸式的交互体验比如流式渲染、骨架屏、优雅的加载状态第二层是做用户可控的反馈机制比如让用户看到“模型在思考中”的进度、支持打断生成、支持编辑历史消息第三层是数据采集与效果观感优化前端能记录用户对生成结果的点赞/点踩、停留时⻓、复制行为等这些数据对模型效果评估和产品迭代都有价值。我还提到了一个具体的例子AI生成的长文本如果直接渲染阅读体验很差。我们可以在前端做“结构化后处理”把模型输出的纯文本分段落、抽标题、生成目录甚至高亮关键实体。这个并不需要后端参与纯前端就能做但对产品体验的提升非常明显。这个回答说完以后面试官明显聊得更投入了。5. 手写题与算法题实录5.1 手写题可控并发的任务调度器面试现场手写题是“实现一个函数接收任务数组和并发数要求保证同时执行的任务数不超过给定值并返回所有任务结果。”这道题可以直接用Promise.resolve while循环实现关键思路是维护一组“正在执行”的Promise每完成一个就从任务队列里拿下一个。我当时写的是async function runWithConcurrency(tasks, limit) { const results new Array(tasks.length); let index 0; const workers Array.from({ length: Math.min(limit, tasks.length) }, async () { while (true) { const current index; if (current tasks.length) return; results[current] await tasks[current](); } }); await Promise.all(workers); return results; }核心在于用index作为初始化任务的下标每个worker不断取下一个任务。这样不会重复执行也让并发控制的逻辑清晰。面试官追问了异常处理如果其中一个任务reject了怎么办可以用Promise.allSettled替代Promise.all或者在每个任务外面包一层Promise.resolve().then(task).catch(e e)确保一个失败不影响其他任务。这道手写题其实是从大文件上传并发切片的场景抽象出来的。如果你平时写过上传组件的并发控制答这道题非常顺手。5.2 算法题井字棋与minimax算法的启发面试里没有直接考minimax算法但聊到AI产品时面试官问了一个策略游戏场景如果一个前端游戏产品要做简单AI对手你会怎么设计我顺口提到了minimax算法。minimax是博弈树搜索的经典算法它的思想是双方都做出最优选择轮到我时选对自己最有利的分支轮到对手时选对对手最有利也就是对我最不利的分支。井字棋因为状态空间很小可以用minimax完整搜索。如果要用JavaScript实现一个井字棋AI核心并不复杂function minimax(board, depth, isMaximizing) { const winner checkWinner(board); if (winner AI) return 10 - depth; if (winner HUMAN) return depth - 10; if (isBoardFull(board)) return 0; if (isMaximizing) { let best -Infinity; for (const move of getEmptyCells(board)) { board[move] AI; best Math.max(best, minimax(board, depth 1, false)); board[move] null; } return best; } else { let best Infinity; for (const move of getEmptyCells(board)) { board[move] HUMAN; best Math.min(best, minimax(board, depth 1, true)); board[move] null; } return best; } }面试聊到这道题重点不是真的让你实现它而是看你能不能把复杂问题拆解成递归、状态评估、回溯这三件事。前端做类似功能时AI决策往往不需要很高的强度反而要关注“响应速度”和“可解释性”这些概念跟模型后端一起协作时非常重要。5.3 开放设计题对话工作台第二轮技术面试的开放题是如果要你做一个AI对话工作台支持多会话、多模型切换、流式输出、历史记录管理你会怎么设计前端架构我当时从三个层面回答状态管理上会话列表、当前会话消息、流式状态、模型配置分开管理流式输出时的消息内容单独用一个reducer处理避免大量useEffect同步数据数据持久化上历史记录存IndexedDB降低请求频率组件划分上会话列表、消息列表、编辑器、模型设置各自独立消息列表用虚拟滚动。面试官肯定了整体思路追加了一个细节如果用户在一个会话中连续发送多条消息每条消息都在流式输出而服务端返回的顺序可能不一样你怎么保证界面显示顺序正确我的方案是每条消息在创建时就分配一个本地消息ID并把消息ID与服务端流式响应对应起来前端维护Map渲染时按本地消息ID排序。问题本身不难但说明面试官非常关注真实业务里的边角场景而不是纸上谈兵。6. 常见问题与避坑指南6.1 技术面试容易翻车的四个点第一只背结论不解释原理。比如问“为什么虚拟DOM快”你一定要说清楚它到底在什么场景下快、什么场景下不比直接操作DOM更快以及它的核心价值其实是“可预测的更新”和“跨平台能力”。面试官问任何问题都会期待你将“是什么、为什么、什么时候用”串起来。第二简历上写的项目被追问就答不上来。这个是最致命的。写在上面的每一个点你都要能说出来“为什么这么做”“有没有对比过其他方案”“性能提升了多少”。面试官对AI公司前端项目的预期是你真的做过、真的思考过而不是挂在README里的demo。第三不会表达“我不会”。AI领域很宽遇到不懂的很正常。我当时有个问题确实没准备到直接说“这块我没实际做过”然后补了一句“但基于我理解我大概会从这几个角度去查资料”。面试官对这种坦诚是认可的反而会跟你继续聊思路。第四忽略跨端和工程化问题。AI产品常常需要同时支持PC端和移动端也会用到Electron壳子前端在面试时如果对桌面端、响应式、PWA、离线缓存这些完全没概念会显得视野太窄。6.2 如何准备AI公司的前端面试如果你准备面MiniMax或其他AI公司的前端岗我给一个具体的准备清单事件循环、Promise、async/await必须能写出代码执行顺序并能解释宿主环境的任务队列机制。手写防抖节流、并发控制、虚拟列表、简易响应式系统每道题都要能讲清楚适用场景和边界问题。会聊SSE和WebSocket的选型AI对话为什么用SSE更合适断线重连怎么做。了解大文件上传的完整链路包括切片、hash、断点续传、并发控制、进度恢复。有一个拿得出手的复杂项目能讲清楚技术选型、状态管理、性能优化和数据流设计。对AI产品本身有好奇心能说出几个你常用的AI应用并分析它们前端体验上的得失。6.3 关于项目经历描述的核心建议关于项目经历我强烈建议不要只写“实现了某某模块”而是按“背景—方案—难点—结果”的结构来描述。比如不要写“实现了管理系统”要写“在xx项目中负责xx模块因为数据量大需要高效渲染采用了虚拟滚动按需加载方案首屏时间降低xx%滚动帧率稳定在50帧以上”。面试官听项目时最在意的不是你用了多牛的技术而是你有没有解决问题的能力。这个能力在AI公司同样重要因为AI产品的前端需求变化很快今天还在做对话界面的流式渲染明天可能就要做视频生成的进度管理没有迁移能力很难适应。7. 面试后的总结与思考整轮面试走下来我最大的体会有三点一是AI公司的前端面试没有想象中那么“黑科技”核心仍然是前端基本功只是问题场景更贴近真实AI产品二是一个非常关键的加分项是“理解AI应用的产品逻辑”说话之间如果自然流露出对AI应用的熟悉度会有明显帮助三是面试官对工程化深入、有性能敏感度的候选人明显更感兴趣这不是因为公司要做传统后台而是因为AI应用的交互复杂度决定了前端必须考虑这些问题。最后分享一个小技巧在面试结束的提问环节可以问面试官“你们现在前端遇到最大的技术挑战是什么”。这个提问既能体现你对岗位的关注也能让你对团队的技术方向有个判断。我当时就问了一嘴面试官聊了很多关于大模型输出在前端渲染上的一些优化实践非常坦诚。回来之后我又查了不少资料把这里面涉及的SSE重连策略、Markdown增量渲染、虚拟列表自适应高度都过了一遍。虽然这场面试最后因为薪资预期和岗位级别的匹配问题没有走完但整个面试过程带给我的学习收获远超刷十篇面经。如果你也在准备AI方向的前端岗位希望这篇内容对你有点帮助。 AI公司前端面试实录：从事件循环到SSE的实战考点
很多前端同行一听到“AI公司面试”就开始紧张总觉得要补一堆算法、要懂模型训练甚至得会写Python。其实我面完MiniMax这轮下来最大的感受是AI公司的前端面试考察的仍然是前端基本功只是场景变得更“实时”、更“重交互”而且面试官非常清楚前端在AI产品里能做什么、不能做什么。这篇文章把我的真实面试经历、每轮的考点、以及我复盘后觉得值得准备的细节全部拆开讲希望能给准备面AI方向前端岗的同学一些参考。我自己面的是MiniMax的前端岗位整体流程走完大概三周包含一轮电话沟通、两轮技术面、一轮HR面。整个过程下来方向上几乎没有考任何机器学习的内容但围绕AI应用常见的前端场景问得非常深尤其是流式输出、Web Worker、性能优化和工程化设计。1. 面试流程与整体考察思路1.1 岗位方向与业务背景MiniMax是做AI大模型应用的公司旗下产品线覆盖对话、音视频生成等场景。前端在这个体系里的位置很特殊既要承载Chat类产品的实时对话体验也要支撑视频生成、语音合成这类重交互、重状态管理的复杂界面。所以面试官在考察候选人时重点并不是你能不能写页面而是你面对“非传统前端场景”时能不能用前端手段给出可靠的方案。比如对话产品里的流式输出本质上是一个持续推送的异步数据流前端要处理的不只是渲染还有中断、重连、并发消息、滚动性能、虚拟列表等一系列问题。这比普通管理后台的表格页面要复杂得多也是MiniMax这类公司愿意在面试里花大量时间深挖的方向。1.2 各轮次面试的考察重点我整理了一下我经历的三轮面试大致侧重点轮次时长侧重点第一轮技术面60分钟JS基础、事件循环、手写代码第二轮技术面75分钟工程化、性能优化、AI场景方案设计HR面40分钟项目经历、协作方式、职业规划第一轮更像是一次“基本功体检”面试官会从你简历上的项目入手层层追问到底层原理。第二轮则是开放式的场景设计会给你一个AI产品的具体模块让你现场聊方案。HR面虽然不聊技术但会非常关注你在跨团队协作里扮演的角色以及你对AI产品本身有没有热情和理解。我的建议是如果你也想面类似的公司一定不要只刷八股文而是把每个知识点的“为什么”想清楚。面试官问“事件循环”基本不会只让你背概念而是给你一段混合了Promise、setTimeout、async/await的代码让你写出真实输出顺序再追问背后的任务队列机制。2. 核心考点拆解从事件循环到大文件上传2.1 事件循环与异步并发控制第一轮面试里事件循环几乎是必问的。面试官给了一段代码包含setTimeout、Promise.resolve、async函数和requestAnimationFrame让我写出执行顺序。说实话单纯背“微任务先于宏任务”是不够的因为async函数内部的await会改变代码的微观执行时机。比如这段代码async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test(); console.log(4);输出顺序是3、1、4、2。原因是async函数执行到await时会立即返回一个Promise后续代码被放入微任务队列。这个“立即返回”的机制很多人会忽略导致输出顺序判断错误。面试官还追问了一个问题如果用setTimeout实现一个任务队列怎么控制最大并发数这其实是前端上传、消息推送、批量请求场景里常遇到的工程问题。思路是维护一个执行中的计数器每次启动任务时检查是否达到并发上限。2.2 大文件上传与Web Worker热词里频繁出现“前端使用worker上传大文件”这正好也是我面试中遇到的一个题目如果让你实现一个大文件上传组件你会考虑哪些问题这个问题非常开放但核心考察点其实是三个切片、并发控制、断点续传。切片是把一个File对象按指定大小拆成多个Blob然后用FormData逐个上传断点续传需要计算每个切片的hash服务端记录已接收的切片前端在重新上传时先请求“已上传切片列表”只补传缺失的部分。Web Worker在这种场景下的价值体现在两个地方一是计算文件hash时如果文件很大在主线程算MD5会让页面卡死应该放到Worker里做二是当用户同时上传多个文件、每个文件又有很多切片时上传状态的管理逻辑放在Worker里可以让主线程只负责渲染结果。面试官追问了一个实际工程问题如果用户停掉上传重新打开页面已经上传的切片还在吗答案是前端需要把上传进度保存到localStorage或IndexedDB重新初始化时读取进度再向后端确认哪些切片已存在。这里能看出来一个看似简单的问题背后牵扯到浏览器存储、网络请求、状态持久化等多个知识点。2.3 虚拟列表与长列表渲染对话类应用、日志展示、AI生成的代码或文本流式输出都会遇到长列表问题。MiniMax这类AI产品的界面里消息列表可能很长如果直接把几千条消息节点全部渲染到DOM里性能会非常差。虚拟列表是必聊的话题。面试官让我聊“如果让你实现一个虚拟列表你会怎么做”核心思路是外层容器固定高度内层用一个高度等于总列表高度的占位元素撑开滚动条然后根据scrollTop计算出当前可视区起始索引只渲染可视区域附近的一小部分节点。这个题目不难但面试官会追问细节如果列表项高度不固定怎么办我当时的回答是先渲染一次未截断的内容拿到每个项目实际高度后缓存起来后续滚动时直接用缓存高度计算位置。这个方法在大多数场景下够用也有优化空间但至少说明你理解虚拟列表的根本问题是什么。3. 框架原理与工程化深度追问3.1 Vue还是React框架本质是什么我简历上写的主要是Vue但面试官并不介意你用的是哪个框架而是会问“你对Vue的响应式原理理解到什么程度”。这个问题如果只回答“用Object.defineProperty或Proxy拦截数据变化”肯定是不够的。我现场从三个层面答了数据拦截、依赖收集、派发更新。Vue 2用Object.definePropertyVue 3用Proxy核心都是要在数据变化时通知到依赖它的组件依赖收集发生在render函数执行时组件渲染访问了哪个数据就把当前组件的渲染effect收集到这个数据的依赖列表里数据变化时依次触发这些effect组件重新渲染。面试官接着问了一个很有深度的问题为什么Vue 3改成Proxy之后框架层面就不需要$set了这个问题的关键在于Object.defineProperty只能拦截已有属性的读取和写入所以Vue 2需要特殊API来检测“新增属性”而Proxy是整个对象的代理无论属性是否存在访问都会被代理捕获自然不需要$set。这类问题在AI公司出现是因为它们的前端项目往往需要处理大量动态数据——比如一个实时消息对象会不断追加字段、一个流式响应会逐步增加内容如果你的框架不适合动态数据模型代码写起来会非常别扭。3.2 微前端的价值与风险第二轮面试聊到工程化时面试官提到“假设我们要把多个AI产品整合到一个工作台里你会怎么考虑架构”。我自然提到了微前端但面试官其实更希望你聊清楚“什么时候不该用微前端”。微前端的思路是让多个独立团队用不同技术栈开发不同子应用然后在主应用里统一加载。它的价值在于解耦团队、独立发布、渐进迁移。但代价也很明显运行时性能损耗、样式隔离困难、公共依赖重复加载、通信机制复杂。如果团队只有一个产品线、人数也不多强行上微前端只会增加维护成本。面试时可以提出更务实的方案先统一技术栈用Monorepo管理多个包通过组件库和工具库实现代码复用当业务真的需要独立部署、独立发布时再考虑用qiankun或module federation。这种思路说明你不仅懂方案还懂“取舍”在真实项目里比堆技术名词有说服力得多。3.3 构建优化与前端架构MiniMax这类公司很在乎首屏性能和包体大小因为AI应用往往要加载SDK、模型状态、协议解析等额外资源。面试官问了我简历上一个项目是怎么做构建优化的我的回答用到了三个方向代码分割、依赖优化、按需加载。代码分割用动态import把路由组件拆成独立chunk访问对应路由时才加载资源依赖优化则是把变化频率低的第三方库externals出来通过CDN引用减少打包体积按需加载对应的是业务层面的组件或模块比如一个视频编辑器的功能面板用户打开才加载。还有一个容易被忽略的点sourcemap策略。很多人上线时会把它关闭但一旦线上报错需要定位问题没有sourcemap会非常痛苦。我的做法是生产环境生成sourcemap但不公开URL上传到内部错误监控平台这样既能定位问题也不暴露源码。这种细节面试官听的时候明显眼前一亮。4. AI场景下的前端技术要点4.1 SSE与流式交互设计AI对话类产品的核心体验就是“字一个一个蹦出来”这个效果的底层技术是SSEServer-Sent Events而不是WebSocket。这是面试里反复出现的问题我也单独拿出来讲。SSE基于HTTP协议服务器可以向客户端持续推送事件流。相比WebSocketSSE的优势是协议简单、自带重连机制、不需要额外的心跳封装。对话产品只需要服务端单向推送SSE是最合适的选择。前端接入SSE的代码大致是这样的const eventSource new EventSource(/api/chat/stream); eventSource.onmessage (event) { const data JSON.parse(event.data); updateMessageContent(data.text); }; eventSource.onerror (error) { // 处理断线重连 };但面试官真正关注的是如果一条消息没推完就断开了怎么办这里的方案是给每条消息一个唯一ID前端记录最后接收到的ID重连后从服务端补齐缺失的部分。另外生成型AI的输出可能包含特殊字符、换行、Markdown代码块前端在做增量渲染时需要小心处理不能直接把半截Markdown扔给渲染器否则会出现闪烁。4.2 本地化部署与前端边界最近热词里频繁出现“MiniMax H3本地部署”“Anything-LLM”“ComfyUI”这些内容如果你面试前了解过这些概念会在谈业务场景时更有底气。Anything-LLM是一个将大模型包装成知识库应用的框架它本身是一个前端应用通过浏览器调用后端API支持多文档检索和对话。这里前端的核心挑战是如何管理一个持续增长的会话上下文上下文太长会导致Token超限前端需要在界面上提供“清空上下文”“切换知识库”等控制能力同时把上下文状态同步到URL或本地存储让用户刷新页面后还能恢复会话。ComfyUI则是节点式AI工作流工具前端需要处理大量节点的拖拽、连线、实时状态展示。它本质上是一个非常复杂的前端图形化编辑器需要用到画布渲染、自定义节点、图数据结构、序列化等能力。如果你能在面试中谈到“我很清楚AI工具类前端不只是套壳而是要把复杂状态管理做扎实”面试官会认为你真的理解这个岗位。4.3 前端如何参与AI产品迭代面试官在第二轮问了一个我没想到的问题你觉得前端在AI产品里能做什么不只是实现UI这个问题很开放但也是体现你对岗位理解深度的好机会。我的回答分了几层第一层是做沉浸式的交互体验比如流式渲染、骨架屏、优雅的加载状态第二层是做用户可控的反馈机制比如让用户看到“模型在思考中”的进度、支持打断生成、支持编辑历史消息第三层是数据采集与效果观感优化前端能记录用户对生成结果的点赞/点踩、停留时⻓、复制行为等这些数据对模型效果评估和产品迭代都有价值。我还提到了一个具体的例子AI生成的长文本如果直接渲染阅读体验很差。我们可以在前端做“结构化后处理”把模型输出的纯文本分段落、抽标题、生成目录甚至高亮关键实体。这个并不需要后端参与纯前端就能做但对产品体验的提升非常明显。这个回答说完以后面试官明显聊得更投入了。5. 手写题与算法题实录5.1 手写题可控并发的任务调度器面试现场手写题是“实现一个函数接收任务数组和并发数要求保证同时执行的任务数不超过给定值并返回所有任务结果。”这道题可以直接用Promise.resolve while循环实现关键思路是维护一组“正在执行”的Promise每完成一个就从任务队列里拿下一个。我当时写的是async function runWithConcurrency(tasks, limit) { const results new Array(tasks.length); let index 0; const workers Array.from({ length: Math.min(limit, tasks.length) }, async () { while (true) { const current index; if (current tasks.length) return; results[current] await tasks[current](); } }); await Promise.all(workers); return results; }核心在于用index作为初始化任务的下标每个worker不断取下一个任务。这样不会重复执行也让并发控制的逻辑清晰。面试官追问了异常处理如果其中一个任务reject了怎么办可以用Promise.allSettled替代Promise.all或者在每个任务外面包一层Promise.resolve().then(task).catch(e e)确保一个失败不影响其他任务。这道手写题其实是从大文件上传并发切片的场景抽象出来的。如果你平时写过上传组件的并发控制答这道题非常顺手。5.2 算法题井字棋与minimax算法的启发面试里没有直接考minimax算法但聊到AI产品时面试官问了一个策略游戏场景如果一个前端游戏产品要做简单AI对手你会怎么设计我顺口提到了minimax算法。minimax是博弈树搜索的经典算法它的思想是双方都做出最优选择轮到我时选对自己最有利的分支轮到对手时选对对手最有利也就是对我最不利的分支。井字棋因为状态空间很小可以用minimax完整搜索。如果要用JavaScript实现一个井字棋AI核心并不复杂function minimax(board, depth, isMaximizing) { const winner checkWinner(board); if (winner AI) return 10 - depth; if (winner HUMAN) return depth - 10; if (isBoardFull(board)) return 0; if (isMaximizing) { let best -Infinity; for (const move of getEmptyCells(board)) { board[move] AI; best Math.max(best, minimax(board, depth 1, false)); board[move] null; } return best; } else { let best Infinity; for (const move of getEmptyCells(board)) { board[move] HUMAN; best Math.min(best, minimax(board, depth 1, true)); board[move] null; } return best; } }面试聊到这道题重点不是真的让你实现它而是看你能不能把复杂问题拆解成递归、状态评估、回溯这三件事。前端做类似功能时AI决策往往不需要很高的强度反而要关注“响应速度”和“可解释性”这些概念跟模型后端一起协作时非常重要。5.3 开放设计题对话工作台第二轮技术面试的开放题是如果要你做一个AI对话工作台支持多会话、多模型切换、流式输出、历史记录管理你会怎么设计前端架构我当时从三个层面回答状态管理上会话列表、当前会话消息、流式状态、模型配置分开管理流式输出时的消息内容单独用一个reducer处理避免大量useEffect同步数据数据持久化上历史记录存IndexedDB降低请求频率组件划分上会话列表、消息列表、编辑器、模型设置各自独立消息列表用虚拟滚动。面试官肯定了整体思路追加了一个细节如果用户在一个会话中连续发送多条消息每条消息都在流式输出而服务端返回的顺序可能不一样你怎么保证界面显示顺序正确我的方案是每条消息在创建时就分配一个本地消息ID并把消息ID与服务端流式响应对应起来前端维护Map渲染时按本地消息ID排序。问题本身不难但说明面试官非常关注真实业务里的边角场景而不是纸上谈兵。6. 常见问题与避坑指南6.1 技术面试容易翻车的四个点第一只背结论不解释原理。比如问“为什么虚拟DOM快”你一定要说清楚它到底在什么场景下快、什么场景下不比直接操作DOM更快以及它的核心价值其实是“可预测的更新”和“跨平台能力”。面试官问任何问题都会期待你将“是什么、为什么、什么时候用”串起来。第二简历上写的项目被追问就答不上来。这个是最致命的。写在上面的每一个点你都要能说出来“为什么这么做”“有没有对比过其他方案”“性能提升了多少”。面试官对AI公司前端项目的预期是你真的做过、真的思考过而不是挂在README里的demo。第三不会表达“我不会”。AI领域很宽遇到不懂的很正常。我当时有个问题确实没准备到直接说“这块我没实际做过”然后补了一句“但基于我理解我大概会从这几个角度去查资料”。面试官对这种坦诚是认可的反而会跟你继续聊思路。第四忽略跨端和工程化问题。AI产品常常需要同时支持PC端和移动端也会用到Electron壳子前端在面试时如果对桌面端、响应式、PWA、离线缓存这些完全没概念会显得视野太窄。6.2 如何准备AI公司的前端面试如果你准备面MiniMax或其他AI公司的前端岗我给一个具体的准备清单事件循环、Promise、async/await必须能写出代码执行顺序并能解释宿主环境的任务队列机制。手写防抖节流、并发控制、虚拟列表、简易响应式系统每道题都要能讲清楚适用场景和边界问题。会聊SSE和WebSocket的选型AI对话为什么用SSE更合适断线重连怎么做。了解大文件上传的完整链路包括切片、hash、断点续传、并发控制、进度恢复。有一个拿得出手的复杂项目能讲清楚技术选型、状态管理、性能优化和数据流设计。对AI产品本身有好奇心能说出几个你常用的AI应用并分析它们前端体验上的得失。6.3 关于项目经历描述的核心建议关于项目经历我强烈建议不要只写“实现了某某模块”而是按“背景—方案—难点—结果”的结构来描述。比如不要写“实现了管理系统”要写“在xx项目中负责xx模块因为数据量大需要高效渲染采用了虚拟滚动按需加载方案首屏时间降低xx%滚动帧率稳定在50帧以上”。面试官听项目时最在意的不是你用了多牛的技术而是你有没有解决问题的能力。这个能力在AI公司同样重要因为AI产品的前端需求变化很快今天还在做对话界面的流式渲染明天可能就要做视频生成的进度管理没有迁移能力很难适应。7. 面试后的总结与思考整轮面试走下来我最大的体会有三点一是AI公司的前端面试没有想象中那么“黑科技”核心仍然是前端基本功只是问题场景更贴近真实AI产品二是一个非常关键的加分项是“理解AI应用的产品逻辑”说话之间如果自然流露出对AI应用的熟悉度会有明显帮助三是面试官对工程化深入、有性能敏感度的候选人明显更感兴趣这不是因为公司要做传统后台而是因为AI应用的交互复杂度决定了前端必须考虑这些问题。最后分享一个小技巧在面试结束的提问环节可以问面试官“你们现在前端遇到最大的技术挑战是什么”。这个提问既能体现你对岗位的关注也能让你对团队的技术方向有个判断。我当时就问了一嘴面试官聊了很多关于大模型输出在前端渲染上的一些优化实践非常坦诚。回来之后我又查了不少资料把这里面涉及的SSE重连策略、Markdown增量渲染、虚拟列表自适应高度都过了一遍。虽然这场面试最后因为薪资预期和岗位级别的匹配问题没有走完但整个面试过程带给我的学习收获远超刷十篇面经。如果你也在准备AI方向的前端岗位希望这篇内容对你有点帮助。