前端面试这条路上我一直保持着“边面边整理”的习惯。0528这批面经是我把最近一段时间和朋友们的真实面试经历汇总后做的复盘覆盖了大厂、中厂和创业公司岗位从初级前端到高级前端都有。整理出来的内容比较杂但每一条都是真实被问过的问题不是网上随手抄的八股文没有水分。这篇文章我尽量说人话把每一类考点背后的考察意图也讲清楚这样你拿着这份面经准备的时候就不只是背答案而是真正理解面试官到底在验什么。1. 简历投递前的准备别急着海投1.1 先摸清自己的技术栈定位很多人找我聊面试的时候第一句话就是“我简历投了一百份一个面试都没有”。我一看简历技术栈写得又杂又乱Vue会一点、React也沾一点、小程序做过、Node也写过但问到一个核心项目细节就答不上来。这种简历投出去HR第一轮就pass了。前端岗位虽然叫“前端”但实际招聘的时候不同团队对技术栈的倾向性非常明显。有的团队主Vue有的团队主React还有一些团队正在从老框架往新框架迁移需要你同时具备两套体系的理解能力。所以在投简历之前先想清楚你的主攻方向是什么。如果你的项目经验里Vue占大头那就把Vue这条线打磨透从响应式原理到组件通信再到状态管理、路由守卫每一个环节都要能说出“为什么这么设计”。React同理FC和Hooks的底层逻辑、fiber架构的调度机制、不可变数据的重要性这些才是面试官想听的。我在整理0528面经时发现一个现象凡是通过了技术面的候选人简历上的技术栈描述都有一个共同点不是罗列名词而是展示深度。比如“基于Vue3 Composition API封装了统一的业务组件库解决多个后台项目的复用问题”这种写法比“熟练掌握Vue3”有说服力得多。1.2 把项目经历改造成面试语言简历上的项目经历是面试官提问的主要来源。但很多人写项目经历的时候就是照着需求文档抄了一遍项目名称XX后台管理系统技术栈Vue3 Element Plus Axios Pinia职责负责登录模块、订单管理、用户管理这种写法有个致命问题面试官看完根本不知道该从哪里切入提问。好的项目经历应该像一份“钓鱼清单”你主动在简历上埋好钩子引导面试官往你准备充分的方向问。举个我自己改简历的例子。原来有个候选人写“使用Web Worker处理大文件上传”我问他为什么用Worker他说因为文件切片计算哈希需要耗时会阻塞主线程。这个回答是对的但太浅了。我建议他改成“基于Web Worker 文件切片实现大文件断点续传使用SparkMD5计算文件指纹配合后端接口实现秒传与进度恢复”。这样一改面试官看到“切片、断点续传、指纹、秒传”这几个关键词自然就会往这些方向深入而这些都是你可以提前准备的。另外还有一个细节项目里一定要有个“技术难点”的总结而且要量化。比如“首屏加载时间从3.2s优化到1.1sLCP从2.8s降到0.9s”。量化指标能让你的项目描述显得真实可信面试官也会顺着问你用到了哪些具体优化手段这又是一个展示自己的机会。2. 核心八股文考点拆解这一轮考的是底层理解2.1 JavaScript必须吃透的几个点0528这批面经里JavaScript考察频率最高的是这几个方向事件循环、闭包、原型链、异步编程、this指向。看起来都是基础题但面试官会层层追问直到你答不上来为止。我拿事件循环举例子大多数人的回答是“宏任务和微任务先执行微任务再执行宏任务”。这个回答只能算及格但拿不到高分。面试官真正期待的回答需要你说清楚下面几个层次调用栈与任务队列的关系微任务包含哪些Promise.then、MutationObserver、queueMicrotask宏任务包含哪些setTimeout、setInterval、I/O、UI渲染浏览器和Node环境下事件循环的差异requestAnimationFrame和requestIdleCallback分别属于哪个阶段我在面试里最喜欢出一道题“setTimeout(() console.log(1), 0); Promise.resolve().then(() console.log(2)); console.log(3);”很多人能答对“3 2 1”但追问“为什么Promise的回调先于setTimeout执行”就卡住了。原因很简单setTimeout即使延迟是0也要经过定时器线程和任务队列而Promise.resolve().then属于微任务在当前宏任务执行完后立刻执行不需要等下一轮事件循环。这个“为什么”比答案本身更重要。2.2 浏览器运行机制与网络缓存浏览器的考察重点集中在两个方向页面渲染流程和HTTP缓存。页面渲染流程几乎是一道必问题从输入URL到页面展示中间发生了什么。这道题能展开的点太多了DNS解析有没有使用DNS缓存TCP连接建立三次握手TLS协商接收到HTML后解析HTML生成DOM树遇到CSS生成CSSOM树两者合并生成RenderTree布局、绘制、合成脚本的阻塞问题defer和async的区别面试官追问最多的是“脚本阻塞”这一层。如果你能说清楚“为什么script标签要放在body底部”“defer和async在DOMContentLoaded事件上的差异”这道题就能加分不少。HTTP缓存这块我建议你用一个例子把整个流程串起来。比如用户第一次访问页面服务器返回200和Cache-Control: max-age3600浏览器把资源存到本地。第二次访问同一资源在max-age有效期内浏览器直接走缓存不发起请求。如果资源过期了浏览器发起请求带上If-None-Match或If-Modified-Since服务器根据条件判断返回304还是200。面试官考察的重点是Et ag/Last-Modified的区别以及强缓存和协商缓存的适用场景。2.3 Vue和React的高频追问前端框架的考察虽然题目五花八门但核心就两个方向一是框架的核心原理二是组件设计与状态管理。Vue这边必问的是响应式原理。我在0528面经里看到一个很有意思的回答候选人用生活化的类比解释“Vue2的Object.defineProperty像是一个电话交换机每条线路都要提前接好新增线路得手动处理Vue3的Proxy像是一个总机不管打给谁都能拦截。”面试官听到这种类比通常都会会心一笑因为说明你是真的理解而不是死记硬背。不过你还需要知道Vue2的局限性数组变化检测、对象新增属性以及Vue3的响应式具体实现reactive、ref、effect、track、trigger还有为什么Vue3要引入Proxy。React这边必问的是Fiber。面试官想听到的是你不仅知道Fiber是调和Reconciliation过程的数据结构还能说清楚为什么需要Fiber。React的页面更新是递归遍历组件树的如果组件层级很深递归过程不能中断一中断就完了Fiber把组件树变成一个可中断的链表结构配合requestIdleCallback在浏览器空闲的时候做增量渲染这样就不会长时间占用主线程。如果你Vue和React都写过面试官还喜欢问“两者的diff算法有什么区别”。你可以从“同层比较、key优化、双端对比”这些角度回答然后重点提到Vue2是双端对比Vue3是长度优化加最长递增子序列React则是从右往左比较。能说到这一层说明你平时关注过源码层面的变化。3. 手写题和场景设计题考察代码习惯与工程思维3.1 手写题的正确姿势手写题是很多人的噩梦但我觉得只要掌握了方法反而比八股文好拿分。面试官让你手写一个函数考察的往往不是功能实现本身而是你写代码的整个过程会不会跟面试官确认需求、边界条件有没有考虑、代码风格是否规范、有没有做简单的测试。以“手写防抖函数”为例给你一个正确思路一上来先不要急着写代码先问清楚“防抖是立即执行还是延迟执行是否需要取消防抖”这个问题能体现你的需求分析能力。然后写出基础版function debounce(fn, wait, immediate false) { let timer null; return function(...args) { const context this; if (timer) clearTimeout(timer); if (immediate !timer) { fn.apply(context, args); } timer setTimeout(() { fn.apply(context, args); timer null; }, wait); }; }写完代码之后还不够你还要主动说一句“这个版本有几个细节immediate模式下第一次触发能立即执行但后续触发会重新计时如果要支持取消功能我可以再返回一个cancel方法。”听到你主动补充设计细节面试官通常会给你加分。我在面经里看到很多人真正吃亏的地方不是不会写而是写得太快跳过了思考和确认的环节。代码写完没有检查边界条件也没有在脑海里跑一遍测试用例。建议你每次手写题都按这个顺序来确认需求 - 写核心逻辑 - 跑测试用例 - 主动补充优化。3.2 场景设计题大文件上传怎么回答场景设计题是高级前端和中级前端的分水岭。0528面经里有个出现频率很高的题“如果让你实现一个大文件上传功能你会怎么设计”我见过很多候选人上来就说“用切片上传”。但面试官追问“为什么切片切片之后怎么保证完整性断点续传怎么实现秒传的原理是什么”就答不上来了。这道题我认为最优的回答思路是这样的第一步说明项目背景大文件动辄几百MB甚至几个GB直接通过HTTP上传有两个问题一是请求容易超时二是中途失败要全部重来。所以需要分片上传。第二步给出方案前端把文件按固定大小比如每片5MB切片用File.slice()方法切割然后并发上传这些切片同时用Web Worker在后台计算文件的全量哈希比如MD5或SHA-1这个哈希作为文件的唯一标识。第三步解释断点续传和秒传如果上传中途失败前端记录已上传的分片索引重新上传时只上传失败的分片。秒传的逻辑是先把文件哈希发给后端后端查一下这个哈希是否已经存在如果存在就直接返回上传成功不需要真正传数据。第四步谈细节优化控制并发数量避免压垮服务端上传过程中显示进度条用localStorage或IndexedDB保存上传状态后端提供合并接口所有分片上传完成后通知后端合并。如果你能在回答里主动提到Web Worker的计算场景会是个很大的加分项。因为文件切片后计算每个分片的哈希是一个CPU密集型的任务如果在主线程做页面会卡顿用户体验很差。放到Worker里做主线程就不会被阻塞。这正好呼应了面试官对“多端优化”的考察。3.3 工程化与微前端方案选择工程化和架构设计类的题目这几年出现的频率越来越高。面试官问“对微前端怎么理解”考察的不只是你会不会用某个框架而是你有没有处理过大型前端项目维护的痛点。回答这个问题我建议你从一个“痛点”出发。比如你们团队维护一个后台系统模块越来越多不同模块由不同团队负责发布频率也不一致耦合越来越严重构建一次要好几分钟。这个时候微前端就派上用场了。主流的方案有几种iframe方案实现最简单隔离性强但通信不便刷新会丢失状态single-spa类似一个微前端的运行时框架把不同技术栈的子应用组合起来但没有提供样式隔离和应用间通信的完整方案qiankun基于single-spa封装解决了JS沙箱、样式隔离等问题是目前国内用的比较多的Module FederationWebpack 5提供的模块共享方案不仅能做微前端还能做运行时依赖共享面试官听到你把这些方案的优缺点说清楚并且能用一句话总结“选型的关键是看团队的技术栈和业务痛点”这道题基本就稳了。另外工程化方向还经常问到“Vite为什么比Webpack快这么多”。你可以从开发服务的启动方式说起Vite利用原生ES Module开发时不需要打包整个项目而是按需加载模块所以启动速度快。Webpack在开发环境下也要先构建整个依赖图项目大了以后启动和热更新都会变慢。如果你能补充一句“Vite依赖了esbuild做预构建这也是它比Webpack快的一大原因”就更到位了。4. 实战面试中的临场策略与避坑记录4.1 自我介绍怎么讲才不白讲面试通常从自我介绍开始这是你唯一可控的“主场”。但很多人把这段黄金时间浪费了。我给你一个模板化的思路基本信息一句话 当前工作重点两句话 与岗位匹配的技术亮点三句话 你来面试的原因一句话。比如“面试官你好我叫XX有三年前端开发经验目前在XX公司负责XX后台系统。平时主要使用Vue3和TypeScript最近半年重点在优化系统性能把首屏时间从3秒降到了1.2秒。我了解到贵司这边在做一个面向B端的数据可视化平台和我之前做的技术方向很匹配所以想过来聊聊。”这段介绍虽然简单但信息密度很高技术栈、工作内容、量化结果、求职动机全都有了。面试官听完就能找到切入点继续问。4.2 遇到不会的题怎么办面经里最常出现的心理描写就是候选人被问到一个陌生的技术名词大脑瞬间空白。其实是正常的关键看你怎么处理。我分享一下我自己的经验。第一步先不要慌把题复述一遍确认自己没理解错。比如面试官问“你用过RxDB吗”你可以说“RxDB这个词我听过但对它的API不是特别熟悉。据我了解它是一个基于IndexedDB的前端本地数据库支持响应式查询和跨Tab同步。我平时更多用的还是IndexedDB的原生API因为项目里数据量不大没有引入额外的库。”这样回答既没有装懂又展示了自己的知识边界和相关经验。第二步学会“把问题引导到熟悉的领域”。如果面试官问的是“前端怎么做音视频处理”你不熟悉h264解码但可以回答“h264解码我了解得比较浅它是浏览器视频播放的一个核心编码格式正常情况下浏览器原生支持。不过我在项目中做过音频可视化用的Web Audio API和Canvas涉及一些二进制数据的解析逻辑原理上和解码应该是有共通之处的。”坦诚的同时展现你的思维迁移能力。4.3 反问环节的价值面试最后“你有什么想问的”这个环节经常被浪费。很多人直接说“没有”或者只问加班情况、工资待遇。我建议你根据面试官的身份来设计反问。如果是技术面你可以问“咱们这边前端的代码规范是怎么执行的比如提交规范、代码审查流程这些。”这个问题能体现你对代码质量和工程规范的关注。如果是leader面你可以问“团队现在前端最棘手的技术挑战是什么”这个问题会让对方觉得你对业务和技术有真实的兴趣。5. 面经复盘与offer选择5.1 复盘方法论每次面试完我强烈建议你花15分钟做一个复盘把面试中问到的问题全部记录下来然后做三件事第一标记出自己没答上来的问题查资料补全并整理成自己的答案。这个过程往往是面试收获最大的部分因为面试官问的问题通常都是围绕你的简历和当前的主流技术来出的非常有针对性。第二记录面试官的追问方式。你会发现面试官的追问是有套路的比如一直问“为什么”、让你“举个实际项目的例子”、或者是“换个场景你会怎么处理”。了解这些套路之后下次面试就能提前预判。第三给自己打分。我给自己的打分维度有三个技术回答的深度、代码手写的流畅度、表达的逻辑性。每个维度按5分制打分如果连续两次面试都是同一个维度拉了分就说明这一块需要系统性的补强。5.2 心态调整与offer选择面经整理到0528我自己最大的感受是前端面试真的很看重“表达”。同一个答案会表达的人说出来面试官觉得条理清晰不会表达的人说出来面试官可能觉得“虽然会但沟通费劲”。所以面试前建议把准备过的东西都试着“口头讲一遍”最好能录音回听。关于offer选择我个人建议不要太看重短期薪资差异而是看三个维度团队的技术氛围、业务的发展阶段、直属leader的做事风格。前端这个岗位特别吃业务场景你在一个技术氛围浓的团队一年能学到的东西可能比在业务型团队三年还多。反过来如果你去了一个纯业务型团队技术成长慢但你会更懂业务、更懂用户这对未来转管理岗也是一种积累。我在实际面试过程中还有一个体会面经永远只是“药引子”真正决定你offer质量的还是平时工作的积累。那些能在面试中对答如流的人不是靠临时抱佛脚背了多少题而是他们本身就养成了追踪源码、记录踩坑、写技术笔记的习惯。我建议你也从现在开始每解决一个难缠的问题就把它写成一篇小笔记。几个月下来你会发现自己的知识体系已经有了质的提升。到时候面试对你来说不再是一种折磨而是一次和同行交流的愉快对话。