前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司bilibili面试时间近期用户上传于2026-03-25面试岗位前端开发实习生二面生态技术方向⏱️面试时长未提及面试体验未提及❓面试问题能实习多久要求6个月怎么用AI coding的用的什么工具了解SDD、spec coding吗不太了解…AGENTS.md里应该写什么和README的区别如何让AI遵守项目规范介绍一下项目为什么用RAGRAG存些什么介绍一下SSE为什么用SSESSE怎么连接的前端AI实时补全怎么做的向量数据库用的是什么对于简历上的项目现在让你做的话AI占比会有多少你会怎么利用AI如果产品经理给你多个需求你会怎么让AI去完成你认为未来AI会取代程序员吗反问环节我问了同样的问题面试官认为短期不太行但未来是会取代程序员的程序员可能转型去做产品…来源牛客网Az0424木木有话说刷前先看这份bilibili二面面经非常有时代特色——其实我最近发现不只是前端各岗位面试的时候都会问平时工作的AI占比基本已经是50%以上的大厂都会问了。收录进来是发现有几个比较新鲜的问法比如前端AI实时补全、SDD、spec coding、AGENTS.md都是一些相关性的小细节技术点不难准备一下即可。 bilibili生态技术方向二面·深度解析面试整体画像维度特征面试风格AI工程化型 规范思维型 未来视野型难度评级⭐⭐两星考察AI协作与工程化思维考察重心AI辅助开发工具链、项目规范、RAG/SSE技术原理、人机协作模式特殊之处完全围绕AI时代的开发模式展开传统八股几乎为零逐题深度解析二、怎么用AI coding用的什么工具回答思路面试官想了解你是否真的在实践AI辅助开发以及你选工具的理由。常见工具Copilot代码补全、生成函数、写单元测试CursorAI驱动的编辑器可以对话式编程、理解整个项目ChatGPT/Claude调试问题、代码审查、学习新技术、写文档通义灵码/CodeGeeX国内替代方案具体使用场景“写重复性代码如CRUD、表单时用Copilot生成骨架”“遇到复杂bug时把错误信息和相关代码粘贴给ChatGPT让它帮我分析可能的原因”“用Cursor的workspace功能让AI理解整个项目结构来回答我的问题”“用AI生成单元测试用例提高测试覆盖率”加分点强调“我会审查AI生成的代码确保它符合项目规范不会盲目接受”。三、了解SDD、spec coding吗回答思路用户回答“不太了解”这里补充知识。如果确实不了解可以诚实说“目前还没实践过但了解过相关概念”然后简要说明你的理解。SDDSpecification-Driven Development规格驱动开发先编写详细的功能规格说明再由AI根据规格生成代码。核心是“规格即代码”。Spec Coding一种AI编程范式开发者用自然语言描述需求SpecAI生成对应的代码实现。典型工具Cursor Composer、v0、Bolt.new。回答示例“我了解过这个概念但没有在正式项目中实践过。简单来说就是先写清楚‘要做什么’Spec然后让AI生成‘怎么做’的代码。我理解它的核心是让开发者专注于需求描述和架构设计把实现细节交给AI。我平时用Cursor时也会先在注释里写清楚需求再让AI补全这算是Spec Coding的雏形吧。”四、AGENTS.md里应该写什么和README的区别回答思路这是AI工程化中的新概念面试官想考察你是否了解如何让AI理解项目。AGENTS.md专门为AI Agent如Cursor、Copilot提供的项目说明文件告诉AI这个项目的技术栈、代码规范、架构约定、常见模式让AI生成的代码更符合项目风格。应该包含的内容技术栈React 18 TypeScript Vite代码规范使用函数组件、hooks优先、命名规范目录结构components/、pages/、hooks/、utils/ 各自职责API调用模式统一用swr或react-query状态管理用Zustand还是Redux样式方案Tailwind还是CSS Modules常见陷阱避免在useEffect中直接setState等与README的区别维度READMEAGENTS.md受众人类开发者AI Agent内容项目介绍、快速开始、部署说明技术规范、编码约定、架构说明目的让人理解项目让AI生成符合规范的代码粒度宏观技术细节回答示例“AGENTS.md是给AI看的项目说明书。我会写清楚技术栈ReactTS、目录结构、代码规范比如函数组件优先、API调用方式、还有常见的设计模式。这样AI生成的代码能自动符合项目风格。README是给人看的重点是项目背景和如何运行。”五、如何让AI遵守项目规范回答思路这是上一题的延续考察你是否能落地执行。方法建立项目规范文件AGENTS.md、.cursorrules、.copilotrules等在Prompt中明确约束“请使用函数组件Props类型定义放在组件文件内”代码审查对AI生成的代码做review发现问题及时纠正示例驱动给AI提供项目中的代码示例让它模仿风格持续优化发现AI经常犯的错误更新规范文件!-- .cursorrules 示例 -- ## 技术栈 - React 18 TypeScript Vite - 样式Tailwind CSS - 状态管理Zustand ## 组件规范 - 使用函数组件 箭头函数 - Props类型定义使用 interface - 组件文件命名PascalCase - 每个组件一个文件夹包含组件文件和测试文件 ## 编码约定 - 优先使用 const 而非 let - 异步操作使用 async/await - 避免在 useEffect 中直接 setState 依赖自身加分点提到“可以用AI帮我审查AI生成的代码比如让AI对比规范文件检查代码是否符合要求”。六、项目介绍为什么用RAGRAG存些什么回答思路结合具体项目说明RAG的应用场景和价值。RAG检索增强生成让LLM基于外部知识库回答问题解决幻觉问题让回答可溯源。为什么用RAG项目需要回答特定领域问题如技术文档、客服问答模型训练数据不包含这些知识需要答案可溯源用户可查看引用来源RAG存什么文档内容技术文档、FAQ、设计文档元数据来源、时间、作者、标签向量索引用于语义检索可能会存chunk之间的关联关系回答示例“我做的项目是一个技术问答助手用户问React相关问题。用RAG是因为通用模型对内部技术栈不了解而且我们需要答案可溯源。RAG里存的是我们的技术文档按章节切成chunk存了文本内容和对应的向量还有元数据比如文档来源、更新时间。”七、SSE介绍、为什么用、怎么连接回答思路参考之前AI应用开发面经中关于SSE的详细解析。SSE定义Server-Sent Events服务端向客户端单向推送数据的HTTP协议。为什么用SSE场景匹配AI对话是单向流服务端生成→客户端接收不需要双向实现简单基于HTTP无需额外协议自动重连原生支持断线自动恢复资源开销小比WebSocket轻量怎么连接consteventSourcenewEventSource(/api/chat/stream)eventSource.onopen()console.log(连接已建立)eventSource.onmessage(event){constdataJSON.parse(event.data)appendMessage(data.content)}eventSource.onerror()console.log(连接出错自动重连中)eventSource.close()// 主动关闭服务端响应格式Content-Type: text/event-stream Cache-Control: no-cache Connection: keep-alive data: {content: Hello} data: {content: world} data: [DONE]八、前端AI实时补全怎么做的回答思路如果项目中有类似功能可以详细说明如果没有可以说“参考Copilot的实现原理”。实现方式触发时机用户输入时如代码编辑器、文本输入框监听变化防抖用户停止输入后延迟发送请求避免频繁调用上下文构建收集光标前后的代码/文本加上文件类型、项目规范等作为PromptSSE流式传输AI返回流式结果逐字显示展示交互灰色预览样式类似CopilotTab键接受补全// 伪代码示例lettimer input.addEventListener(input,(){clearTimeout(timer)timersetTimeout((){constcontextgetContext()// 光标前后、文件类型fetch(/api/completion,{method:POST,body:JSON.stringify({context,prompt:input.value})}).then(response{// 处理流式结果showSuggestion(response)})},300)})难点如何让补全准确、如何低延迟、如何避免干扰用户输入。九、向量数据库用的是什么回答思路根据项目实际回答如果用的是云服务或开源库直接说。常见选择云服务Pinecone、Milvus Cloud、Qdrant Cloud开源Milvus、Qdrant、Weaviate、Chroma轻量级LanceDB、SQLite vector插件前端transformers.js IndexedDB本地向量存储回答示例“我们用的是Pinecone因为上手快有免费额度做实验。向量维度是1536OpenAI的embedding模型索引类型选的是cosine相似度。”十、简历上的项目现在做AI占比会有多少怎么利用AI回答思路坦诚评估既要展现对AI的拥抱也要体现对核心能力的把控。示例回答“如果现在重做AI占比大概在30%-40%左右主要体现在30%的重复性代码表单、CRUD接口、类型定义让AI生成20%的调试遇到报错先问AI理解问题再自己改20%的测试让AI写单元测试用例我来review10%的文档生成API文档、组件使用说明但核心逻辑和架构设计我会自己把控比如数据流设计、状态管理方案、性能优化策略这些AI很难做对。我会把AI当助手不是替代。”十一、产品经理给多个需求怎么让AI去完成回答思路考察你如何用AI拆解和管理任务。示例回答“我会这样用AI拆解需求让AI帮忙分析每个需求的依赖关系评估复杂度生成任务清单把大需求拆成小任务让AI建议优先级生成代码骨架对每个任务用Cursor生成基础代码结构重复性工作类似需求的UI组件让AI批量生成测试用例让AI为每个需求生成测试用例但我不会把需求原文直接丢给AI让它‘全自动’。我会先理解需求再拆分给AI。AI适合做‘实现细节’不适合做‘需求决策’。”十二、AI会取代程序员吗回答思路这是开放题考察你的深度思考。结合面试官的回答短期不会长期会转型可以这样回答示例回答“我觉得短期不会完全取代但会深刻改变程序员的角色。AI已经能写出不错的代码但它还不理解业务、不知道用户真正要什么、做不了架构决策。未来程序员可能会从‘写代码的人’变成‘指挥AI写代码的人’更像现在的‘架构师产品经理’的混合角色。核心能力会从‘记住API’转向需求理解知道要做什么为什么做系统设计能拆解复杂问题设计可扩展的架构质量把关能判断AI生成的代码是否靠谱沟通能力能和其他角色产品、设计高效协作所以AI不会让程序员消失但会让程序员的技能栈重新洗牌。与其担心被取代不如主动学习怎么用好AI。”反问环节的加分可以反问面试官“您怎么看这个问题”展现你愿意交流和学习。知识点速查表知识点核心要点AI coding工具Copilot、Cursor、ChatGPT用于补全、调试、测试、文档SDD/Spec Coding规格驱动开发先写需求描述AI生成代码AGENTS.md给AI的项目规范文档与README受众不同规范约束规范文件、Prompt约束、代码审查、示例驱动RAG检索增强生成解决幻觉、可溯源存文档内容向量元数据SSE单向推送、HTTP协议、自动重连、data格式实时补全防抖、上下文构建、流式传输、交互体验向量数据库Pinecone/Milvus/Chroma存储向量相似度检索AI使用占比30-50%重复性工作核心逻辑人工把控AI协作方式拆解需求、生成骨架、批量重复工作、测试用例AI与程序员角色转变从“写代码”到“指挥AI写代码”能力重心转向需求/架构/质量 最后一句bilibili这场二面面试官基本没有问常见八股而是问你如何用AI提效、如何让AI产出符合规范、如何看待人机协作。这折射出一个趋势生态技术方向显然已经走在了这场变革的前沿前端必须要学AI了。