国庆前这段时间，我几乎每天都会收到同类的咨询：前端面试到底还考不考八股，AI到底会不会取代CSS，场景题要准备到什么程度。问的人多了我也就总结出一个判断——那些能在节后第一周拿到offer的人，不是在国庆七天里刷完三千道题的，而是在放假前就把前端+AI高频面试题和最新场景题过完一遍，然后利用假期做项目复盘和模拟面试的人。

这篇文章就是把我在准备前端+AI面试时的完整思路整理出来，涵盖高频考点拆解、场景题回答范式、三套完整场景题实战、国庆前后的时间规划，以及我自己踩过之后才想明白的避坑点。无论你是准备年后跳槽的资深前端，还是刚转AI应用方向的技术新人，这套内容都可以直接拿去用。

1. 为什么前端面试突然绕不开AI

1.1 前端岗位的边界已经被AI扩宽

前几年前端面试的核心江湖还停留在Vue还是React、防抖节流、手写Promise、CSS垂直居中。现在你再去看各家公司挂在网上的JD和面试流程，会发现一个明显变化：AI相关能力从前端的“加分项”变成了“隐性必考题”。就算岗位描述里没写“大模型”“AI Agent”，面试官也大概率会在项目深挖环节问一句：“你们前端有没有接过大模型的流式输出？实现过类似ChatGPT那种打字机效果吗？”

这种变化不是面试官心血来潮，而是前端岗位的真实工作内容变了。以前一个前端页面就是把后端给的JSON渲染成DOM，现在很多业务页面本身就是对话界面、智能助手工作台、AI报表生成器。对话流式渲染、会话管理与上下文拼接、工具调用过程可视化，这些已经从“实验室玩法”变成了日常需求。我在面试候选人时，最直接的感受是：只写过普通管理后台的人，和实打实接过大模型接口的人，在聊项目时完全是两种状态。后者能清楚说出SSE的解析细节、断线重连方案、模型返回异常时的兜底逻辑，这些细节恰恰是面试官最想听的。

1.2 AI编程工具普及后，面试官到底在考察什么

AI编程工具普及之后，一个很现实的问题是：写页面本身变得没那么难了，于是面试官需要重新设计筛选标准。以前考“会不会写一个轮播图”，现在这题基本废了——人人在面试现场都能让AI写出来。但“能不能设计一个包含AI能力的完整功能模块”这件事，AI工具替代不了，面试官只能通过场景题和方案设计题来考察。

我把面试官想找的人拆成三种：

• 基础扎实的人：JS、CSS、框架原理、工程化优化，能讲清楚底层机制，不会被AI工具废掉基本功。
• 能接AI能力的人：懂Prompt、Function Calling、RAG、Token成本，知道前端怎么消费大模型流式输出。
• 能设计AI交互的人：面对一个模糊需求，能拆出对话、流式渲染、中断、重试、工具调用可视化、费用控制这些模块。

这三种能力是层层递进的。只占第一种大概率拿普通offer，同时具备第二种和第三种，在节后跳槽市场里就属于稀缺选手。下面我把每类要准备的内容拆开讲。

2. 前端高频题怎么背才能不白背

2.1 基础题已经不是背概念，而是讲原理

前端高频题刷了不少人的共识是：JS和CSS这两块最容易被问出“连环炮”。你以为背了闭包定义就够了，结果面试官接着问“闭包为什么会导致内存泄漏”“那为什么现代JS引擎又能回收”“你在项目里哪里用过闭包”。

以我最常拿来考人的题目举例：for循环里用var声明i，给三个按钮绑定点击事件，点击第一个按钮打印什么。很多人答“打印0”，正确答案是三个按钮点击都打印3。但这不是终点，面试官马上会追问“改成let之后为什么就对了”——这里要讲清楚let创建了块级作用域，每次循环都会生成一个新的词法环境，事件回调闭包捕获的是当前迭代的i；接着还会追问“setTimeout加上之后，打印顺序怎么变”，这里又牵出宏任务队列和事件循环。

