前端八股文面经大全：bilibili生态技术方向二面（2026-03-25）·面经深度解析

前言

大家好，我是木斯佳。

相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的"增删改查"岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。

这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。

温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。

面经原文内容

📍面试公司：bilibili

🕐面试时间：近期，用户上传于2026-03-25

💻面试岗位：前端开发实习生二面（生态技术方向）

⏱️面试时长：未提及

📝面试体验：未提及

❓面试问题：

能实习多久（要求6个月）
怎么用AI coding的，用的什么工具
了解SDD、spec coding吗（不太了解...）
AGENTS.md里应该写什么，和README的区别
如何让AI遵守项目规范
介绍一下项目，为什么用RAG，RAG存些什么
介绍一下SSE，为什么用SSE，SSE怎么连接的
前端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：代码补全、生成函数、写单元测试
Cursor：AI驱动的编辑器，可以对话式编程、理解整个项目
ChatGPT/Claude：调试问题、代码审查、学习新技术、写文档
通义灵码/CodeGeeX：国内替代方案

具体使用场景：

"写重复性代码（如CRUD、表单）时用Copilot生成骨架"
"遇到复杂bug时，把错误信息和相关代码粘贴给ChatGPT，让它帮我分析可能的原因"
"用Cursor的@workspace功能，让AI理解整个项目结构来回答我的问题"
"用AI生成单元测试用例，提高测试覆盖率"

加分点：强调"我会审查AI生成的代码，确保它符合项目规范，不会盲目接受"。

三、了解SDD、spec coding吗

回答思路：用户回答"不太了解"，这里补充知识。如果确实不了解，可以诚实说"目前还没实践过，但了解过相关概念"，然后简要说明你的理解。

SDD（Specification-Driven Development，规格驱动开发）：先编写详细的功能规格说明，再由AI根据规格生成代码。核心是"规格即代码"。

Spec Coding：一种AI编程范式，开发者用自然语言描述需求（Spec），AI生成对应的代码实现。典型工具：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的区别：

维度	README	AGENTS.md
受众	人类开发者	AI Agent
内容	项目介绍、快速开始、部署说明	技术规范、编码约定、架构说明
目的	让人理解项目	让AI生成符合规范的代码
粒度	宏观	技术细节

回答示例："AGENTS.md是给AI看的项目说明书。我会写清楚技术栈（React+TS）、目录结构、代码规范（比如函数组件优先）、API调用方式、还有常见的设计模式。这样AI生成的代码能自动符合项目风格。README是给人看的，重点是项目背景和如何运行。"

五、如何让AI遵守项目规范

回答思路：这是上一题的延续，考察你是否能落地执行。

方法：

建立项目规范文件：AGENTS.md、.cursorrules、.copilotrules等
在Prompt中明确约束："请使用函数组件，Props类型定义放在组件文件内"
代码审查：对AI生成的代码做review，发现问题及时纠正
示例驱动：给AI提供项目中的代码示例，让它模仿风格
持续优化：发现AI经常犯的错误，更新规范文件

markdown 复制代码

<!-- .cursorrules 示例 -->
## 技术栈
- React 18 + TypeScript + Vite
- 样式：Tailwind CSS
- 状态管理：Zustand

## 组件规范
- 使用函数组件 + 箭头函数
- Props类型定义使用 interface
- 组件文件命名：PascalCase
- 每个组件一个文件夹，包含组件文件和测试文件

## 编码约定
- 优先使用 const 而非 let
- 异步操作使用 async/await
- 避免在 useEffect 中直接 setState 依赖自身

加分点：提到"可以用AI帮我审查AI生成的代码，比如让AI对比规范文件检查代码是否符合要求"。

六、项目介绍：为什么用RAG，RAG存些什么

回答思路：结合具体项目说明RAG的应用场景和价值。

RAG（检索增强生成）：让LLM基于外部知识库回答问题，解决幻觉问题，让回答可溯源。

为什么用RAG：

项目需要回答特定领域问题（如技术文档、客服问答）
模型训练数据不包含这些知识
需要答案可溯源，用户可查看引用来源

RAG存什么：

文档内容（技术文档、FAQ、设计文档）
元数据（来源、时间、作者、标签）
向量索引（用于语义检索）
可能会存chunk之间的关联关系

回答示例："我做的项目是一个技术问答助手，用户问React相关问题。用RAG是因为通用模型对内部技术栈不了解，而且我们需要答案可溯源。RAG里存的是我们的技术文档，按章节切成chunk，存了文本内容和对应的向量，还有元数据比如文档来源、更新时间。"

七、SSE介绍、为什么用、怎么连接

回答思路：参考之前AI应用开发面经中关于SSE的详细解析。

SSE定义：Server-Sent Events，服务端向客户端单向推送数据的HTTP协议。

为什么用SSE：

场景匹配：AI对话是单向流（服务端生成→客户端接收），不需要双向
实现简单：基于HTTP，无需额外协议
自动重连：原生支持，断线自动恢复
资源开销小：比WebSocket轻量

怎么连接：

javascript 复制代码

const eventSource = new EventSource('/api/chat/stream')

eventSource.onopen = () => console.log('连接已建立')
eventSource.onmessage = (event) => {
  const data = JSON.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的实现原理"。

实现方式：

触发时机：用户输入时（如代码编辑器、文本输入框）监听变化
防抖：用户停止输入后延迟发送请求，避免频繁调用
上下文构建：收集光标前后的代码/文本，加上文件类型、项目规范等作为Prompt
SSE流式传输：AI返回流式结果，逐字显示
展示交互：灰色预览样式（类似Copilot），Tab键接受补全

javascript 复制代码

// 伪代码示例
let timer
input.addEventListener('input', () => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    const context = getContext() // 光标前后、文件类型
    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，因为上手快，有免费额度做实验。向量维度是1536（OpenAI的embedding模型），索引类型选的是cosine相似度。"

十、简历上的项目，现在做AI占比会有多少，怎么利用AI

回答思路：坦诚评估，既要展现对AI的拥抱，也要体现对核心能力的把控。

示例回答 ：

"如果现在重做，AI占比大概在30%-40%左右，主要体现在：

30%的重复性代码：表单、CRUD接口、类型定义让AI生成
20%的调试：遇到报错先问AI，理解问题再自己改
20%的测试：让AI写单元测试用例，我来review
10%的文档：生成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了。

前端八股文面经大全：bilibili生态技术方向二面 （2026-03-25）·面经深度解析

前言

面经原文内容

💡 木木有话说（刷前先看）

📝 bilibili生态技术方向二面·深度解析

🎯 面试整体画像

🔍 逐题深度解析

二、怎么用AI coding，用的什么工具

三、了解SDD、spec coding吗

四、AGENTS.md里应该写什么，和README的区别

五、如何让AI遵守项目规范

六、项目介绍：为什么用RAG，RAG存些什么

七、SSE介绍、为什么用、怎么连接

八、前端AI实时补全怎么做的

九、向量数据库用的是什么

十、简历上的项目，现在做AI占比会有多少，怎么利用AI

十一、产品经理给多个需求，怎么让AI去完成

十二、AI会取代程序员吗

📚 知识点速查表

前端八股文面经大全：bilibili生态技术方向二面（2026-03-25）·面经深度解析