这篇面经我拖了快一个月才动笔。一方面是金九银十期间实在忙另一方面是每次回忆面试场景都觉得有些地方答得不够漂亮想认真复盘再写。先说下背景我本科计算机出身毕业后一直在某券商系金融科技子公司做前端主要做行情交易类系统四年时间从 P5 做到 P6技术栈以 Vue 为主、React 为辅中间也带过两个人。今年年初开始看机会目标很明确35K 上下、尽量能接触到 AI 相关业务的前端岗位。最终拿到两家 offer一家给到 35K15一家 34K14。这篇文章不聊简历怎么写直接把四轮面试里被问到的问题、我的回答、以及事后复盘觉得更好的答法都整理出来希望对同样在准备前端AI方向面试的同学有帮助。1. 背景为什么跳槽带着什么积累去面试1.1 我的情况与目标岗位我在金融科技公司做的核心系统是自研的行情展示与交易分析平台用户主要是营业部投顾和部分高净值客户。这个系统不算特别复杂但有几个特点行情推送频率高、数据精度要求严格、页面需要长时间保持稳定不卡顿、不能出现任何数据错乱。四年下来我对这类“数据密集型 强交互 高可用”的前端场景积累了大量实操经验。准备跳槽时我给自己定了几个目标方向第一是继续做金融或企业服务类业务第二是能切入 AI 应用层开发第三是薪资不低于 33K。后来面下来发现市面上标着“前端AI”的岗位大致分两类一类是给现有业务系统接入大模型能力比如智能问答、智能纪要、数据洞察这类岗位要求前端基础扎实、懂一点 LLM 应用链路另一类是从零做 AI 原生应用比如 Agent 产品、Copilot 面板这类岗位更看重工程化能力和对模型能力的理解。我简历里写了不少 AI 相关实践所以约面的也基本都往这两个方向偏。1.2 准备阶段知识体系与项目复盘准备面试前两周我把自己的项目重新过了一遍重点不是“做了什么”而是“为什么这么做、有没有更好的方案”。比如行情页面当时用 WebSocket 推送数据我复盘了推送频率、批量合并策略、断线重连的补偿机制交易表单做了多级审核流我复盘了跨端状态同步和异常兜底。这一步非常关键因为面试官对金融业务的追问会非常细你不把底层逻辑想清楚很容易被问穿。同时我系统补了大模型应用方向的基础包括 Token 计算逻辑、RAG 检索链路、Agent 的工具调用循环、上下文窗口管理以及常见评测方法。前端 AI 方向面试很少让你从零训练模型更多是考察你是否理解“怎么把模型能力可靠地集成到应用里”。另外我把常用的 AI 编程工具使用心得也整理了一遍后面面试中果然被问到了。2. 第一面项目深挖——金融业务场景是重点2.1 从“行情展示”聊到性能优化面试官先是让我挑一个最有代表性的项目讲。我选了行情展示系统从业务背景、系统架构、我的职责讲起讲到前端性能优化时被他打断了“行情推送是高频数据你页面是怎么保证帧率稳定的”这个问题我比较熟就把自己的方案拆开讲行情数据用 WebSocket 接收但不会每条推送都立刻驱动 UI 更新。我做了 100ms 的合并窗口先把增量缓存到一个 Map 里窗口结束统一触发一次渲染渲染层用虚拟列表控制 DOM 数量可视区外的行不渲染对于变化频繁的字段单独抽成组件做局部更新避免整个表格重新 diff。同时价格变动用 requestAnimationFrame 节流保证计算和绘制节奏一致。他接着问“如果你用了 100ms 合并用户看到的行情是延迟的这个能接受吗”我说金融场景里有一个“逻辑时间”和“展示时间”的差别——交易决策依赖的 tick 数据我们通过日志链路完整保留页面上展示的刷新频率做到 100ms 对肉眼和多数业务判断已经足够如果某些用户需要更高频的画面可以打开“极速模式”那个模式会用 Canvas 直接绘制走势绕过 DOM diff。这个追问其实是在考察你对自己系统缺陷的理解。我建议面试前把“延迟/性能/一致性”这三者关系想清楚金融场景尤其看重这类取舍逻辑。2.2 追问数据一致性、状态管理与故障恢复深挖项目的时候面试官抛了一个很实际的场景“行情断线十秒恢复后服务端补推了一批数据你前端怎么保证这段时间的数据不乱”我的方案是建立序列号机制。服务端每条行情消息带一个递增序号前端记录最后渲染的序号断线重连后带上这个序号向服务端请求增量数据服务端把缺失区间一次性补齐前端再做按序合并。如果序列号出现空洞就丢弃缓存并全量刷新当前视图避免用户看到错乱的价格。面试官追问“如果补推数据量很大比如断了一分钟”我说这种情况要分级别少量缺失走增量补齐大量缺失直接回退到全量快照拉取同时 UI 上显示“数据恢复中”状态防止用户误以为实时数据已恢复。紧接着他又问状态管理选型的问题“你们状态管理用的什么为什么不用 Pinia 用 Vuex”我说这是历史原因项目从 Vue2 时期就开始用 Vuex后来升级 Vue3 时为了控制改动范围没有整体替换但新模块已经开始尝试 Pinia。面试官点头说“合理”然后追问“如果从零设计你会怎么选”。我的观点是Pinia 更轻、TypeScript 支持好、模块划分直观完全够用但全局状态一定要克制行情数据更适合放在 Canvas 渲染层和 Worker 里而不是全塞进 storestore 只保留用户偏好、布局信息、全局连接状态这类低频数据。2.3 复盘面试官到底在考察什么这一面整体感觉还行面试官基本都从我项目里的真实场景出发追问没有问太多八股。我复盘后认为他对我的考察重点其实有三个第一你做的系统在极端条件下是否可靠第二你有没有主动思考过“为什么这么设计”第三你的表述是否严谨金融业务要求高随口乱说是大忌。这里我建议大家面试前把项目画一张“数据流 异常路径”图把断网、弱网、重复推送、服务端抖动这些情况都列出来每个节点写下应对策略。别说“这种情况基本不会发生”金融场景的面试官见过太多极端情况越不设防越容易被追问穿。3. 第二面前端基础拷打——原理不能只背八股3.1 事件循环与异步从一道手写题说起第二面面试官上来就出了一道代码题要求写一个带并发限制的异步任务调度器支持addTask(task, priority)同时保证任务按优先级和添加顺序执行。这个题很考验对 Event Loop 和异步队列的理解我写了一个带两个队列的实现高优先级走queueMicrotask普通任务走setTimeout分片同时控制最大并发数。写完后面试官让我解释为什么queueMicrotask比Promise.resolve().then()优先级高我说两者本质上差不多都是微任务但queueMicrotask语义更直接不会额外创建 Promise 对象在低端机上 GC 压力更小。他接着问“如果任务里有setTimeout嵌套会不会导致微任务被饿死”我意识到他想考察宏任务与微任务的平衡就补充说调度器里每个任务执行前会检查当前微任务队列长度超过阈值就主动切换到宏任务分片避免长时间占用渲染线程。这个环节的体会是手写题不只看你写不写得出来还看你能否解释每一步设计动机。建议平时多练“带并发控制的任务调度器”“可中断的请求队列”“倒计时组件”这类封闭场景题对理解异步模型帮助很大。3.2 框架原理Vue3 响应式与渲染流程框架部分面试官问了很多 Vue3 原理细节比如“响应式依赖收集的触发时机”和“重渲染的粒度控制”。我讲了reactive通过 Proxy 拦截 get/set在 get 阶段通过track收集当前活动的 effect在 set 阶段通过trigger派发更新组件渲染时会建立一个renderEffect所以数据变化能精确到组件级别。他追问“如果我在setup里直接修改一个深层对象属性但视图没更新可能是什么原因”我答要排查两种情况一是这个属性初始不在对象里响应式是懒代理的新增属性需要使用$set或重新赋值一个对象二是对象被Object.freeze或者被浅层代理包装。面试官补充说“在 Vue3 里新增属性也会被 Proxy 捕获所以第一点不是主要问题但如果用的是shallowReactive就会有完全不同的结果”。这个点我稍微有点含糊算是小扣分项建议大家把reactive、ref、shallowRef、shallowReactive、readonly这几个 API 的差异整理清楚这是“高频追问区”。3.3 安全与前端金融行业绕不开的话题金融背景的前端面试几乎必问安全。面试官问“一个交易系统前端有哪些安全风险你做过哪些防护”我主要讲了三点XSS 方面所有用户输入和接口展示字段统一走转义管道白名单过滤富文本CSP 策略只允许本站资源CSRF 方面所有写接口都校验自定义请求头和 token不在 Cookie 里放长期凭证数据泄露方面敏感字段脱敏展示交易详情在离开页面时自动清空。他追问“如果第三方脚本被注入了你 CSP 设置了白名单但攻击者通过站内现有可控字段注入怎么防”。我说这就要靠输入校验和输出编码双端配合同时 CSP 里script-src要禁止unsafe-inline动态执行的代码统一走eval控制列表。面试官明显对安全的实操性很在意我建议大家如果有金融或政企项目经验把“接口鉴权、敏感数据、脚本注入”这三个场景整理成案例面试时直接讲场景比背概念有效得多。4. 第三面工程化与架构——35K级别的分水岭4.1 微前端与多团队协作这一面问到工程化时面试官先问了一个开放题“如果现在公司有三个业务线三个前端团队要在一个主站里集成你会怎么设计技术方案”我答了微前端架构重点围绕「部署独立、技术栈隔离、共享沉淀」来阐述。先说了两种主流的集成方式qiankun这种运行时加载子应用的方案把 JS 和 CSS 隔离做得比较完善适合技术栈差异大的场景Module Federation这种构建期共享模块的方案适合团队技术栈统一、想共享公共依赖的场景。他追问“如果子应用之间需要共享用户信息但你又不想把所有状态放全局怎么设计”我给的方案是用主应用提供一套getUserInfo/refreshUserInfo的接口子应用通过约定好的方式调用底层用postMessage或 shared store 桥接。关键点是主应用不直接把 state 塞给子应用而是提供“查询/订阅”两张口子应用自己决定存不存副本、何时刷新这样能避免状态失控。他又问了一个很实际的问题“子应用如果加载不出来你们有降级方案吗”我说有微前端框架层做超时检测子应用加载超过 3 秒就触发降级页面提示用户稍后重试同时提供“基础版功能入口”保证核心链路不中断这比硬等要靠谱得多。4.2 监控、异常治理与稳定性紧接着他开始考察稳定性工程能力。问了我监控体系怎么建的前端日志通过 SDK 统一采集错误信息、接口耗时、页面性能指标都打点上报用Sentry聚合错误堆栈用自研的展示平台出告警。举例说“如果某天错误率从 0.1% 涨到 5%你怎么定位”。讲了一个典型的排障流程先看错误类型分布是 JS 运行时错误、接口错误还是静态资源错误再看版本发布记录是不是刚上线的代码引起的然后看用户环境分布是否存在特定浏览器或特定机型的问题最后结合业务时间点是不是行情波动导致的流量突增。这个“由面到点”的排障思路面试官很认可。他还问了发布流程“你们前端发布怎么做灰度”我讲的是先发布到灰度环境只放开内部测试账号访问确认没问题后按 1%、5%、20% 的流量比例逐步放开每阶段观察监控看板如果错误率超过阈值就自动回滚到上一版本同时保留当天发布前镜像作为紧急回退点。这套流程我能明显感觉到面试官感兴趣因为他自己团队也很重视稳定性和灰度的流程。这里我建议大家把“发布、监控、回滚”三件套在脑子里走一遍面试时说得越具体越好。5. 第四面AI方向——前端人怎么聊大模型5.1 我在业务里用LLM做了什么这一面是 AI 负责人来面的也是我最紧张的一轮因为对方明显更看重 AI 应用深度而不是前端八股。他先看了我的简历问道“你说你做了 LLM 相关的功能具体是什么业务场景”我讲了一个带 AI 能力的投顾助手用户输入一段持仓情况或问题系统会调用大模型生成结构化的财务分析和配置建议。这个功能的前端部分不是简单套一个聊天框而是把整条链路都考虑进去了前端负责用户输入解析、流式输出渲染、工具调用过程的可视化、风险提示的组件渲染。讲到这里他点点头让我继续讲后端链路。我继续讲输入会先经过一个意图识别判断是闲聊还是专业问题。如果专业问题就走检索增强生成从知识库检索相关研报、产品资料把检索到的内容结合用户问题拼装 prompt再调用大模型生成结构化 JSON 结果。前端拿到 JSON 后按模板渲染卡片比如“持仓分析”会渲染成饼图、“操作建议”会渲染成步骤条。整个过程里前端要处理的不是一段文本而是“事件流结构化数据”所以我用了类 SSE 的解析协议逐帧更新 UI提升响应感。5.2 RAG与Agent面试官最关心的落地细节面试官追问“RAG 做出来之后你怎么评估效果”这个问题很关键我给他讲了三个维度检索质量用召回率和命中位置的指标来衡量生成质量用忠实度、相关性和完整性打分端到端体验看用户在会话中是否完成了目标、选择集成为回复比例、回退到人工的比例。他说“很多做 AI 应用的人都说不清自己的 Agent 到底有没有变好你能讲出评测体系这点我比较认可”。后来他又问“如果要把 RAG 优化成 Agent你的方案会怎么变化”我说会引入“多步推理”和“工具调用循环”比如用户问“对比一下这两只基金近三年表现”RAG 只能简单检索Agent 则会把问题拆成多个子任务先检索基金信息再调数据接口获取净值数据然后调用计算模块生成对比结果最后用合适的图表组件展示。前端在这个循环里扮演的是“中间态可视化 人工确认”的角色每次工具调用都需要在前端有明确反馈不能让用户干等也不能让用户看得一头雾水。我这里补充了一个自己的思考Agent 产品里“前端体验”绝不是锦上添花而是决定用户信任感的核心。如果 Agent 在思考过程中完全不展示中间步骤用户一旦遇到结果不理想就会觉得产品不行但如果每一步都展示又会显得冗长。所以应该按任务类型分级展示高置信度任务只展示结果低置信度任务展开推理过程让用户有节点可以介入纠正。这个回答明显超出面试官预期他追问了我几个关于“人工确认节点”的设计细节我都从实际项目中拿案例回答了。5.3 AI Coding日常开发中真实的使用边界第四面结尾面试官问了个偏综合的问题“你现在开发中用 AI 编程工具吗你觉得它的边界在哪”我说我用 Cursor 和 Copilot 做日常编码辅助收益最大的是三块写重复性的业务模板、补测试用例、快速检索不熟悉 API 的用法。但边界也很清楚我不让它直接改交易类的核心逻辑因为金融场景对正确性和审计要求极高AI 生成代码如果不可解释出了问题很难追责。所以我的实践是AI 生成的代码必须过一轮“人肉 code review”重点关注断言、边界条件、日志和异常处理。面试官又问“如果让 AI 直接根据你仓库里的代码风格生成一个完整模块你接受吗”我说我接受但会加一道自动化的“风格校验”和“单测覆盖”门槛这两个检查过了我才人工 review。他笑着说“你这个思路是工程化的思路不是赶时髦的心态”我觉得这一轮整体拉回来了不少印象分。6. 终面与HR面软素质、薪资谈判与复盘6.1 情景题如何推动一个跨团队项目终面是技术总监来面除了技术更关注“你怎么跟人协作”。他给了一个情景“你是前端组长现在要做一个交易数据大屏但数据团队接口一直没给业务方又来催你怎么办”我的思路分三步第一步先确认数据团队的阻塞点是指标口径有争议、还是接口排期满、还是跨部门协调没有对齐优先级。第二步拉一个关键干系人对齐优先级把业务方的目标、上线时间、数据需求讲清楚如果数据团队确实资源有限就把大屏分成两期一期先用模拟数据把页面搭起来等接口就绪再替换。第三步是给出明确的“反馈周期”每两天同步一次进展不让业务方陷入等待焦虑。总监听完点评“你这个做法是把不确定性拆成了可管理的阶段不错”我觉得这类软素质题只要有清晰的框架基本都能过关。6.2 HR面与谈薪35K是怎么聊出来的HR 面相对轻松但有个问题很关键“你期望薪资多少依据是什么”我提前做了功课报的是 35K理由有三一是当前薪资水平加上跳槽涨幅预期二是对标市场上同级别前端AI 方向岗位的薪资区间三是我在 AI 应用和金融业务场景上有独特结合这个溢价是合理的。HR 追问“如果你现在公司给你涨薪到 33K你还走吗”我说我跳槽不全为了薪资更看重新业务方向是否匹配我的成长路径但薪资也是重要考量如果锚定目标相差太远基本没有谈的空间。这里我想说HR 面谈薪不要完全“贴地飞行”但也别报一个毫无依据的天价。最好提前了解目标公司的薪资带宽给自己留一个合理预期。我因为简历里带了 AI 项目实践在谈薪时确实多了一些筹码最后 35K 谈成了。6.3 整体复盘哪些答得值哪些还需要补面完整轮后我做了一个复盘表把每轮表现按“答得好的”“含糊的”“完全没答上的”三个档位过了一遍。答得好的有项目深挖里的性能优化和断线补偿AI 面里的评测体系和 Agent 设计答得含糊的有Vue3 响应式深层代理的边界微前端子应用状态隔离的具体实现细节完全没答上的其实没有但有两次明显感觉到面试官已经“等我说得更细”。如果让我重新准备一次我会把更多时间花在两个地方一是把项目里每个“为什么这么选”的技术决策都写成一页纸的说明这样被追问时不慌乱二是把 AI 应用链路里的每个环节都配上可运行的最小 Demo比如一个能跑通的 RAG 流程、一个能调用外部工具的 Agent否则光靠描述很难让面试官信服你真的做过。提示这篇面经里的答案并不是“标准答案”面试本质上是交流你的项目背景、业务场景、技术选型都会影响最终回答。重点是梳理清楚自己的思路而不是背诵别人的答案。最后再分享一个小技巧面试前把你做的项目“按缺点”列一张清单比如“这个系统目前有什么问题”“哪里还能优化”“如果重做会怎么改”。我在面试中多次被问到的不是“有什么亮点”而是“哪里做得不够好”能坦然讲清楚不足之处并给出解决方案的人反而更容易拿到高分。希望大家都能拿到心仪的 offer。