AI 前端开发一面面经

投递岗位：ai前端秋招生（base深圳）（但是进去先实习）

面试形式：视频面

一、项目深挖：自研Agent框架

1. 项目是个人项目还是公司项目？为什么不用LangGraph等开源框架，要自研？

答：类比的话，LangGraph这类像Spring，我自研的是类似Express的轻量级框架。原因：①开源框架比较杂，不利于观测性，自研可控可观测；②主要是出于个人学习目的。

1. 讲一下ReAct循环的完整过程，用户发一个任务到完成中间经过哪些处理？

答：最小核心循环：用户消息/上轮循环输入 → 基于OpenAI标准协议，把tools注册表传参给模型 → 模型返回tool_call（JSON schema）→ 本地execution模块执行对应工具函数（本地执行或请求远端）→ 结果追加到下一轮上下文 → 循环直到任务完成。多Agent是supervisor结构：主agent通过prompt约束派发子任务，子agent各自定义prompt、可用工具、适用场景，子agent处理具体子任务（类似递归分治）。

1. 工具调用输出不是标准JSON怎么办？

答：执行前做参数校验，出错就抛error，把error追加回上下文，让模型知道自己犯错了自我纠错。非致命错误不中断循环。

1. 多Agent怎么拆分？子agent是预定义的还是主agent动态创建的？

答：业界做法大差不差。固定模板：plan、debug、engineer等经典子agent。主agent（用强模型）做调度决策，拆分后的子任务更简单，可以调用便宜模型，节省token。

1. 超步数熔断是固定步数吗？

答：本地任务简单，用max_steps固定步数强制结束。也可以按最大时间限制。

1. 如果agent陷入循环（没到最大步数，但前10步一直在重复同一操作），怎么解决？

答：参考Claude Code的做法，检测重复调用同一命令的行为，做硬约束：注入prompt警告它"你一直在调用同一个东西"，或者强行中断。

1. 上下文怎么管理？怎么避免超出模型上限、注意力被稀释？

答：①硬性截断：超token限制就删除最旧的历史上下文；②按使用频率加权，频繁提及的不容易被删，提及少的权重低优先淘汰；③三级记忆结构（会话/文件夹/系统），上下文存成笔记，遗忘后可以按关键词搜索召回。

1. SSE协议，用户断网了怎么重连？

答：用户重新发消息重连；或者点重试按钮携带session/thread ID，服务端检索snapshot重载上下文。

1. MCP client和server的职责划分？

答：Client：管理tool注册表、carts，本地执行（本地函数或远端请求）；Server：具体功能实现（比如个人项目里的高德地图MCP封装API）。传输方式有stdio和HTTP两种。

1. 怎么看待MCP和Skill的关系？

答：共同点都是构建生态解决调用困难。MCP是把连接接口暴露给模型，工具是现成的，属于强约束"你必须这么做"；Skill是读取本地的提示性文档，更接近概率性建议"建议你这么做"。

二、问题排查

1. 用户反馈Agent卡死不动了，怎么排查？

答：先确认上下文信息。本地可以console+断点，二分法定位模块，检查后端阻塞、无限循环等。线上无法复现：通过用户ID查日志，看最近的update时间，检查是否有会话日志无限循环、内存占用异常、执行容器一直处于running状态。

三、前端性能优化

1. React页面卡顿有哪些优化手段？

答：图片懒加载（用Intersection Observer API，监听元素是否进入可视范围再加载）；虚拟列表（useEffect + Intersection Observer）；图片体积优化（缩略图、转WebP格式）。

1. 线上性能怎么监测？

答：Lighthouse测首屏等指标；组件级打点，类似进度条上报各阶段耗时，定位慢在哪个环节。

1. 掉帧（FPS）怎么检测？

（坦白工程经验有限，没答好。ai建议：requestAnimationFrame打点算帧率、Performance面板、Web Vitals的INP指标）（rAF知道的，但不知道这里用了）

1. 除了路由懒加载、资源预加载，还有什么手段优化首屏耗时？

答：①CDN就近分发，服务器配置升级（我博客从Cloudflare迁到阿里云，加载明显变快）；②打包开tree shaking，删掉无用代码缩小包体积；③图片用缩略图/WebP压缩格式。

1. 了解SSR吗？讲一下原理。

答：只停留在了解层面。Next.js服务端预渲染，提升性能和SEO。

1. 性能优化做好之后，怎么防止随项目迭代劣化？比如别人改完代码把收益抹平了，怎么防止有问题的代码上线？

答：通用思路是节点级耗时打点+可视化监控。但面试官追问落地手段时没答好（ai建议：CI/CD接入Lighthouse CI做性能回归，设性能预算performance budget，PR合并前自动跑、超阈值拦截）。

四、评测体系（我主动展示的部分）

关于问题17: 讲了自研的Agent评测系统：

• 可量化指标：tool calling成功率、是否调了正确的工具、组件渲染正确性

• LLM-as-judge：按百分比维度（清晰度、准确度等）打分

• 记录执行时间、token消耗，工具调用数据存档

• 可视化：不同模型×任务的加权通过率，fail的横线很长说明该任务大量卡顿，可关联后端日志排查

五、编码题：LRU Cache

用Map实现get/put（ES6的Map是有序的，delete后再set会移到末尾）：

• get：命中则delete+重新set刷新到最新位置，返回value

• put：已存在→删除旧的重新put；不存在→检查容量，超limit就delete最前面的键（最久未使用）

• 进阶：双向链表+HashMap实现O(1)

六、反问环节 & 面试官反馈

反问：

1. 团队业务方向 → 深圳，剪映/CapCut基建，AI提效工具+CI/CD

2. AI工具使用情况 → 公司内部有报销额度，Cursor等随便用

3. 职业规划建议 → 面试官人很好，给了真诚建议：

   • 简历上写了的东西都要熟悉（写了后端就会被问后端），精力有限就走"T字型"路线

   • Agent是必问方向，但这领域出现才一年半，大家都在探索，不用焦虑

面试官评价：前面项目问答都挺好，但缺陷是编码能力——现在大家都用AI写代码，但AI生成的代码常不符合架构规范、有坑，所以手写代码还是要练。

（主要还是主播操作过于猪鼻了细节出卡顿了啊啊啊啊啊啊）

复盘：

薄弱点：

1. 掉帧检测（requestAnimationFrame打点、Web Vitals）

2. 性能劣化防护落地（Lighthouse CI、性能预算、合并拦截）

3. SSR原理（SSR/SSG/ISR、hydration流程）

4. 手写代码：LRU、防抖节流、Promise、链表，要脱离AI辅助练，力扣继续刷

（后话：算是最近最后留存的面试了，双非本哪怕之前有笔试超常发挥全a了，但依旧卡麻==）<a href="https://www.nowcoder.com/creation/subject/eb05ef0c3aad4981af85e1f84c8d3db3" class="subject font-green" target="_blank" data-nc-subject-type="0" data-nc-subject-tag-id="0">#牛客AI配图神器#</a> <a href="https://www.nowcoder.com/creation/subject/8941dfed8c414ac7876239b4efc6a6e4" class="subject font-green" target="_blank" data-nc-subject-type="0" data-nc-subject-tag-id="0">#AI求职记录#</a>