前端八股文面经大全：腾讯PCG暑期前端一面（2026-04-01）·面经深度解析

前言大家好我是木斯佳。相信很多人都感受到了在AI浪潮的席卷之下前端领域的门槛在变高纯粹的“增删改查”岗位正在肉眼可见地减少。曾经热闹非凡的面经分享如今也沉寂了许多。但我们都知道市场的潮水退去留下的才是真正在踏实准备、努力沉淀的人。学习的需求从未消失只是变得更加务实和深入。这个专栏的初衷很简单拒绝过时的、流水线式的PDF引流贴专注于收集和整理当下最新、最真实的前端面试资料。我会在每一份面经和八股文的基础上尝试从面试官的角度去拆解问题背后的逻辑而不仅仅是提供一份静态的背诵答案。无论你是校招还是社招目标是中大厂还是新兴团队只要是真实发生、有价值的面试经历我都会在这个专栏里为你沉淀下来。温馨提示市面上的面经鱼龙混杂甄别真伪、把握时效是我们对抗内卷最有效的武器。面经原文内容面试公司腾讯PCG面试时间近期面试岗位暑期前端一面面试体验一次问得更比两次多❓面试问题自我介绍、优势平常怎么接触 AI 编程说了一下我在项目中的单人异步工作流以及对 AI 参与到该工作流的思考由于和 LLM 交流的产出要说起来太长被打断了手撕O(log N) 乘法运算符完全没思路在一步步引导之下做了一个把乘法拆解成位运算和加法的逻辑终于是撕出来了AI 手撕初始化一个项目做一个 iPod 转盘组件转动一定角度就切换菜单高亮项跑通以后问 AI 怎么实现的然后我跑了一个 /doc 加注释那 AI 都有注释了还问你干啥了怎么计算转盘转了多少角度两个坐标求向量夹角、余弦定理被引导之下说了极坐标不是还问高中数学了解哪些 CSS 布局方式标准、浮动、定位、flex、grid说一下盒子模型四个部分、box-sizing 属性flex 有了解吗三个属性闭包让你手写编程语言你会如何实现闭包说了一下 C 的捕获列表C 怎么处理函数栈调用函数入栈函数调用结束弹栈气氛逐渐诡异学校学过汇编语言吗没教过 riscv纯手写 HTTP 服务器怎么写要求从 TCP 握手开始讲降到一次请求-响应的链路还说了请求/响应包体结构说一下 HTTPS 怎么实现的HTTPS 用到了对称加密还是非对称加密都用了非对称加密加密的是对称密钥TypeScript 怎么实现枚举的说了一下枚举值枚举类本质上是什么不知道我说我猜是对象说猜对了怎么查枚举类有没有提供一个值我说应该有原型方法他说你可以查一下说一下实习公司干什么的LLM 生成网页然后说了本人工作介绍项目公式编辑器具体介绍测量和布局做了什么工作一些字母的基线的特性简单介绍日志记录器反问主要工作、实习生任务、对优秀人才的期望聊起来愉快、出结果时间来源牛客网 期望去月球上班木木有话说刷前先看这篇是期望去月球上班的面试其实我觉得难度相对还好啊 其实之前最早校招面试是比较喜欢问计算机基础、设计模式与算法的这个面试官应该是有一定岁数了。 腾讯PCG暑期前端一面·深度解析面试整体画像维度特征面试风格广度覆盖型 底层追问型 实战引导型难度评级⭐⭐⭐三星半-四星跨学科底层算法组件考察重心算法思维、计算机网络、编译原理基础、CSS/JS核心、项目深度特殊之处从高中数学极坐标问到汇编riscv再到HTTP协议细节跨度极大逐题深度解析一、自我介绍与优势回答思路突出与岗位匹配的优势控制在2分钟内。结构建议我是谁学校/年级/实习经历我的技术栈擅长什么深度如何我的亮点项目/竞赛/开源/博客为什么适合这个岗位结合PCG业务如内容生态、社区二、平常怎么接触AI编程回答思路面试官打断了说明要简洁。可以这样说“我在项目中形成了单人异步工作流用Cursor/Copilot生成代码骨架自己负责架构设计和核心逻辑审查。AI帮我处理重复性工作表单、CRUD、单元测试我专注难点攻关。同时我会让AI review我的代码提出优化建议。”三、手撕O(log N) 乘法运算符题目实现乘法运算时间复杂度O(log N)不能用*运算符。思路利用快速幂思想把乘法拆解成加法。functionmultiply(a,b){// 处理符号constsign(a0)^(b0)?-1:1letxMath.abs(a)letyMath.abs(b)letresult0while(y0){if(y1){// 如果当前位是1resultx}x1// x左移一位乘以2y1// y右移一位除以2}returnsign*result}原理把b拆成二进制例如b 13 1101₂则a * 13 a * 8 a * 4 a * 1。四、AI手撕iPod转盘组件题目实现一个iPod转盘转动一定角度切换菜单高亮项。核心难点计算旋转角度、判断顺时针/逆时针、角度到菜单项的映射。// 角度计算利用atan2functiongetAngle(centerX,centerY,startX,startY,endX,endY){conststartAngleMath.atan2(startY-centerY,startX-centerX)constendAngleMath.atan2(endY-centerY,endX-centerX)letdeltaendAngle-startAngle// 处理跨越-π到π边界if(deltaMath.PI)delta-2*Math.PIif(delta-Math.PI)delta2*Math.PIreturndelta// 弧度}映射逻辑总角度变化 阈值如30°→ 切换高亮项顺时针下一个逆时针上一个。五、怎么计算转盘转了多少角度回答思路用户回答“余弦定理”、“极坐标”基本正确。方法记录鼠标/触摸起始点坐标(x1, y1)记录当前点坐标(x2, y2)以转盘中心(cx, cy)为原点计算两个向量的夹角向量1:(x1-cx, y1-cy)向量2:(x2-cx, y2-cy)夹角公式cosθ (v1·v2) / (|v1|*|v2|)用Math.acos得弧度用叉积判断方向v1 × v2 0为逆时针六、CSS布局方式回答思路列举主流布局模式。标准流块级元素垂直排列行内元素水平排列浮动布局float: left/right需清除浮动定位布局relative/absolute/fixed/stickyFlex布局一维布局主轴/交叉轴Grid布局二维布局网格系统七、盒子模型回答思路标准盒子 vs IE盒子。组成部分contentpaddingbordermargin标准盒子width content宽度IE盒子box-sizing: border-boxwidth content padding border八、Flex属性回答思路至少说出三个核心属性。容器属性flex-direction主轴方向、justify-content主轴对齐、align-items交叉轴对齐、flex-wrap换行项目属性flex-grow放大比例、flex-shrink缩小比例、flex-basis基准尺寸九、闭包回答思路参考之前面经的闭包解析。定义函数可以访问其外部作用域的变量即使外部函数已执行完毕。用途封装私有变量、函数工厂、回调保存状态。危害内存泄漏DOM引用未释放。十、如何实现闭包手写编程语言角度回答思路用户回答“C捕获列表”方向正确。实现原理编译器检测到闭包Lambda创建一个匿名结构体/类结构体包含函数指针指向实际代码捕获的变量值捕获或引用捕获调用时通过结构体实例访问捕获的变量// C Lambda底层示意structClosure{intcaptured;voidoperator()(intparam)const{// 函数体可访问captured和param}};十一、C怎么处理函数栈回答思路调用函数时CPU将返回地址、参数、局部变量压入调用栈。流程调用前调用方将参数压栈调用时压入返回地址跳转到函数函数内分配局部变量空间执行返回时恢复栈指针弹出返回地址跳转回去十二、汇编语言回答思路用户学过RISC-V可以简单说明。汇编是机器码的文本表示一条指令对应一个CPU操作。RISC-V是精简指令集指令固定32位有32个通用寄存器。十三、纯手写HTTP服务器从TCP握手开始回答思路考察网络协议栈理解深度。完整链路TCP三次握手客户端发SYN → 服务端回SYNACK → 客户端发ACK建立连接进入ESTABLISHED状态客户端发送HTTP请求GET /index.html HTTP/1.1\r\nHost: ...\r\n\r\n服务端解析请求读取请求行、请求头、空行、body服务端构造响应HTTP/1.1 200 OK\r\nContent-Type: text/html\r\n\r\nhtml...服务端发送响应通过socket send四次挥手关闭连接HTTP包体结构请求行/状态行头部key: value空行\r\n\r\n消息体可选十四、HTTPS怎么实现的回答思路HTTPS HTTP TLS/SSL在TCP之上、HTTP之下加一层安全协议。握手流程客户端发送Client Hello支持的加密套件、随机数服务端回复Server Hello选择套件、服务端随机数 证书客户端验证证书生成Pre-Master Secret用公钥加密发送双方用随机数 Pre-Master生成会话密钥对称密钥后续通信使用对称加密十五、HTTPS用了对称还是非对称加密回答思路都用。非对称加密加密Pre-Master Secret交换对称密钥对称加密加密实际传输的HTTP数据效率高十六、TypeScript怎么实现枚举回答思路TS枚举编译成JS后是对象双向映射。enumColor{Red,Green,Blue}编译成varColor;(function(Color){Color[Color[Red]0]Red;Color[Color[Green]1]Green;Color[Color[Blue]2]Blue;})(Color||(Color{}));结果对象{0:Red,1:Green,2:Blue,Red:0,Green:1,Blue:2}十七、枚举类本质上是什么回答思路用户猜“对象”正确。枚举本质上是一个普通对象同时支持正向和反向映射。十八、怎么查枚举类有没有提供一个值回答思路可以用in操作符或hasOwnProperty。enumColor{Red,Green,Blue}// 检查值是否存在constvalue1if(valueinColor){// true因为Color[1] Greenconsole.log(Color[value])}// 检查键是否存在constkeyRedif(Color.hasOwnProperty(key)){// trueconsole.log(Color[key])}十九、实习公司LLM生成网页回答思路简要说明工作内容突出你的贡献。二十、项目公式编辑器回答思路这是复杂前端项目重点讲技术难点。核心能力公式解析LaTeX → AST渲染Canvas或HTMLCSS光标定位、选区管理键盘输入映射二十一、测量和布局的具体工作回答思路公式编辑器中每个字符/符号有不同尺寸和基线。测量Canvas的measureText()获取文本宽度对于复杂符号需预先定义尺寸元数据。布局根据公式结构分式、根号、上下标递归计算每个子元素的位置。二十二、字母基线的特性回答思路不同字母如’a’和’g’的基线对齐方式不同。基线类型alphabetic baseline字母底部‘a’, ‘x’hanging baseline上部‘f’, ‘ö’ideographic baseline中日韩字符底部公式编辑器需精确处理基线保证公式视觉对齐。二十三、日志记录器回答思路简单说明设计。功能分级日志debug/info/warn/error、可配置输出控制台/文件、性能开销小。classLogger{constructor(levelinfo){...}debug(...args){if(this.shouldLog(debug))console.debug(...args)}// ...}二十四、反问环节回答思路用户问了三个高质量问题。主要工作了解团队业务判断是否感兴趣实习生任务了解成长空间、导师制、能否接触核心对优秀人才的期望了解团队价值观判断匹配度加分反问“您觉得刚才的面试中我在哪些方面还需要加强”“团队目前面临的最大技术挑战是什么”知识点速查表知识点核心要点O(log N)乘法二进制拆解、快速幂思想、位运算加法角度计算atan2、向量夹角、叉积判方向CSS布局标准/浮动/定位/flex/grid盒子模型contentpaddingbordermarginbox-sizingFlexdirection/justify/align/wrapgrow/shrink/basis闭包实现匿名结构体捕获列表存储函数指针变量C函数栈压参→压返回地址→分配局部变量→弹栈HTTP服务器TCP握手→请求解析→响应构造→挥手HTTPSTLS握手→非对称交换密钥→对称加密数据TS枚举编译成对象双向映射用in/hasOwnProperty查公式编辑器解析→测量→布局→渲染基线对齐日志记录器分级、可配置、低开销 最后一句腾讯PCG这场一面是一次对计算机基础的“大阅兵”。从O(log N)乘法到HTTP协议细节从闭包底层实现到TS枚举本质面试官层层深入考察的不是你会不会用框架而是你对计算机体系的理解有多深。用户虽然被问得“气氛逐渐诡异”但能走到反问环节说明硬核基础仍是通关的关键。框架半年一换但算法、网络、编译原理永远是程序员的内功。