这类题背答案没有意义，因为面试官会不断换壳。正确的准备方式是给每一道题配一个“为什么会这样”的底层解释，再配一个真实的项目案例。我在准备阶段给自己定的要求是：每个高频考点必须能用一句话讲清原理，再接一个两分钟的实战案例。比如讲事件循环，一定要说到微任务在执行栈清空后、下一个宏任务之前运行，然后举一个实际场景：点击按钮后先更新DOM再发请求，为什么用Promise而不是setTimeout包一层。

2.2 框架、工程化和性能优化题的准备重心

框架题方面，React和Vue要重点准备的有：React的Fiber架构和diff算法为什么能提升更新效率、useEffect的依赖数组对副作用的控制、useMemo和useCallback到底解决了什么性能问题；Vue的响应式原理从Object.defineProperty到Proxy的变化、nextTick为什么能获取更新后的DOM。答题时不要停在“它是这么设计的”，要加一句“我在项目里因为没注意依赖导致无限渲染，后来怎么排查的”，这句最加分。

工程化和性能优化的高频题集中在：Vite为什么比Webpack快、tree-shaking原理、首屏加载优化。我给一份整理好的速查表，按“题目 -> 核心考点 -> 推荐作答方向”的方式去背，效率会高很多：

这里有个很关键的经验：工程化题不要只背概念，一定要配上量化结果。比如“我给项目加了路由懒加载，首屏JS从380KB降到180KB，LCP从3.2秒降到1.4秒”——有这个数字，面试官对你的印象就从“会背”变成了“真的做过”。

3. AI相关高频题的五个核心考点拆解

3.1 大模型API接入与流式输出：前端不仅是调接口

如果你只会在前端里用fetch发一个Post请求等完整JSON回来，那么AI相关的面试题基本会挂在第一关。真实场景中，大模型接口返回token是一个一个蹦出来的，前端要用SSE或流式读取的方式把它们边拼边渲染，才能还原ChatGPT那种打字机效果。

用最简单的fetch实现流式读取，核心代码是这样：

