前端八股文面经大全：腾讯CSIG实习面（2026-04-10）·面经深度解析

前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。专栏快速地址温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司腾讯CSIG面试时间近期面试岗位前端一面面试体验实习拷打八股追问手撕很难反问没有第二天挂了❓面试问题八股拷打流式输出的原理为什么用SSE不用axios他们在http上有什么区别讲讲http1,1.1,2,3他们是为了做什么优化才更新的埋点的意义vue的计算属性的原理有了解过浏览器安全的知识吗XSS是什么知道吗UDP是怎么保证通讯可靠http请求的流程知道吗有用框架写过东西吗现在工作中你写逻辑还是样式流式输出前端怎么样从后台拿到数据有没有什么做的不好的地方JS事件循环了解过吗优点缺点为什么你说AI对你埋点的帮助不大有用过Vux这种的什么场景下需要他你说到面包屑面包屑只是弄个数组存起来然后拿出来用吗他的难点在哪虚拟列表的原理有没有别的方案你说的insectionObserver是什么他怎么实现虚拟列表你觉得最考验你的部分是什么JS闭包了解过吗他是为了解决什么问题存在的手撕22. 高性能Top K频繁子串查询系统来源牛客网 ShipDance木木有话说刷前先看腾讯CSIG这场一面对于实习来说应该难度不小了特别是手撕环节人在紧张的时候如果没有对应训练的话现想现实现挂人的概率比较大其实如果实在写不出来也可以把思路告诉面试官一定记住。这份面经提醒我们大厂面试基础不牢地动山摇。 腾讯CSIG前端一面·深度解析面试整体画像维度特征面试风格硬核八股型 深度追问型 实战手撕型难度评级⭐⭐⭐⭐四星半基础深度算法难度高考察重心网络协议HTTP/SSE、流式原理、浏览器安全、Vue原理、事件循环、高频算法特殊之处手撕“Top K频繁子串”难度很高反问环节都没有逐题深度解析一、流式输出的原理回答思路流式输出是指服务端分块发送数据客户端逐步接收和渲染。原理服务端设置响应头Content-Type: text/event-stream或Transfer-Encoding: chunked客户端使用EventSource或fetchReadableStream接收数据以块chunk形式传输每收到一块就立即处理不等全部数据适用于大文件下载、AI对话、实时日志// 客户端流式接收constresponseawaitfetch(/api/stream)constreaderresponse.body.getReader()constdecodernewTextDecoder()while(true){const{done,value}awaitreader.read()if(done)breakconstchunkdecoder.decode(value)console.log(收到数据块:,chunk)}二、为什么用SSE不用axios他们在HTTP上有什么区别回答思路axios是基于Promise的HTTP客户端默认等待完整响应SSE是服务端推送协议。核心区别axios请求-响应模式一次请求返回完整数据不支持流式SSE建立持久连接服务端可多次推送数据客户端逐块接收HTTP层面区别axios使用标准HTTP请求响应完成后连接关闭或Keep-Alive复用SSE使用text/event-stream类型连接保持打开服务端持续写入数据为什么AI场景用SSEAI生成需要逐字输出SSE支持流式axios只能等全部生成完再返回。三、讲讲http1,1.1,2,3他们是为了做什么优化才更新的回答思路每个版本的更新都是为了解决前一个版本的性能瓶颈。版本核心特性解决的问题遗留问题HTTP/1.0短连接每次请求建立TCP基础通信连接开销大HTTP/1.1长连接Keep-Alive、管道化、host头减少连接开销队头阻塞HTTP/2多路复用、头部压缩、服务器推送、二进制分帧解决队头阻塞、减少头部冗余TCP队头阻塞HTTP/3基于UDPQUIC、0-RTT连接、独立流解决TCP队头阻塞、减少握手延迟部署较新关键演进1.0→1.1解决连接复用1.1→2解决并发请求2→3解决TCP队头阻塞。四、埋点的意义回答思路埋点是数据采集的基础用于产品分析、性能监控、用户行为追踪。意义产品决策分析用户行为点击、停留、转化指导产品迭代性能监控采集页面加载时间、接口响应时间、错误率用户画像收集用户偏好、使用习惯A/B测试对比不同方案的效果异常告警发现JS错误、接口异常// 埋点示例track(button_click,{button_name:submit,page:checkout,user_id:123})五、Vue计算属性的原理回答思路计算属性是基于响应式依赖缓存的getter函数。原理计算属性本质是一个computedwatcher首次访问时执行getter收集依赖响应式数据依赖变化时标记dirty但不立即重新计算再次访问计算属性时若dirty则重新计算并缓存结果否则返回缓存值特点缓存依赖不变时不重新计算性能好懒计算只有被使用时才计算响应式依赖变化时自动更新// 简化版实现functioncomputed(getter){letvalueletdirtytrueconsteffect(){dirtytrue}// 收集依赖track(getter,effect)return{getvalue(){if(dirty){valuegetter()dirtyfalse}returnvalue}}}六、浏览器安全知识回答思路常见Web安全攻击及防御。主要攻击类型XSS跨站脚本攻击注入恶意脚本CSRF跨站请求伪造伪造用户请求点击劫持透明iframe诱导点击SQL注入输入恶意SQL语句防御措施输入校验、输出转义CSP内容安全策略CSRF Token、SameSite CookieX-Frame-Options七、XSS是什么回答思路XSSCross-Site Scripting是攻击者注入恶意脚本到网页中。类型反射型恶意脚本通过URL参数传入服务端反射回页面存储型恶意脚本存储到数据库访问页面时执行DOM型通过修改DOM动态执行防御对用户输入进行转义→lt;使用CSP限制脚本来源设置HttpOnlyCookie防止JS读取八、UDP是怎么保证通讯可靠回答思路UDP本身不保证可靠可靠传输需要上层实现如QUIC、RUDP。UDP特点无连接、不可靠、无拥塞控制、无顺序保证。上层实现可靠性的方法ACK确认接收方确认收到超时重传发送方超时未收到ACK则重传序列号解决乱序和重复流量控制动态调整发送速率应用层协议QUICHTTP/3底层、WebRTC、KCP。九、HTTP请求流程回答思路从URL输入到页面渲染的完整链路。DNS解析域名 → IP地址TCP连接三次握手TLS握手HTTPS协商加密密钥发送请求构建HTTP请求报文服务端处理接收请求处理逻辑返回响应返回HTTP响应报文浏览器解析解析HTML、CSS、JS渲染页面构建DOM树、渲染树、布局、绘制TCP关闭四次挥手十、流式输出前端如何从后台拿到数据回答思路两种主流方式。方式一EventSourceSSEconstsourcenewEventSource(/api/stream)source.onmessage(e){console.log(JSON.parse(e.data))}方式二Fetch ReadableStreamconstresponseawaitfetch(/api/stream)constreaderresponse.body.getReader()constdecodernewTextDecoder()while(true){const{done,value}awaitreader.read()if(done)breakconstchunkdecoder.decode(value)// 处理chunk}十一、JS事件循环的优点和缺点回答思路事件循环是JS异步模型的实现机制。优点非阻塞异步操作不阻塞主线程UI保持响应简单单线程模型无需处理锁、竞态条件适合I/O密集型网络请求、文件读写等缺点CPU密集型任务会阻塞大量计算会导致页面卡死任务优先级不精细微任务可能长时间占用主线程无法利用多核需要Web Worker辅助十二、VuexVux的使用场景回答思路Vuex是Vue的状态管理库用于管理全局共享状态。适用场景多个组件共享同一状态如用户信息、购物车跨页面/跨组件的数据通信需要持久化的状态配合localStorage复杂的状态变更逻辑actions mutations不适用场景简单的父子组件通信、独立组件内部状态。十三、面包屑的难点回答思路用户质疑“面包屑只是数组存储吗”说明面试官期望更深的理解。难点动态路由路由参数变化时面包屑需要响应更新嵌套路由多级路由层级如何正确映射到面包屑权限控制某些路由用户无权限访问面包屑应跳过国际化面包屑文本需要支持多语言性能高频路由切换时面包屑计算不能拖慢页面// 动态生成面包屑constbreadcrumbscomputed((){constmatchedroute.matchedreturnmatched.filter(recordrecord.meta?.breadcrumb!false).map(record({name:t(record.meta?.title),path:record.path}))})十四、虚拟列表的原理及其他方案回答思路虚拟列表只渲染可视区域的DOM节点。原理计算可视区域能容纳的节点数visibleCount containerHeight / itemHeight监听滚动计算startIndex Math.floor(scrollTop / itemHeight)只渲染startIndex到startIndex visibleCount的节点用占位撑高滚动条其他方案分页加载适合滚动触底加载时间分片分批渲染节点requestIdleCallbackCanvas渲染极高性能要求场景十五、IntersectionObserver如何实现虚拟列表回答思路IntersectionObserver监听元素是否进入可视区。实现思路创建哨兵元素放在列表开头和结尾使用IntersectionObserver监听哨兵当顶部哨兵进入可视区加载上一页数据当底部哨兵进入可视区加载下一页数据constobservernewIntersectionObserver((entries){entries.forEach(entry{if(entry.isIntersecting){if(entry.target.idbottom-sentinel){loadMore()}}})})observer.observe(bottomSentinel)与滚动监听的比较IntersectionObserver性能更好不占用主线程。十六、JS闭包及解决的问题回答思路参考之前面经。闭包定义函数可以访问其外部作用域的变量即使外部函数已执行完毕。解决的问题封装私有变量模块模式避免全局污染保存状态防抖、节流中保存timer回调函数事件处理中保存引用函数工厂根据参数生成特定功能的函数// 封装私有变量functioncreateCounter(){letcount0return{increment:()count,decrement:()--count,getCount:()count}}十七、手撕高性能Top K频繁子串查询系统题目给定一个字符串找出出现频率最高的K个子串长度可指定或可变。解题思路滑动窗口枚举所有子串使用哈希表统计频率使用最小堆维护Top KfunctiontopKFrequentSubstrings(s,k,minLen1,maxLen10){constfreqnewMap()// 枚举所有子串for(letlenminLen;lenmaxLen;len){for(leti0;is.length-len;i){constsubs.substring(i,ilen)freq.set(sub,(freq.get(sub)||0)1)}}// 使用最小堆维护Top Kconstheap[]for(const[sub,count]offreq){if(heap.lengthk){heap.push({sub,count})heap.sort((a,b)a.count-b.count)}elseif(countheap[0].count){heap[0]{sub,count}heap.sort((a,b)a.count-b.count)}}returnheap.sort((a,b)b.count-a.count)}优化方向使用后缀数组 最长公共前缀LCP优化使用字典树Trie统计使用滚动哈希Rabin-Karp避免重复计算复杂度暴力枚举O(n²)优化后可达O(n log n)。知识点速查表知识点核心要点流式输出分块传输、ReadableStream、SSESSE vs axiosSSE长连接流式、axios请求-响应HTTP版本演进1.1长连接、2多路复用、3基于UDP埋点行为分析、性能监控、异常告警计算属性缓存、懒计算、依赖收集XSS反射型/存储型/DOM型转义CSP防御UDP可靠性上层实现ACK、重传、序列号事件循环优点非阻塞缺点CPU任务阻塞虚拟列表可视区渲染、IntersectionObserver、分页闭包私有变量、状态保存、函数工厂Top K子串滑动窗口哈希最小堆后缀数组优化 最后一句腾讯CSIG这场一面是一份“硬核基础高难度算法”的面经。从流式输出原理到HTTP版本演进从UDP可靠性到Top K子串查询面试官几乎问遍了网络、安全、框架、算法等核心领域。用户反馈“手撕也没整会”第二天就挂了。这提醒我们大厂面试基础八股要深挖到原理层面手撕算法要练到中高难度。只有准备到“超标”才能从容应对。