面完网易雷火的前端实习趁脑子里的记忆还热乎着赶紧把整轮流程和面试题整理出来。这份面经不是网上那种面试官问了很多的笼统概括我会尽量还原每一轮的实际对话、题目背后的考察点以及我自己答得好的和翻车的地方。网易雷火大家应该不陌生游戏项目多、前端技术栈偏工程化对实习生的要求说实话比一般业务型公司要高出一截尤其看重基础功底和项目里体现出来的思考深度。准备投前端实习的、尤其是目标冲着大厂去的同学这篇应该能帮你少走不少弯路。1. 投递前我做了什么简历、项目和知识点三线并行的准备1.1 简历上真正能打的东西先说简历。我见过太多人把简历写成技能罗列大会React、Vue、Webpack、Vite、TypeScript全部写上结果面试官随便从里面挑一个问细节就答不上来。网易雷火这种级别的公司简历上每一条技能都要做好被深挖的准备宁缺毋滥。我最后定稿的简历里技术栈只写了五项HTML/CSS、JavaScript、TypeScript、Vue3、React。每一项都在面试前自己问了自己至少十个为什么。比如写JavaScript就要能答出来原型链到底怎么走、事件循环和宏任务微任务的区别是什么、闭包造成的内存泄漏怎么排查。写Vue3就要能解释computed和watch的底层区别、nextTick的原理、依赖收集的完整链路。项目方面我放了两个一个Vue3的组件库项目一个React的协作白板项目。项目描述里没有用实现了XXX功能这种被动句式而是写独立设计并封装了XXX组件解决XXX问题将页面渲染时间降低40%。数字很重要但更重要的是每个数字背后的方法论你得讲得出来。那个40%是怎么测出来的用的是什么工具优化前后差在哪里这些被追问的概率几乎是百分之百。1.2 复习优先级怎么排网易雷火的面试风格是基础题不会直接问你什么是闭包而是给你一段代码让你说出输出结果或者让你手写一个场景。所以复习的时候光背概念没用得动手写、动脑推。我从确定投递到真正面试大概留了两周时间。每天的安排是这样的早上两小时刷算法题重点放在数组、字符串、链表、二叉树这四类因为前端面试的算法难度一般不会超过LeetCode中等但要求你审题快、代码规范。下午三小时过JavaScript核心知识点。推荐《你不知道的JavaScript》上卷加MDN把闭包、this、原型、异步这几块反复咀嚼。晚上两小时框架源码分析。不用把整个源码读完但要能讲清楚核心机制。Vue3的响应式原理、diff算法、编译流程React的Fiber架构、调和过程、hooks实现思路每个都要能画着图讲给别人听。睡前半小时看面经把高频问题整理到自己的文档里第二天早上再默写一遍答案。这个过程看起来枯燥但效果很直接。面到后面你会发现面试官问来问去就那些东西关键是你有没有真正理解还是只是背了个答案。1.3 项目复盘比写项目更重要我把两个项目分别列了一张问题清单大概每个项目列了三十个可能被追问的问题。比如组件库项目我会问自己Button组件的样式隔离怎么做的主题切换是怎么实现的按需引入用的什么方案原理是什么发布到npm之后包体积有多大怎么优化协作白板项目的问题更多多人同时画一块画布冲突怎么处理用的是websocket还是轮询连线算法为什么选这个方案其他方案有什么缺陷撤销重做怎么实现的粗线条橡皮擦的算法原理是什么这些问题不一定全被问到但你会发现当你把这三十个问题想明白之后整个项目的逻辑边界和设计取舍就完全清晰了面试时表达出来的层次感完全不一样。2. 一面实录从HTML语义化到浏览器渲染的连环追问2.1 自我介绍和开场一面是技术面面试官是个看起来三十岁左右的工程师一上来没有让我做自我介绍直接说我看你简历上写了两个项目先挑一个你最有把握的讲讲吧。这是个很典型的网易风格开场。我在面经里见过很多次这样的描述但真到自己面对时才知道压力有多大。因为没有标准的问题引导你需要自己组织语言把项目的背景、目标、你的职责、技术选型、遇到的难点、最后的成果完整地讲出来。我大概讲了三分钟讲完之后面试官从里面随便挑了几个点开始追问。第一个追问就非常细节你在组件库项目里做了按需引入用的是babel-plugin-import的方案你解释一下它是怎么实现从import { Button } from xxx到只打包Button对应代码的我当时的回答是从三个层面拆解的第一babel在编译阶段把全量引入的语法树改写成按路径引入的语法树第二transformImport这个插件本质上做的是字符串级别的路径重写第三配合ES Module的tree-shaking才能做到真正意义上的按需加载。面试官听完点了点头又追问了一句那如果不用这个插件纯靠ES Module本身的tree-shaking能不能实现按需引入这是个坑我答了能但不是完全能然后解释了为什么在存在副作用的情况下tree-shaking不可靠。2.2 CSS和布局题目前端基础题从CSS开始第一个问题是BFC是什么怎么触发解决什么问题。这类题准备充分的话很容易答但我故意答得结构化了一些先说定义再说触发条件然后举了三个经典场景垂直边距重叠、清除浮动、两栏自适应布局。这里有个小技巧回答的时候可以主动说我举两个实际场景给你演示一下这样会让面试官觉得你是真的会而不是背的。紧接着来了一个手写题给一个移动端页面上面是固定高度的header下面是一个滚动区域用flex布局实现顺便说明一下在iOS上可能遇到的坑。这个题考察的是flex的弹性伸缩属性以及移动端滚动穿透的问题。我在滚动区域加了flex:1; min-height:0; overflow-y:auto;然后解释了一下为什么一定要写min-height:0——因为在flex布局中项目的默认min-height是auto内容多了会把父容器撑开导致滚动区域无法正常工作。iOS那个坑则是关于-webkit-overflow-scrolling: touch废弃之后滚动顺滑度的问题以及建议用position: sticky的替代方案。面试官对这个答案比较满意追问了一句你知道sticky为什么在部分场景下会失效吗把问题引向了相对定位和包含块的原理。2.3 JavaScript核心题目前端面试绕不开JavaScript这部分我提前有了心理准备题目也确实是经典中的经典但追问深度确实比一般公司要狠。第一道是执行顺序题console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);答案我不写了能投雷火的人应该都答得上来。但面试官在我说出答案之后追了一连串问题微任务队列和宏任务队列在执行顺序上到底怎么配合如果promise1的回调里面又new了一个Promise后续的then什么时候执行requestAnimationFrame和setTimeout在事件循环里的位置有什么区别还有一个比较偏的浏览器有几种任务队列除了我们常说的宏任务队列和微任务队列之外还有哪些高优先级队列比如渲染队列在什么时机执行我答到了后面几个问题其实已经很吃力了因为平时很少深入到这个级别。但幸运的是我面试前恰好看过HTML规范里关于event loop的更新部分知道渲染步骤是在微任务清空之后、宏任务取任务之前执行的所以勉强接住了。这一轮给的建议是事件循环不是背一张图就够的一定要去看规范原文至少要把任务队列的分类和执行时机理清楚。第二个是手写防抖和节流这个属于基础送分题。但面试官说不要用箭头函数用普通函数写一个带this绑定的版本并且追问了两个细节防抖的leading参数是怎么实现的如果用户在防抖等待期间连续触发最后一次触发之后还要等多久才能真正执行第三个题考察深拷贝要求解决循环引用问题还要求能正确拷贝Date、RegExp、Map、Set这类特殊对象。我用了WeakMap来存储已拷贝的对象引用用instanceof判断类型走不同的处理分支。面试官追问了WeakMap为什么用weak而不是强引用我答了是为了避免深拷贝过程中如果出现临时对象无法被垃圾回收的泄漏问题。2.4 浏览器和网络基础一面最后的部分是浏览器和网络基础。题目包括从输入URL到页面展示的完整过程、HTTP缓存机制强缓存和协商缓存的区别、HTTPS的握手过程、三次握手和四次挥手的状态变化、WebSocket和HTTP的底层区别。这些题没什么难度但有一个问题很有意思面试官问如果页面加载很慢你会从哪几个方面排查我答了网络请求、资源体积、JS执行阻塞、渲染性能、内存泄漏、服务端响应时间六个方面面试官挨个追问了具体的排查工具和落地手段等于考察你有没有真的在项目里做过性能优化而不只是背了个优化清单。3. 二面实录项目深挖与框架源码的正面硬刚3.1 二面的开场就是我没想到的项目细节二面大概隔了一周面试官应该是更资深的工程师或者TL开场方式直接换了个路数你继续讲你的白板项目我不要听你准备的版本你讲一下多人协同那块整条链路的实现从websocket连接建立开始到消息格式的设计到画布上数据同步到冲突处理一步步讲清楚。这个逼问方式让我有点措手不及。因为之前准备的是亮点和难点这种从头到尾把链路梳理一遍的要求需要你对项目的每一个环节都有完整认知。我努力控制住节奏从websocket服务端部署开始讲讲到了心跳检测机制、消息协议设计、数据序列化方案、本地缓存与服务器数据合并策略、操作优先级和版本号机制这些。中间有个细节被追问了你们用什么格式做协议为什么用JSON有没有考虑过用二进制协议其实我在项目里确实没考虑过二进制协议所以老老实实说了当时的技术选型是基于可维护性和调试便利性同时也分析了如果数据量变大比如高频实时绘制场景确实该考虑用Protocol Buffers或者有损压缩策略。3.2 Vue3和React的对比连环问二面下半场的框架题非常有含量不是单纯问某一个框架的API而是把两个框架放到一起对比考察你理解和选择的逻辑。第一个问题你Vue和React都写了说说你在什么场景下会选Vue什么场景下会选React这种题没有标准答案但深度和条理性决定了你和其他候选人的差距。我答的是偏中小型项目、需要快速上手、团队前后端边界比较清晰的时候选Vue因为模板语法上手成本低响应式系统也让状态管理的心智负担小很多而大型项目、需要高度自定义架构、组件间关系比较复杂、团队倾向于函数式编程风格的时候选React因为React更灵活组合模型更适合复杂抽象。面试官点了点头话题一转那你说说Vue3的响应式是怎么实现的对比Vue2的Object.definePropertyProxy的优势到底在哪。这个问题我非常熟先说了Proxy可以拦截整个对象层面的操作不用像Vue2那样重写每个属性新增属性时也能自动响应数组的变更也能被拦截而不是靠重写数组方法来实现。然后面试官追问了Proxy的整个代理对象是一个完全不同的对象它是怎么实现this绑定的为什么Proxy内部的this指向的是原始对象而不是代理对象。这是个很深的点我愣了一会儿才想起来Proxy通过get、set、apply等trap里的receiver参数来实现对原始对象属性的操作而Reflect系列的对应方法就是配合这个机制的。回答完之后连我自己都觉得这个追问真的很有水平。React问了Fiber架构和hooks具体问题包括React的Fiber树为什么要替换之前的递归渲染Fiber节点上保存了哪些信息为什么hook不能写在条件判断里useEffect和useLayoutEffect区别是什么如果React的setState在短时间内多次调用会触发几次渲染这些问题我答得中规中矩但有一个答案我自己都觉得不够好当问到useEffect的cleanup函数执行时机时我只说了组件卸载时执行面试官补充说实际上每次依赖项变化重新执行effect之前也会先执行上一次的cleanup。这个点我之前看过但实战中没怎么注意所以回答漏掉了。复习的时候如果有条件真的应该写个小demo把这类API的边界行为都试一遍不然面试时很容易在细节上翻车。 React的优先级调度、lane模型、concurrent mode这些也必须懂虽然实习岗不一定问这么深但万一问了而你答不上来印象分就下来了。3.3 工程化题目和一道开放性设计题二面的最后阶段问了工程化相关的东西Webpack的构建流程、Loader和Plugin的区别、写过自定义Loader吗、Vite为什么比Webpack快、ESBuild和SWC的核心原理是什么。Webpack的构建流程我按初始化参数、编译前准备、模块解析、构建模块、生成chunk、输出资源这条主线讲的然后提到了Tapable插件机制是如何贯穿整个生命周期的。Vite的问题我答了利用浏览器原生的ES Module在dev server下不需要打包以及依赖预构建用esbuild做的原因——Go写的比JavaScript快几个数量级。重点来了最后一道开放题是如果让你设计一个前端监控平台上报和告警这两块你会怎么设计你会采集哪些数据怎么保证不影响业务性能这个题考察的是系统设计能力。我从几个层面展开数据采集层采集页面性能指标、JS错误、接口请求情况、用户行为路径、数据上报层动态创建script或img标签打点避免阻塞页面主线程用navigator.sendBeacon处理页面卸载时的数据发送、数据处理层服务端聚合、去重、按维度分析、告警配置层支持自定义规则阈值、分级告警、多渠道通知。性能方面我提出用requestIdleCallback或者空闲时间片来发送数据降低对主线程的影响。面试官在我讲完之后问了一个很实际的问题如果用sendBeacon发送的数据量太大比如几MB你觉得有什么问题我想了想说sendBeacon虽然不阻塞卸载但数据过大会影响网络传输效率和接收端解析性能实际工程里应该先在本地做批量压缩和分片或者用IndexedDB暂存数据后分批发送。面试官听完表示认可这也让我松了口气。4. 三面实录手写题、算法题与综合问答的真实做题过程4.1 手写题Promise.all和发布订阅三面是技术终面大概率是部门负责人或者高P整体风格从前面的追细节转向了看边界。第一道手写题是手写Promise.all要求处理传入数组包含非Promise值的情况并且要处理reject和一个promise失败后整体立即reject。我先把整个结构写出来然后从头到尾讲了一遍自己的代码逻辑。这里有个细节Promise.all真正实现时要注意不依赖外部状态还有一个版手写题是发布订阅模式要求实现on、off、once、emit四个方法。这个题我写得比较快面试官追加了一个问题如果你在off的时候传入了一个注册函数但是想撤销这个函数的某个特定回调你怎么设计API。这类问题考察的其实是数据结构的选型。我的设计是在事件名对应的数组里保存{fn, context}对象off时用filter移除符合条件的项每一个回调都有唯一的idoff的时候可以传id来精确移除。功能又不复杂关键是API设计是否合理以及有没有考虑到并发和重复注册的边界情况。4.2 两道算法题和解题过程三面算法题是两道一道简单偏中等一道中等偏上。第一道是LeetCode原题无重复字符的最长子串变种要求返回的不只是长度而是那个最长的子串本身而且要求用O(n)时间做完。滑窗思路我用一个Map存储字符和索引遍历时更新左指针位置。写完之后面试官问如果字符串里包含Unicode字符你的方案还需要改吗我说如果是编码单元层面的字符可以不改但如果要考虑emoji这类代理对字符需要遍历时按照码点处理不能直接用索引。第二道算法题是二叉树的右视图需要按层输出从右边能看到的节点。我用的层序遍历BFS每层取最后一个节点。写完之后面试官问如果这个树特别深递归会爆栈你有别的方案吗我答可以用迭代用队列。三面的算法题不需要炫技讲究的是在限制条件下思路清晰、代码规范、能应对追问。4.3 综合问答里的软技能考察三面的最后一部分面试官抛了一个综合问题你实习如果进来需要在一个月内从零掌握我们内部的前端框架和工具链你怎么规划如果遇到文档不全、同事很忙没人教你的情况怎么办这类问题考察的是学习能力和主动性。我的回答分成了三个层次先通过阅读现有代码和跑通已有项目来熟悉结构把核心的编译入口、路由配置、组件注册逻辑理清楚然后再去研究文档里缺失的部分通过对比源码里的类型定义和注释来推断设计意图遇到卡住的问题会先自己查如果超过一段时间没有头绪会整理好问题背景和已有的尝试找同事做一次高效的求助而不是让对方手把手教。面试官说这个回答实际、不虚很明显他们不想听到我很擅长学习给我任何任务我都能快速上手这种空话。5. HR面和整体复盘说几个面完才知道的事5.1 HR面顺利但不是走过场技术面全部通过之后是HR面和很多人想象的不太一样雷火的HR面不是随便聊聊有几类问题需要认真准备。HR问了职业规划、为什么选择雷火、对加班的看法、之前有没有过团队协作冲突的经历、怎么解决、实习时间能保证多久、有没有其他offer在手、如果多个offer冲突怎么选。这些坑题里面有没有其他offer这个问题其实是在考察你的诚意和稳定性。我的回答没有绕弯子如实说有其他公司的流程在推进中但明确表达了对游戏行业和雷火技术氛围的兴趣说明自己做选择时更看重团队的技术积累和成长空间而不是单纯比薪资。说完了之后我能感觉到HR是认可的这种时候诚实比堆砌彩虹屁有效得多。5.2 回顾整个流程我踩过的几个坑第一面试时候的项目细节准备还是不够。尤其二面那个从头到尾链路梳理的要求如果不是之前刚好重构过一次协同时序逻辑很可能被问住。给后来人的建议是项目准备的时候不能只准备亮点要把整个项目的所有环节都过一遍假设你是一个刚接手这个项目的人要看着代码能讲清楚每一步。第二React的边界行为我答得不完整。useEffect的cleanup执行时机这个点我在平时的开发中其实会用到但面试时因为紧张回答得不够全面。这说明单靠记忆来应付框架题是危险的真正有效的准备方式是打开一个demo项目把每个API的各种边界情况亲手试一遍形成肌肉记忆。第三是在一面的时候我心里太想把每个题都答得标准导致有些问题的回答用了很长的铺垫。后来发现好的回答应该是先给结论再展开比如面试官问BFC怎么触发先理直气壮地说float、position不为static、overflow不为visible、display为inline-block或flow-root等再展开解释而不是先长篇大论讲概念再给出答案。面试官一天面那么多人简洁有力是加分的。5.3 网易雷火前端实习面经的结论值得投认真面整个流程从投递到拿到offer通知大概用了三周左右其中一面到二面隔了一周二面到三面隔了三天三面到HR面隔了两天HR面之后大约三天收到通过通知。时间线不算短但每一步都能感受到面试官是认真在筛人不是走流程。回头来看网易雷火前端实习面试的核心考察点可以总结成五句话项目不是讲功能是讲技术决策和取舍逻辑基础知识不能光会背概念要能在场景里应用框架原理需要理解到源码级别的某个具体机制而不是只说结论算法题不难但重视复杂度分析和边界处理质量综合面看的是你有没有主动解决问题的习惯和工程直觉如果你也在准备投雷火的前端实习我给的最直接的建议是把简历上每一个字背后的知识点问一遍自己把项目按完整链路重讲一遍把Vue3响应式和React Fiber两条线彻底搞懂再刷五十道高频前端算法题然后带着一个我是真的做过项目、不是背过题的心态上考场。最后再分享一个小技巧面试结束后一定主动问面试官刚才我答的问题里有没有让你觉得需要加强的地方大多数面试官乐意告诉你这些反馈比任何面经都值钱。我每一轮都问了二面面试官就说你的网络基础回答里DNS的完整递归过程讲得还不够细这个提示帮我三面前系统补了一次。面经是别人的反馈才是你自己的。
面完网易雷火的前端实习趁脑子里的记忆还热乎着赶紧把整轮流程和面试题整理出来。这份面经不是网上那种面试官问了很多的笼统概括我会尽量还原每一轮的实际对话、题目背后的考察点以及我自己答得好的和翻车的地方。网易雷火大家应该不陌生游戏项目多、前端技术栈偏工程化对实习生的要求说实话比一般业务型公司要高出一截尤其看重基础功底和项目里体现出来的思考深度。准备投前端实习的、尤其是目标冲着大厂去的同学这篇应该能帮你少走不少弯路。1. 投递前我做了什么简历、项目和知识点三线并行的准备1.1 简历上真正能打的东西先说简历。我见过太多人把简历写成技能罗列大会React、Vue、Webpack、Vite、TypeScript全部写上结果面试官随便从里面挑一个问细节就答不上来。网易雷火这种级别的公司简历上每一条技能都要做好被深挖的准备宁缺毋滥。我最后定稿的简历里技术栈只写了五项HTML/CSS、JavaScript、TypeScript、Vue3、React。每一项都在面试前自己问了自己至少十个为什么。比如写JavaScript就要能答出来原型链到底怎么走、事件循环和宏任务微任务的区别是什么、闭包造成的内存泄漏怎么排查。写Vue3就要能解释computed和watch的底层区别、nextTick的原理、依赖收集的完整链路。项目方面我放了两个一个Vue3的组件库项目一个React的协作白板项目。项目描述里没有用实现了XXX功能这种被动句式而是写独立设计并封装了XXX组件解决XXX问题将页面渲染时间降低40%。数字很重要但更重要的是每个数字背后的方法论你得讲得出来。那个40%是怎么测出来的用的是什么工具优化前后差在哪里这些被追问的概率几乎是百分之百。1.2 复习优先级怎么排网易雷火的面试风格是基础题不会直接问你什么是闭包而是给你一段代码让你说出输出结果或者让你手写一个场景。所以复习的时候光背概念没用得动手写、动脑推。我从确定投递到真正面试大概留了两周时间。每天的安排是这样的早上两小时刷算法题重点放在数组、字符串、链表、二叉树这四类因为前端面试的算法难度一般不会超过LeetCode中等但要求你审题快、代码规范。下午三小时过JavaScript核心知识点。推荐《你不知道的JavaScript》上卷加MDN把闭包、this、原型、异步这几块反复咀嚼。晚上两小时框架源码分析。不用把整个源码读完但要能讲清楚核心机制。Vue3的响应式原理、diff算法、编译流程React的Fiber架构、调和过程、hooks实现思路每个都要能画着图讲给别人听。睡前半小时看面经把高频问题整理到自己的文档里第二天早上再默写一遍答案。这个过程看起来枯燥但效果很直接。面到后面你会发现面试官问来问去就那些东西关键是你有没有真正理解还是只是背了个答案。1.3 项目复盘比写项目更重要我把两个项目分别列了一张问题清单大概每个项目列了三十个可能被追问的问题。比如组件库项目我会问自己Button组件的样式隔离怎么做的主题切换是怎么实现的按需引入用的什么方案原理是什么发布到npm之后包体积有多大怎么优化协作白板项目的问题更多多人同时画一块画布冲突怎么处理用的是websocket还是轮询连线算法为什么选这个方案其他方案有什么缺陷撤销重做怎么实现的粗线条橡皮擦的算法原理是什么这些问题不一定全被问到但你会发现当你把这三十个问题想明白之后整个项目的逻辑边界和设计取舍就完全清晰了面试时表达出来的层次感完全不一样。2. 一面实录从HTML语义化到浏览器渲染的连环追问2.1 自我介绍和开场一面是技术面面试官是个看起来三十岁左右的工程师一上来没有让我做自我介绍直接说我看你简历上写了两个项目先挑一个你最有把握的讲讲吧。这是个很典型的网易风格开场。我在面经里见过很多次这样的描述但真到自己面对时才知道压力有多大。因为没有标准的问题引导你需要自己组织语言把项目的背景、目标、你的职责、技术选型、遇到的难点、最后的成果完整地讲出来。我大概讲了三分钟讲完之后面试官从里面随便挑了几个点开始追问。第一个追问就非常细节你在组件库项目里做了按需引入用的是babel-plugin-import的方案你解释一下它是怎么实现从import { Button } from xxx到只打包Button对应代码的我当时的回答是从三个层面拆解的第一babel在编译阶段把全量引入的语法树改写成按路径引入的语法树第二transformImport这个插件本质上做的是字符串级别的路径重写第三配合ES Module的tree-shaking才能做到真正意义上的按需加载。面试官听完点了点头又追问了一句那如果不用这个插件纯靠ES Module本身的tree-shaking能不能实现按需引入这是个坑我答了能但不是完全能然后解释了为什么在存在副作用的情况下tree-shaking不可靠。2.2 CSS和布局题目前端基础题从CSS开始第一个问题是BFC是什么怎么触发解决什么问题。这类题准备充分的话很容易答但我故意答得结构化了一些先说定义再说触发条件然后举了三个经典场景垂直边距重叠、清除浮动、两栏自适应布局。这里有个小技巧回答的时候可以主动说我举两个实际场景给你演示一下这样会让面试官觉得你是真的会而不是背的。紧接着来了一个手写题给一个移动端页面上面是固定高度的header下面是一个滚动区域用flex布局实现顺便说明一下在iOS上可能遇到的坑。这个题考察的是flex的弹性伸缩属性以及移动端滚动穿透的问题。我在滚动区域加了flex:1; min-height:0; overflow-y:auto;然后解释了一下为什么一定要写min-height:0——因为在flex布局中项目的默认min-height是auto内容多了会把父容器撑开导致滚动区域无法正常工作。iOS那个坑则是关于-webkit-overflow-scrolling: touch废弃之后滚动顺滑度的问题以及建议用position: sticky的替代方案。面试官对这个答案比较满意追问了一句你知道sticky为什么在部分场景下会失效吗把问题引向了相对定位和包含块的原理。2.3 JavaScript核心题目前端面试绕不开JavaScript这部分我提前有了心理准备题目也确实是经典中的经典但追问深度确实比一般公司要狠。第一道是执行顺序题console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);答案我不写了能投雷火的人应该都答得上来。但面试官在我说出答案之后追了一连串问题微任务队列和宏任务队列在执行顺序上到底怎么配合如果promise1的回调里面又new了一个Promise后续的then什么时候执行requestAnimationFrame和setTimeout在事件循环里的位置有什么区别还有一个比较偏的浏览器有几种任务队列除了我们常说的宏任务队列和微任务队列之外还有哪些高优先级队列比如渲染队列在什么时机执行我答到了后面几个问题其实已经很吃力了因为平时很少深入到这个级别。但幸运的是我面试前恰好看过HTML规范里关于event loop的更新部分知道渲染步骤是在微任务清空之后、宏任务取任务之前执行的所以勉强接住了。这一轮给的建议是事件循环不是背一张图就够的一定要去看规范原文至少要把任务队列的分类和执行时机理清楚。第二个是手写防抖和节流这个属于基础送分题。但面试官说不要用箭头函数用普通函数写一个带this绑定的版本并且追问了两个细节防抖的leading参数是怎么实现的如果用户在防抖等待期间连续触发最后一次触发之后还要等多久才能真正执行第三个题考察深拷贝要求解决循环引用问题还要求能正确拷贝Date、RegExp、Map、Set这类特殊对象。我用了WeakMap来存储已拷贝的对象引用用instanceof判断类型走不同的处理分支。面试官追问了WeakMap为什么用weak而不是强引用我答了是为了避免深拷贝过程中如果出现临时对象无法被垃圾回收的泄漏问题。2.4 浏览器和网络基础一面最后的部分是浏览器和网络基础。题目包括从输入URL到页面展示的完整过程、HTTP缓存机制强缓存和协商缓存的区别、HTTPS的握手过程、三次握手和四次挥手的状态变化、WebSocket和HTTP的底层区别。这些题没什么难度但有一个问题很有意思面试官问如果页面加载很慢你会从哪几个方面排查我答了网络请求、资源体积、JS执行阻塞、渲染性能、内存泄漏、服务端响应时间六个方面面试官挨个追问了具体的排查工具和落地手段等于考察你有没有真的在项目里做过性能优化而不只是背了个优化清单。3. 二面实录项目深挖与框架源码的正面硬刚3.1 二面的开场就是我没想到的项目细节二面大概隔了一周面试官应该是更资深的工程师或者TL开场方式直接换了个路数你继续讲你的白板项目我不要听你准备的版本你讲一下多人协同那块整条链路的实现从websocket连接建立开始到消息格式的设计到画布上数据同步到冲突处理一步步讲清楚。这个逼问方式让我有点措手不及。因为之前准备的是亮点和难点这种从头到尾把链路梳理一遍的要求需要你对项目的每一个环节都有完整认知。我努力控制住节奏从websocket服务端部署开始讲讲到了心跳检测机制、消息协议设计、数据序列化方案、本地缓存与服务器数据合并策略、操作优先级和版本号机制这些。中间有个细节被追问了你们用什么格式做协议为什么用JSON有没有考虑过用二进制协议其实我在项目里确实没考虑过二进制协议所以老老实实说了当时的技术选型是基于可维护性和调试便利性同时也分析了如果数据量变大比如高频实时绘制场景确实该考虑用Protocol Buffers或者有损压缩策略。3.2 Vue3和React的对比连环问二面下半场的框架题非常有含量不是单纯问某一个框架的API而是把两个框架放到一起对比考察你理解和选择的逻辑。第一个问题你Vue和React都写了说说你在什么场景下会选Vue什么场景下会选React这种题没有标准答案但深度和条理性决定了你和其他候选人的差距。我答的是偏中小型项目、需要快速上手、团队前后端边界比较清晰的时候选Vue因为模板语法上手成本低响应式系统也让状态管理的心智负担小很多而大型项目、需要高度自定义架构、组件间关系比较复杂、团队倾向于函数式编程风格的时候选React因为React更灵活组合模型更适合复杂抽象。面试官点了点头话题一转那你说说Vue3的响应式是怎么实现的对比Vue2的Object.definePropertyProxy的优势到底在哪。这个问题我非常熟先说了Proxy可以拦截整个对象层面的操作不用像Vue2那样重写每个属性新增属性时也能自动响应数组的变更也能被拦截而不是靠重写数组方法来实现。然后面试官追问了Proxy的整个代理对象是一个完全不同的对象它是怎么实现this绑定的为什么Proxy内部的this指向的是原始对象而不是代理对象。这是个很深的点我愣了一会儿才想起来Proxy通过get、set、apply等trap里的receiver参数来实现对原始对象属性的操作而Reflect系列的对应方法就是配合这个机制的。回答完之后连我自己都觉得这个追问真的很有水平。React问了Fiber架构和hooks具体问题包括React的Fiber树为什么要替换之前的递归渲染Fiber节点上保存了哪些信息为什么hook不能写在条件判断里useEffect和useLayoutEffect区别是什么如果React的setState在短时间内多次调用会触发几次渲染这些问题我答得中规中矩但有一个答案我自己都觉得不够好当问到useEffect的cleanup函数执行时机时我只说了组件卸载时执行面试官补充说实际上每次依赖项变化重新执行effect之前也会先执行上一次的cleanup。这个点我之前看过但实战中没怎么注意所以回答漏掉了。复习的时候如果有条件真的应该写个小demo把这类API的边界行为都试一遍不然面试时很容易在细节上翻车。 React的优先级调度、lane模型、concurrent mode这些也必须懂虽然实习岗不一定问这么深但万一问了而你答不上来印象分就下来了。3.3 工程化题目和一道开放性设计题二面的最后阶段问了工程化相关的东西Webpack的构建流程、Loader和Plugin的区别、写过自定义Loader吗、Vite为什么比Webpack快、ESBuild和SWC的核心原理是什么。Webpack的构建流程我按初始化参数、编译前准备、模块解析、构建模块、生成chunk、输出资源这条主线讲的然后提到了Tapable插件机制是如何贯穿整个生命周期的。Vite的问题我答了利用浏览器原生的ES Module在dev server下不需要打包以及依赖预构建用esbuild做的原因——Go写的比JavaScript快几个数量级。重点来了最后一道开放题是如果让你设计一个前端监控平台上报和告警这两块你会怎么设计你会采集哪些数据怎么保证不影响业务性能这个题考察的是系统设计能力。我从几个层面展开数据采集层采集页面性能指标、JS错误、接口请求情况、用户行为路径、数据上报层动态创建script或img标签打点避免阻塞页面主线程用navigator.sendBeacon处理页面卸载时的数据发送、数据处理层服务端聚合、去重、按维度分析、告警配置层支持自定义规则阈值、分级告警、多渠道通知。性能方面我提出用requestIdleCallback或者空闲时间片来发送数据降低对主线程的影响。面试官在我讲完之后问了一个很实际的问题如果用sendBeacon发送的数据量太大比如几MB你觉得有什么问题我想了想说sendBeacon虽然不阻塞卸载但数据过大会影响网络传输效率和接收端解析性能实际工程里应该先在本地做批量压缩和分片或者用IndexedDB暂存数据后分批发送。面试官听完表示认可这也让我松了口气。4. 三面实录手写题、算法题与综合问答的真实做题过程4.1 手写题Promise.all和发布订阅三面是技术终面大概率是部门负责人或者高P整体风格从前面的追细节转向了看边界。第一道手写题是手写Promise.all要求处理传入数组包含非Promise值的情况并且要处理reject和一个promise失败后整体立即reject。我先把整个结构写出来然后从头到尾讲了一遍自己的代码逻辑。这里有个细节Promise.all真正实现时要注意不依赖外部状态还有一个版手写题是发布订阅模式要求实现on、off、once、emit四个方法。这个题我写得比较快面试官追加了一个问题如果你在off的时候传入了一个注册函数但是想撤销这个函数的某个特定回调你怎么设计API。这类问题考察的其实是数据结构的选型。我的设计是在事件名对应的数组里保存{fn, context}对象off时用filter移除符合条件的项每一个回调都有唯一的idoff的时候可以传id来精确移除。功能又不复杂关键是API设计是否合理以及有没有考虑到并发和重复注册的边界情况。4.2 两道算法题和解题过程三面算法题是两道一道简单偏中等一道中等偏上。第一道是LeetCode原题无重复字符的最长子串变种要求返回的不只是长度而是那个最长的子串本身而且要求用O(n)时间做完。滑窗思路我用一个Map存储字符和索引遍历时更新左指针位置。写完之后面试官问如果字符串里包含Unicode字符你的方案还需要改吗我说如果是编码单元层面的字符可以不改但如果要考虑emoji这类代理对字符需要遍历时按照码点处理不能直接用索引。第二道算法题是二叉树的右视图需要按层输出从右边能看到的节点。我用的层序遍历BFS每层取最后一个节点。写完之后面试官问如果这个树特别深递归会爆栈你有别的方案吗我答可以用迭代用队列。三面的算法题不需要炫技讲究的是在限制条件下思路清晰、代码规范、能应对追问。4.3 综合问答里的软技能考察三面的最后一部分面试官抛了一个综合问题你实习如果进来需要在一个月内从零掌握我们内部的前端框架和工具链你怎么规划如果遇到文档不全、同事很忙没人教你的情况怎么办这类问题考察的是学习能力和主动性。我的回答分成了三个层次先通过阅读现有代码和跑通已有项目来熟悉结构把核心的编译入口、路由配置、组件注册逻辑理清楚然后再去研究文档里缺失的部分通过对比源码里的类型定义和注释来推断设计意图遇到卡住的问题会先自己查如果超过一段时间没有头绪会整理好问题背景和已有的尝试找同事做一次高效的求助而不是让对方手把手教。面试官说这个回答实际、不虚很明显他们不想听到我很擅长学习给我任何任务我都能快速上手这种空话。5. HR面和整体复盘说几个面完才知道的事5.1 HR面顺利但不是走过场技术面全部通过之后是HR面和很多人想象的不太一样雷火的HR面不是随便聊聊有几类问题需要认真准备。HR问了职业规划、为什么选择雷火、对加班的看法、之前有没有过团队协作冲突的经历、怎么解决、实习时间能保证多久、有没有其他offer在手、如果多个offer冲突怎么选。这些坑题里面有没有其他offer这个问题其实是在考察你的诚意和稳定性。我的回答没有绕弯子如实说有其他公司的流程在推进中但明确表达了对游戏行业和雷火技术氛围的兴趣说明自己做选择时更看重团队的技术积累和成长空间而不是单纯比薪资。说完了之后我能感觉到HR是认可的这种时候诚实比堆砌彩虹屁有效得多。5.2 回顾整个流程我踩过的几个坑第一面试时候的项目细节准备还是不够。尤其二面那个从头到尾链路梳理的要求如果不是之前刚好重构过一次协同时序逻辑很可能被问住。给后来人的建议是项目准备的时候不能只准备亮点要把整个项目的所有环节都过一遍假设你是一个刚接手这个项目的人要看着代码能讲清楚每一步。第二React的边界行为我答得不完整。useEffect的cleanup执行时机这个点我在平时的开发中其实会用到但面试时因为紧张回答得不够全面。这说明单靠记忆来应付框架题是危险的真正有效的准备方式是打开一个demo项目把每个API的各种边界情况亲手试一遍形成肌肉记忆。第三是在一面的时候我心里太想把每个题都答得标准导致有些问题的回答用了很长的铺垫。后来发现好的回答应该是先给结论再展开比如面试官问BFC怎么触发先理直气壮地说float、position不为static、overflow不为visible、display为inline-block或flow-root等再展开解释而不是先长篇大论讲概念再给出答案。面试官一天面那么多人简洁有力是加分的。5.3 网易雷火前端实习面经的结论值得投认真面整个流程从投递到拿到offer通知大概用了三周左右其中一面到二面隔了一周二面到三面隔了三天三面到HR面隔了两天HR面之后大约三天收到通过通知。时间线不算短但每一步都能感受到面试官是认真在筛人不是走流程。回头来看网易雷火前端实习面试的核心考察点可以总结成五句话项目不是讲功能是讲技术决策和取舍逻辑基础知识不能光会背概念要能在场景里应用框架原理需要理解到源码级别的某个具体机制而不是只说结论算法题不难但重视复杂度分析和边界处理质量综合面看的是你有没有主动解决问题的习惯和工程直觉如果你也在准备投雷火的前端实习我给的最直接的建议是把简历上每一个字背后的知识点问一遍自己把项目按完整链路重讲一遍把Vue3响应式和React Fiber两条线彻底搞懂再刷五十道高频前端算法题然后带着一个我是真的做过项目、不是背过题的心态上考场。最后再分享一个小技巧面试结束后一定主动问面试官刚才我答的问题里有没有让你觉得需要加强的地方大多数面试官乐意告诉你这些反馈比任何面经都值钱。我每一轮都问了二面面试官就说你的网络基础回答里DNS的完整递归过程讲得还不够细这个提示帮我三面前系统补了一次。面经是别人的反馈才是你自己的。