async function chatStream(messages, onMessage) { const response = await fetch('/api/chat', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages }) }); if (!response.ok) { throw new Error(`HTTP ${response.status}`); } const reader = response.body.getReader(); const decoder = new TextDecoder(); while (true) { const { done, value } = await reader.read(); if (done) break; const chunk = decoder.decode(value, { stream: true }); // 每拿到一段增量，就交给UI渲染层追加 onMessage(chunk); } }

这里要注意两个必讲的点：第一，不要在onMessage里直接做字符串拼接后重新赋值给state，因为状态更新有批处理机制，高频更新状态下会掉帧。更稳妥的做法是先在state里追加到数组，再配合一个轻量级文本拼接的过程完成增量渲染；第二，必须考虑中断场景——用户点击“停止生成”时，要调用AbortController取消请求，否则浏览器会继续接收后面的数据，造成无谓的计费和资源浪费。

鉴权问题也是面试官喜欢追问的点。最忌讳的回答是“把API Key放在前端环境变量里就行”。正确的工程姿势是前端只发请求到自己的后端代理，由后端保管密钥、做访问控制和限流。前端的职责是带上用户会话标识，而不是暴露模型服务的密钥。你可以反问面试官：“如果API Key放在前端，用户在控制台直接能看到密钥流量，他就可以拿你的额度去做自己的事，这个成本谁来承担？”——这句话一出来，工程意识立刻立住了。

3.2 Prompt、Function Calling与RAG：三类题各有一套答法

AI方向面试题最常被问到的就是Prompt、Function Calling和RAG，但这三个词在不同公司面试里的考察深度天差地别。有的只需要你懂概念，有的会直接给你一个JSON Schema让你现场设计。

Prompt部分，我被问得最多的是“如果要做一个客服机器人，你会怎么写system prompt”。这里的关键不是背几个模板，而是讲清楚角色设定、上下文约束、输出格式约束三个层次。我倾向于用生活化类比来解释：系统提示词相当于给新员工做岗位培训，你得告诉他你是谁、你的服务边界、你的回答语气、遇到解决不了的事怎么办。少了边界约束，模型就会开始编答案。

Function Calling是AI应用中比较高频但很多人说不清的部分。核心一句话：模型不会执行代码，它只是根据你提供的工具定义，输出“该调用哪个函数”和“参数长什么样”。前端或后端再按这个结果去执行真实函数。一个常见的工具定义长这样：

{ "name": "query_weather", "description": "查询指定城市的实时天气", "parameters": { "type": "object", "properties": { "city": { "type": "string", "description": "城市名称" } }, "required": ["city"] } }

面试题问到这里还只是开始，接下来会问“拿到模型返回的工具调用参数之后，前端怎么处理”。你要能说出“把执行结果再次塞回messages数组，以工具角色的身份返回给模型，让模型基于工具结果生成自然语言回答”的完整闭环。能闭环讲出这段话的人，在候选人里已经算少数了。

RAG方面，最常见的场景题是“给一个企业知识库做问答助手，怎么避免幻觉”。回答框架是：先对文档做切片，然后通过Embedding把切片向量化，存入向量数据库；用户提问时把query也向量化，做相似度检索，召回排名靠前的文档片段；把片段拼进Prompt，再交给大模型生成答案。这套流程里前端能参与的环节包括文件上传和解析进度展示、检索结果的置信度展示、以及回答底部附上引用的原文片段。做AI应用的前端如果只等着后端给完整答案，那就又回到了“只写展示页”的老路。

3.3 Token成本与上下文管理：面试里的隐藏送命题

AI相关面试题有一个隐藏送命题：当面试官问“用户连续对话一百轮，你怎么控制成本、怎么解决超长上下文”的时候。这道题答不好，前面讲得再花也容易掉档。

你不需要给出多么复杂的对话压缩算法，需要的是给出一个工程上可落地的方案。我的标准回答路径是：多轮对话按时间做滑动窗口保留最近N条；超过窗口后调用摘要模型把旧的对话压成一段summary，再塞到上下文最前面；同时对单条消息做长度限制，超长的用户输入先做截断，再考虑是否触发RAG检索。这套方案里有缓存、有摘要、有窗口控制，面试官一听就知道你真的处理过线上问题。

再补充一道常考的计算题：假设一次对话输入和输出合计消耗3000个token，模型单价是每百万token 2元，那么这一轮对话的成本是多少？3000除以100万再乘以2等于0.006元。你不但要能算出这个数字，还要能补一句：“所以为什么要在前端做好停止生成和断线重连，因为每多传一次无效数据，都是在花冤枉钱。”——把成本和前端交互设计挂钩，就是比普通候选人高一档的地方。

4. 最新场景题怎么答：先会说模板，再套内容

4.1 场景题的回答范式

场景题和基础题最大的区别是没有标准答案，面试官想看的不是结果而是你的思考过程。我把场景题的万能回答流程总结成四步：第一步，澄清边界和约束，确认这是一个单机Demo还是要考虑多人并发；第二步，拆解核心功能模块，把模糊需求变成一个一个有边界的任务列表；第三步，给出每个模块的技术选型，并说清楚为什么选它；第四步，讲异常处理和降级方案，这是大多数候选人最容易漏掉的环节。

整套动作可以用一个引导案例走一遍。假如面试官说“做个AI问答页面”，你要是直接开始画页面，等于把自己框死在一个小角落里。合格的回答是反问他：“这里要支持多轮对话吗？是要网页端还是小程序？对首屏响应时间有什么要求？用户量预计多大？”这些边界问题一旦问出来，面试官就会觉得你不是背题选手，而在做真正的需求分析。接着再把自己的回答组织成一句话：“我理解这是一个面向C端的AI问答页面，核心是流式对话和高并发下的可用性，我打算从消息协议、前端渲染、异常兜底三条线来设计。”

4.2 场景题实战一：ChatPDF前端方案

ChatPDF是目前各家都愿意拿出来考的场景题，因为它完整覆盖了文件上传、解析、AI能力和前端交互。

拿到这题先别急着说界面设计。先拆功能：用户上传PDF，系统解析文档内容并建立索引，用户针对文档提问，系统流式返回答案。前端负责哪些事？文件上传时如果文件很大，需要做分片上传并展示上传进度；上传完成后，后端开始解析和向量化的耗时可能长，前端要用轮询或者SSE告诉用户“当前任务在哪个处理阶段”；提问时要用流式渲染回答，同时把答案对应的原文引用段落展示出来。

这题的加分点有两个。第一，你要主动说“如果PDF解析失败，前端要做什么”：给用户一个可读的错误提示，并提供重新上传和换用图片OCR的降级路径。第二，你要提费用控制：解析和Embedding是有成本的，不能无限上传，前端要在上传前校验文件大小和页数，超过阈值直接拦截。这两个细节说出口，面试官基本就能判定你是做过真实AI应用的人。

4.3 场景题实战二：大文件上传与断点续传

大文件上传这道题看着跟AI没关系，却是我最近见过的高频“障眼法”——它常常出现在AI场景题后面，因为AI应用里普遍存在视频、PDF、HTML快照的上传需求。

回答路径是从小到大逐渐展开：先把文件用Blob.prototype.slice切成指定大小的分片；然后通过并发控制，同时上传3到5个分片；每个分片上传成功后由服务端返回记录，整个文件全部上传完后触发合并接口。断点续传的核心思路是，上传前先向后端询问“这个文件已经上传了哪些分片”，只补传缺失的部分。秒传则更进一步，用文件的MD5或哈希值做唯一标识，如果服务端已经有相同哈希的文件，直接跳过上传。

这里要补一个很多人不知道的细节：切片大小选择需要平衡。普通的经验是浏览器单次请求大小控制在2MB到5MB之间，网络差的环境下可以用更小的分片。我在项目里踩过坑，把分片设成50MB一个，弱网环境下断点续传时大量重试，反而比不分片更慢。还有前端可以配合Web Worker来计算文件哈希，避免在UI线程里读取大文件导致页面卡顿。你只要把“计算哈希放在worker、并发控制上限、失败重试机制”这三个点说到，这道题就稳了。

4.4 场景题实战三：AI Agent工作台的前端交互

最后一类场景题越来越频繁出现：给你一个AI Agent工作台，让你设计它的前端界面和交互逻辑。这种题考察的是你对AI应用全链路的理解深度。

Agent工作台和普通聊天页面的区别在于，它除了对话之外还要展示Agent的执行轨迹。用户发出一个任务后，Agent可能要多次调用工具、检索资料、生成中间结果，前后端之间不只是纯文本流，还有结构化的状态事件。前端的核心职责是把这些状态可视化：任务列表上用状态机区分“排队中、执行中、等待确认、已完成、失败”；工具调用环节用卡片式UI展示调用了哪个工具、传入了什么参数、拿到了什么结果；如果某个动作需要用户确认，要在界面中弹出暂停提示并等待人类授权。

这题的加分项还有三个细节：第一，停止生成不只是中断SSE，还要通知后端去取消Agent正在执行的任务；第二，token用量统计要在界面上实时可见，让用户有成本感知；第三，Agent失败后的重试不能直接把旧消息重发一遍，否则可能造成重复执行副作用，需要设计一个幂等重试机制。你把这三个细节讲完，这道题基本就是满分水平的答案了。

5. 国庆前冲刺计划与节后投递节奏

5.1 为什么国庆前是黄金准备期

很多求职者会在国庆期间彻底休息，把面试准备完全停掉。这个选择在节奏上其实是吃亏的。国庆前一周，大部分公司招聘系统仍然在运行，HR还在筛选简历，面试官也愿意在放假前约几个节后的面试；而国庆期间如果你能保持每日一到两小时的稳定输入，节后一开工你就比大多数人多了整整七天的准备余量。

更关键的是，节后很快进入Q4，很多团队在拿到新的HC预算后会集中释放岗位。如果你在放假前把前端、AI高频题和场景题全部过完，假期只做查漏补缺，那么节后第一周就是你投递和约面的最佳窗口。等到国庆期间才开始翻面试题，别人已经面完两轮了，这种差距很难追。

5.2 倒计时冲刺安排表

我不建议国庆前一周才开始背题，更合理的节奏是在放假前完成80%的知识点输入，假期只留20%的时间做模拟和复盘。给你一个可以照抄的时间表：

这个计划的核心逻辑是：大块时间花在输入上，小块时间花在输出上。别把国庆七天都用来死记硬背，背得再熟不会表达也没用。

5.3 节后投递策略与简历注意事项

国庆后投简历有个常见误区：为了蹭AI热度在简历里大堆特堆“熟悉大模型”“掌握人工智能”这种词。真正有杀伤力的简历写法是用具体交付取代抽象能力。给你一个对比示例：普通写法是“熟练掌握React和AI流式输出”，进阶写法是“基于SSE流式协议重构智能客服前端，消息首字输出时间降低40%”。同一个意思，后者在面试官眼里价值完全不一样。

投递节奏上我也劝一句：不要节后第一天就把简历撒给几十家公司。最稳的策略是挑两到三家目标公司先投，约到面试后把时间安排在三天后，给自己留足模拟面试的缓冲。面完一家之后根据问题反向调整简历和话术，再投下一批。集中投递最大的坏处是当你还在第一家面试的出错状态里，第二家第三家的约面通知已经来了，你根本没有时间修正，只能带着同样的问题连续碰壁。与其那样，不如精准打击。

6. 面试中常见的翻车点与避坑心得

6.1 三个最容易让候选人挂掉的表现

面试翻车的原因五花八门，但归纳到最后就三类。第一类是背题痕迹过重，答概念时流利得像在背课文，一旦被追问“你在项目里怎么用到的”就卡壳。破解方法是给每个高频考点配一个真实的项目场景。即使你项目里确实没处理过，也可以说“我在学习过程中写过一个Demo，当时踩了哪些坑”——重点是展示你有调试的意识和解决问题的能力。

第二类是忽略异常处理和降级方案。AI相关场景题里，面试官特别容易在听完全部方案后补一句“如果模型服务挂了怎么处理”“如果网络断了怎么办”。这个追问卡掉了大量候选人。任何方案都要在设计之初就包含失败路径，比如流式输出断线后要自动重连或提示重试、模型超时后要给出兜底文案而不是永远转圈。下次你再答任何场景题，最后都习惯性加一句“如果核心服务不可用，我的预案是……”，就这一个习惯就能超过六成候选人。

第三类是项目数据没有量化。很多人讲性能优化只会说“我用懒加载优化了首屏”，这句等于没说。面试官更想听到的是“首屏体积从1.2MB减到450KB，FCP从2.8秒降到1.1秒”。如果你在真实项目中确实没做过性能优化，那就在准备阶段搭一个小项目，自己用Lighthouse测一遍优化前后对比，这个数字就是面试素材。

6.2 现场遇到不会的题，怎么处理

面试中一定会遇到没准备过的题，我见过太多人在这一刻直接崩掉。正确的处理方法分三步：复述问题确认理解、给出已知部分的思路、坦白未知部分并说明会如何排查。比如面试官问“前端如何处理十万级数据点的实时图表”，你一时答不上最优方案，可以这样答：“我理解难点在于高频更新和DOM渲染瓶颈，常规手段是用canvas代替svg、对数据进行抽样或者用worker来集中计算，具体到这个问题我可能要先做性能分析，如果让我现在上手，我会先跑一轮profile再决定优化方案。”

这套话术看起来是把问题推回去了，实际是在向面试官展示你的工程思维：遇到问题不是背答案，而是拆问题、做实验、找证据。任何面试官都会认可这种态度，因为真实工作里你根本不可能遇到原题。

6.3 基于个人经验的最后两点建议

我在带人和面人的过程中越来越确认一件事：国庆前后这段时间准备面试，表面上是在刷题，实际上是在把自己过去几年的写码经历整理成一个一个有逻辑的故事。那些最终在节后一周拿到offer的候选人，几乎都有一个共同点——他们的知识不是停留在知乎收藏夹里的，而是每一个都能随口讲出“我当时怎么做的、踩了什么坑、最后效果如何”。把题背完只是基本功，把题目讲成自己亲手做过的事，那才算真正准备好了。

如果你现在手里有一个之前做过的前端项目，哪怕再小，也值得花一个晚上把它翻出来，想一想如果要在上面加一个AI能力，你要怎么改造。这个思路一旦跑通，你面对任何场景题都会气定神闲——因为你不是在回答一个没见过的问题，而是在讲述一个已经想透了的方向。国庆前把题背完，国庆后直接拿offer这件事，我见过太多人做到了，下一个也可以是你。