前言
大家好，我是木斯佳。
相信很多人都感受到了，在AI浪潮的席卷之下，前端领域的门槛在变高，纯粹的"增删改查"岗位正在肉眼可见地减少。曾经热闹非凡的面经分享，如今也沉寂了许多。但我们都知道，市场的潮水退去，留下的才是真正在踏实准备、努力沉淀的人。学习的需求，从未消失，只是变得更加务实和深入。
这个专栏的初衷很简单：拒绝过时的、流水线式的PDF引流贴，专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上，尝试从面试官的角度去拆解问题背后的逻辑，而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招，目标是中大厂还是新兴团队，只要是真实发生、有价值的面试经历，我都会在这个专栏里为你沉淀下来。专栏快速地址
温馨提示：市面上的面经鱼龙混杂，甄别真伪、把握时效，是我们对抗内卷最有效的武器。
面经原文内容
📍面试公司：腾讯-CSIG
🕐面试时间：近期
💻面试岗位：前端实习（已OC）
二面
- 实现流式传输，为什么选择RXJS，而不是用原生的event source？ RXJS的核心价值是什么？
- SSE 和 WebSocket 有什么区别？
- 流式输出的话在前端怎么渲染的？是逐字的去追加 DOM 呢？还是做缓冲区批量更新？有没有遇到一个频繁的DOM 更新导致的性能问题
- 文件上传解析这部分前端主要负责的哪些部分？主要做了些什么？
- 在这个项目中，你觉得前端部分和后端部分的工作量大概是什么比例？
- keepalive的作用
- typescript 的 type 和interface有什么区别？
- BFC是什么？
- 从这个浏览器地址栏输入一个 URL 地址到页面呈现的一个过程
- webpack和vite
- 算法题：防抖
- 前面几次面试的不足点
- vue、node更擅长哪一块？
- 职业发展方向？
- AI 的这个辅助编码和独立编码怎么看
- 让你快速上手react ，会有一些什么方式
三面
- 实习经历
- 为什么会考虑前端开发
- 自学前端的学习路径
- 选一个有挑战性的项目讲讲，有没有可以优化的点
- 学习 AI 大概多久了
- skill 跟 MCP 有什么区别
- 有开发过 skill 吗
- openclaw怎么实现用户需求的
- 个人规划
- 实现一个谷歌、百度首页搜索框要注意哪些点？
- 算法：找一个链表中间的节点、找一个链表倒数第n个节点
来源：牛客网 een_1
💡 木木有话说（刷前先看）
腾讯这场完整的暑期实习面经，是一份"工程化+AI素养"的典范。一面（前文已发）聚焦HTTP协议与性能优化，二面深挖流式传输与渲染优化，三面转向项目复盘与AI工程化认知。
📝 腾讯前端实习二面·深度解析
🎯 面试整体画像
| 维度 | 特征 |
|---|---|
| 面试风格 | 技术选型深挖型 + 渲染优化实战型 + 工程素养考察型 |
| 难度评级 | ⭐⭐⭐⭐（四星，RxJS响应式、流式渲染策略较深） |
| 考察重心 | 流式传输实现、渲染性能优化、前端工程化、AI辅助开发认知 |
🔍 逐题深度解析（二面）
一、为什么选择RxJS而不是原生EventSource
回答思路 ：RxJS的核心价值是响应式编程范式 和强大的操作符组合。
原生EventSource的局限：
- API简单，只提供基本的
onmessage、onerror - 无内置重连策略、无背压控制
- 难以组合多个数据流
RxJS的优势：
- 操作符丰富 ：
debounceTime(防抖)、bufferTime(批量)、retry(重试)、throttleTime(节流) - 统一抽象 ：SSE、WebSocket、用户点击等统一用
Observable处理 - 背压控制：控制数据生产速度，避免压垮渲染
- 可组合性：多个流可以合并、分流、转换
javascript
import { fromEvent, bufferTime, throttleTime } from 'rxjs'
const source = new EventSource('/stream')
const observable = fromEvent(source, 'message')
.pipe(
map(e => JSON.parse(e.data)),
bufferTime(100), // 每100ms批量输出
throttleTime(50) // 每50ms最多处理一次
)
observable.subscribe(chunks => renderBatch(chunks))二、SSE和WebSocket的区别
| 维度 | SSE (Server-Sent Events) | WebSocket |
|---|---|---|
| 通信方向 | 单向（服务端→客户端） | 全双工（双向） |
| 协议 | HTTP（更简单） | WS/WSS（需握手升级） |
| 自动重连 | 内置 | 手动实现 |
| 二进制数据 | 需Base64编码 | 原生支持 |
| 适用场景 | 实时通知、AI流式对话 | 聊天室、游戏、协同编辑 |
三、流式输出的前端渲染策略与性能优化
回答思路 ：逐字追加DOM会有性能问题，应采用缓冲区批量更新。
逐字追加的问题：
- 高频DOM操作触发大量重排/重绘
- 浏览器渲染压力大，可能掉帧
- Markdown等格式每收到chunk都全量解析，浪费CPU
优化方案：
| 问题 | 优化策略 |
|---|---|
| 高频更新 | requestAnimationFrame节流，合并多个chunk |
| 全量解析 | 增量解析Markdown，只处理新增部分 |
| 代码块闪烁 | 缓存代码块片段，完整后再高亮 |
| 布局抖动 | 预留占位，固定高度 |
| 长消息 | 虚拟滚动，只渲染可视区域 |
javascript
let buffer = ''
let rafId = null
source.onmessage = (e) => {
buffer += e.data
if (rafId === null) {
rafId = requestAnimationFrame(() => {
messageDiv.innerHTML = marked.parse(buffer) // 批量渲染
rafId = null
})
}
}六、keep-alive的作用
回答思路 ：Vue的<keep-alive>用于缓存组件实例，避免重复渲染。
适用场景：
- 标签页切换（如Tab组件）
- 列表进入详情再返回，缓存列表状态
- 多步骤表单缓存已填数据
生命周期变化 ：被缓存组件多出activated（进入时）和deactivated（离开时）钩子。
七、TypeScript type和interface的区别
| 维度 | interface |
type |
|---|---|---|
| 声明合并 | ✅ 同名自动合并 | ❌ 不可 |
| 扩展 | extends |
&（交叉类型） |
| 实现类 | implements |
❌ 不支持 |
| 适用类型 | 对象/函数/类 | 对象/联合/元组/原始类型 |
| 计算属性 | ❌ | ✅（`type Keys = 'a' |
最佳实践 ：优先用interface（性能好、可扩展），需要联合类型等再用type。
八、BFC（块级格式化上下文）
定义：独立渲染区域，内部元素与外部隔离。
触发条件 ：overflow: hidden/auto、float不为none、position: absolute/fixed、display: flex/inline-block、display: flow-root
解决的问题：
- 清除浮动（父元素包裹浮动子元素）
- 防止margin重叠（相邻块级元素上下margin合并）
- 自适应两栏布局（左侧浮动，右侧触发BFC）
九、URL输入到页面呈现的完整过程
- DNS解析：域名 → IP
- TCP三次握手：建立连接
- TLS握手（HTTPS）：协商加密密钥
- 发送HTTP请求
- 服务端处理并返回响应
- 浏览器解析HTML → DOM树
- 解析CSS → CSSOM树
- 合成渲染树（Render Tree）
- 布局（Layout）：计算几何信息
- 分层（Layer）：生成图层树
- 绘制（Paint）：生成绘制指令
- 合成（Composite）：GPU合成并显示
十、Webpack和Vite的区别
| 维度 | Webpack | Vite |
|---|---|---|
| 开发环境 | 打包所有模块，启动慢 | 利用ESM不打包，秒启动 |
| 热更新 | 重新打包相关模块 | 只更新变更的模块 |
| 生产打包 | 打包成bundle | 使用Rollup预打包 |
| 配置复杂度 | 高 | 低 |
十一、手撕防抖
javascript
function debounce(fn, delay) {
let timer = null
return function(...args) {
clearTimeout(timer)
timer = setTimeout(() => fn.apply(this, args), delay)
}
}📝 腾讯前端实习三面·深度解析
🎯 面试整体画像
| 维度 | 特征 |
|---|---|
| 面试风格 | 项目复盘型 + AI工程化型 + 综合素养型 |
| 难度评级 | ⭐⭐⭐（三星，侧重综合能力和项目思考） |
| 考察重心 | 项目优化思路、AI工具认知、前端设计细节、算法 |
🔍 逐题深度解析（三面）
六、Skill和MCP的区别
| 维度 | Skill | MCP (Model Context Protocol) |
|---|---|---|
| 定位 | 预定义能力单元 | 标准化交互协议 |
| 粒度 | 任务级（代码审查、生成单测） | 系统级（工具/资源调用规范） |
| 实现 | Prompt + 工具描述 | 客户端-服务器架构 |
| 例子 | "生成单元测试Skill" | MCP Server连接数据库、文件系统 |
关系：Skill可以基于MCP实现，MCP是更底层的协议。
八、openclaw怎么实现用户需求的
回答思路：openclaw（类似OpenHands）是AI软件工程师，通过Agent + 工具调用实现需求。
核心流程：
- 理解需求：解析用户自然语言输入
- 任务规划：拆解成子任务（分析代码 → 设计方案 → 编码 → 测试）
- 工具调用：读写文件、执行命令、搜索代码库
- 迭代执行：根据中间结果调整计划
- 输出交付：生成代码、运行测试、部署
text
用户："添加一个登录功能"
Agent规划：分析现有代码 → 设计数据库表 → 实现API → 开发前端页面 → 编写测试
工具调用：read_file, write_file, run_command十、实现谷歌/百度首页搜索框要注意的点
回答思路：从功能、性能、安全、体验多维度思考。
功能要点：
- 输入联想（debounce防抖，请求缓存）
- 回车/点击按钮搜索
- 关键词回填到输入框
性能优化：
- 防抖控制联想请求频率
- 预连接搜索引擎（
<link rel="preconnect">） - 缓存联想结果
安全性：
- 输出转义（XSS防护）
- CSRF Token
用户体验：
- 清除按钮、历史记录
- 键盘导航（上下键选择联想词）
- 搜索热键（
Cmd/Ctrl + K）
可访问性：
- 屏幕阅读器支持（
aria-label） - 焦点管理
十一、算法题
找链表中间节点（快慢指针）
javascript
function findMiddle(head) {
let slow = head, fast = head
while (fast && fast.next) {
slow = slow.next
fast = fast.next.next
}
return slow
}找链表倒数第n个节点（双指针）
javascript
function findNthFromEnd(head, n) {
let fast = head, slow = head
for (let i = 0; i < n; i++) fast = fast.next
while (fast) {
slow = slow.next
fast = fast.next
}
return slow
}📚 知识点速查表
| 知识点 | 核心要点 |
|---|---|
| RxJS | 响应式编程、操作符组合（bufferTime/throttleTime） |
| 流式渲染 | rAF批量更新、增量解析、避免高频DOM操作 |
| keep-alive | 缓存组件实例，避免重复渲染 |
| interface vs type | 接口可合并/扩展，类型可定义联合/元组 |
| BFC | 独立渲染区域，清除浮动、防止margin重叠 |
| URL到页面 | DNS→TCP→TLS→请求→解析→渲染→合成 |
| Vite vs Webpack | 开发环境不打包，秒启动；HMR更快 |
| Skill vs MCP | 任务能力单元 vs 交互协议 |
| 搜索框 | 防抖联想、XSS防护、键盘导航、预连接 |
| 链表算法 | 快慢指针（中间节点、倒数第n个） |
📌 最后一句：
腾讯这场二面三面，是一次"从技术深度到工程素养"的全面考察。二面追问RxJS选型、流式渲染策略、构建工具差异，考验你的技术决策能力和性能优化实战 ；三面回归项目复盘、AI工程化认知（Skill/MCP/openclaw）、前端设计细节，考察你的综合工程素养 。用户最终OC，说明能把细节优化做扎实、能把技术选型讲明白、能对AI工具有深度思考，正是当前大厂最需要的人才画像。