前言大家好我是木斯佳。相信很多人都感受到了在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处理背压控制控制数据生产速度避免压垮渲染可组合性多个流可以合并、分流、转换import{fromEvent,bufferTime,throttleTime}fromrxjsconstsourcenewEventSource(/stream)constobservablefromEvent(source,message).pipe(map(eJSON.parse(e.data)),bufferTime(100),// 每100ms批量输出throttleTime(50)// 每50ms最多处理一次)observable.subscribe(chunksrenderBatch(chunks))二、SSE和WebSocket的区别维度SSE (Server-Sent Events)WebSocket通信方向单向服务端→客户端全双工双向协议HTTP更简单WS/WSS需握手升级自动重连内置手动实现二进制数据需Base64编码原生支持适用场景实时通知、AI流式对话聊天室、游戏、协同编辑三、流式输出的前端渲染策略与性能优化回答思路逐字追加DOM会有性能问题应采用缓冲区批量更新。逐字追加的问题高频DOM操作触发大量重排/重绘浏览器渲染压力大可能掉帧Markdown等格式每收到chunk都全量解析浪费CPU优化方案问题优化策略高频更新requestAnimationFrame节流合并多个chunk全量解析增量解析Markdown只处理新增部分代码块闪烁缓存代码块片段完整后再高亮布局抖动预留占位固定高度长消息虚拟滚动只渲染可视区域letbufferletrafIdnullsource.onmessage(e){buffere.dataif(rafIdnull){rafIdrequestAnimationFrame((){messageDiv.innerHTMLmarked.parse(buffer)// 批量渲染rafIdnull})}}六、keep-alive的作用回答思路Vue的keep-alive用于缓存组件实例避免重复渲染。适用场景标签页切换如Tab组件列表进入详情再返回缓存列表状态多步骤表单缓存已填数据生命周期变化被缓存组件多出activated进入时和deactivated离开时钩子。七、TypeScript type和interface的区别维度interfacetype声明合并✅ 同名自动合并❌ 不可扩展extends交叉类型实现类implements❌ 不支持适用类型对象/函数/类对象/联合/元组/原始类型计算属性❌✅type Keys a | b最佳实践优先用interface性能好、可扩展需要联合类型等再用type。八、BFC块级格式化上下文定义独立渲染区域内部元素与外部隔离。触发条件overflow: hidden/auto、float不为none、position: absolute/fixed、display: flex/inline-block、display: flow-root解决的问题清除浮动父元素包裹浮动子元素防止margin重叠相邻块级元素上下margin合并自适应两栏布局左侧浮动右侧触发BFC九、URL输入到页面呈现的完整过程DNS解析域名 → IPTCP三次握手建立连接TLS握手HTTPS协商加密密钥发送HTTP请求服务端处理并返回响应浏览器解析HTML→ DOM树解析CSS→ CSSOM树合成渲染树Render Tree布局Layout计算几何信息分层Layer生成图层树绘制Paint生成绘制指令合成CompositeGPU合成并显示十、Webpack和Vite的区别维度WebpackVite开发环境打包所有模块启动慢利用ESM不打包秒启动热更新重新打包相关模块只更新变更的模块生产打包打包成bundle使用Rollup预打包配置复杂度高低十一、手撕防抖functiondebounce(fn,delay){lettimernullreturnfunction(...args){clearTimeout(timer)timersetTimeout(()fn.apply(this,args),delay)}} 腾讯前端实习三面·深度解析面试整体画像维度特征面试风格项目复盘型 AI工程化型 综合素养型难度评级⭐⭐⭐三星侧重综合能力和项目思考考察重心项目优化思路、AI工具认知、前端设计细节、算法逐题深度解析三面六、Skill和MCP的区别维度SkillMCP (Model Context Protocol)定位预定义能力单元标准化交互协议粒度任务级代码审查、生成单测系统级工具/资源调用规范实现Prompt 工具描述客户端-服务器架构例子“生成单元测试Skill”MCP Server连接数据库、文件系统关系Skill可以基于MCP实现MCP是更底层的协议。八、openclaw怎么实现用户需求的回答思路openclaw类似OpenHands是AI软件工程师通过Agent 工具调用实现需求。核心流程理解需求解析用户自然语言输入任务规划拆解成子任务分析代码 → 设计方案 → 编码 → 测试工具调用读写文件、执行命令、搜索代码库迭代执行根据中间结果调整计划输出交付生成代码、运行测试、部署用户添加一个登录功能 Agent规划分析现有代码 → 设计数据库表 → 实现API → 开发前端页面 → 编写测试 工具调用read_file, write_file, run_command十、实现谷歌/百度首页搜索框要注意的点回答思路从功能、性能、安全、体验多维度思考。功能要点输入联想debounce防抖请求缓存回车/点击按钮搜索关键词回填到输入框性能优化防抖控制联想请求频率预连接搜索引擎link relpreconnect缓存联想结果安全性输出转义XSS防护CSRF Token用户体验清除按钮、历史记录键盘导航上下键选择联想词搜索热键Cmd/Ctrl K可访问性屏幕阅读器支持aria-label焦点管理十一、算法题找链表中间节点快慢指针functionfindMiddle(head){letslowhead,fastheadwhile(fastfast.next){slowslow.next fastfast.next.next}returnslow}找链表倒数第n个节点双指针functionfindNthFromEnd(head,n){letfasthead,slowheadfor(leti0;in;i)fastfast.nextwhile(fast){slowslow.next fastfast.next}returnslow}知识点速查表知识点核心要点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工具有深度思考正是当前大厂最需要的人才画像。