两年经验前端中大厂面试全攻略：算法手写与项目深挖实战复盘

面经这个东西刷的时候觉得自己都会了真坐到面试官对面才发现是另一回事。我工作两年左右的时候开始集中准备中大厂前端面试前后面了七八家从一面到HR面完整跑了一轮。上篇把简历怎么写、基础八股怎么准备、项目大框架怎么搭都聊完了今天这篇接着往下聊算法手写题、项目深挖的细节案例、场景设计题、交叉面和HR面以及只有实际面过才会懂的坑。适合谁看差不多一年半到三年经验准备跳槽中大厂或者想验证自己前端水平到底在哪个档次的前端同学这篇文章应该能帮上忙。我会尽量还原真实面试场景把每一类问题的应对思路掰开揉碎讲清楚而不是只丢一个干巴巴的题目清单。1. 整体面试复盘与章节规划1.1 中大厂面试流程全貌两年经验这个阶段很微妙说新不新说老不老实。公司对你的期待不是“能写页面就行”而是开始考察你有没有独当一面的潜力。中大厂的基本流程一般是简历筛选、一到两轮技术面、交叉面或主管面、HR面有的团队还会加一轮笔试或者算法轮。每一轮侧重点都不同但有一个共同点都会结合你简历里写的东西往深了挖。我面了七八家之后最大的发现是面试官最爱问的不是八股文而是“你做过什么、怎么做的、为什么这么做、换个场景你会怎么做”。所以面试准备的真正重心应该放在项目深挖上而不是背题。八股是入场券项目深度才是分水岭。1.2 为什么两年的简历最容易被追问两年经验正好卡在一个特殊位置基础已经会了但深度和广度可能都不够面试官就是来测这个深度的。我遇到过面试官对着一个很小的功能点问了一个小时从技术选型问到数据结构再问到浏览器底层实现。这种追问不是刁难而是想找到你技术能力的边界在哪里。我的准备方法是把简历上每个项目都拆成三层业务层面做了什么、技术层面怎么做的、决策层面为什么这么做。三层都能讲通大部分追问就能接住如果哪一层讲不通那恰恰是面试前最该补课的地方。比如你说自己用了虚拟列表那至少要能回答“为什么不用分页”“滚动容器怎么监听”“高度不定怎么处理”这一串问题。1.3 本篇拆成六个模块本篇不按面试轮次写按我复盘下来的六大高频主题来写算法手写、项目深挖、场景设计、工程化方案、交叉面与HR面、复盘心得。每个主题都会附上真实面试场景和应对思路你可以直接照着准备。纯理论的东西上篇聊过不少这篇更注重“现场怎么发挥”把临场反应和经验教训讲透。2. 算法与手写题代码基本功的临场考验2.1 两年经验该刷什么范围的算法题先说实话两年经验的前端算法题不会太夸张基本都是LeetCode easy到medium偏easy的难度但确实有例外。我统计了下自己遇到的高频范围类型常见题型准备建议数组/字符串双指针、滑动窗口、去重能写出O(n)解法链表反转、删除节点、环形检测必须能手写二叉树前中后序、层次遍历递归和非递归都要会DFS/BFS岛屿问题、最短路径掌握模板动态规划爬楼梯、背包入门入门级即可准备周期建议一个月每天刷两到三道保持手感和思路的流畅度就行不用死磕难题。真正面试的时候能在15分钟内把一道medium写完并且分析清楚复杂度已经非常能打了。我见过太多人把精力花在难题偏题上结果面试官出了一道“合并两个有序数组”就开始卡壳这就很可惜。2.2 高频手写题清单和避坑点除了算法题还有一类必考的是手写代码题本质是考察你对JavaScript语言特性理解得有多深。我遇到的频率从高到低排下来防抖节流、深拷贝必须考虑循环引用、Promise.all/Promise.race、数组去重至少说三种方式、compose/pipe、call/apply/bind的实现、new的实现、instanceof判断、LRU缓存。以深拷贝为例。很多人背了递归遍历的代码但面试官一追问“循环引用怎么办”就卡住。正确答案是用WeakMap记录已经拷贝过的对象下次再遇到直接取缓存。就这一个点能区分出你是背代码还是真懂。另外一个高频坑是Promise.all要求所有promise都成功才返回数组任何一个失败就reject。面试官会追问“如果其中一个promise先reject了其他promise还在执行这算怎么回事”你要能答出来Promise.all是fail-fast的虽然其他promise不会被取消但结果已经不会再被消费。只有真正写过Promise实现的人才能对这种细节张口就来。2.3 做题策略先讲思路再动笔我踩过最大的坑是拿到题就写写到一半发现思路错了再推倒重来非常浪费时间也会影响面试官对你的判断。后来学乖了不管题多简单都先跟面试官说思路打算用什么方法、大概的时间复杂度、空间复杂度。比如“我准备用双指针一个慢指针指向当前不重复元素的位置一个快指针遍历数组时间复杂度O(n)空间复杂度O(1)”面试官听到这里就知道你思路在线哪怕后面代码有小bug也更容易通过提示修正过来。这个习惯帮我挽回了好几次局面因为面试官面试时最怕的不是候选人写错而是候选人闷头乱写、思路全无。2.4 一次完整的算法面实录拿我亲身经历的一道题举例面试官出了“把数组中的所有0移动到末尾同时保持非零元素相对顺序”。题目不复杂但我没有直接开写而是先说思路快慢双指针慢指针指向下一个非零元素该放的位置快指针遍历遇到非零就交换到前面。说完开写写完主动跑几个用例验证0在开头、0在中间、全0、没有0这四种情况都过一遍。最后面试官问“这个算法稳定吗”我解释交换操作不会改变非零元素的相对顺序所以是稳定的。整个流程大概15分钟面试官给了句“思路清晰”。这就是我前面说的先思路后代码带来的正反馈。你别小看这种细节面试官的评分表上算法题往往不是只看对不对还要看你的表达和思考习惯。3. 项目深挖把两年的项目经历讲成亮点3.1 面试官深挖项目常用的六个方向项目深挖是面经的绝对核心准备不充分的很容易在这里翻车。我观察下来面试官深挖项目有一套固定的逻辑背景与目标这个项目解决什么问题为什么现在做技术选型为什么用这个框架或库有没有横向对比核心实现某个核心功能具体怎么做的性能与质量有没有做过性能优化线上质量怎么监测协作与推进怎么跟产品、后端沟通遇到分歧怎么处理复盘反思如果重来一次哪里会做不同的选择每一类都要有真实案例支撑。编是编不过去的面试官多追问两轮就能发现你的回答开始含糊所以建议每个项目都按这个框架写一遍写下来你会发现很多平时没想清的细节这就是面试准备最有价值的部分。3.2 案例中后台字典管理怎么讲出深度举个例子“字典管理”这个东西听起来很不起眼但面试官能问得非常深。我当时的项目做了一个统一字典管理模块把业务里的下拉选项、状态枚举统一抽到后端配置前端通过接口获取并缓存。面试官直接追问缓存结构怎么设计缓存失效怎么处理如果后端改了配置用户已经在页面上了怎么感知我当时的回答是接口返回时带一个版本号前端缓存里也存版本号请求时对比版本不一致就重新拉取。面试官接着追问“两个页面并发刷新一个拿到新版本一个拿到旧版本缓存里出现不一致怎么办”这个问题的本质是并发场景的边界处理没有标准答案但你的思路要闭环。我的思路是缓存统一放在一个Map里更新时以新的版本号整体覆盖宁可丢一点旧数据也不能让两个版本的配置并存导致页面渲染错乱。这就是深度和边界意识比单纯的“我做过字典管理”高级得多。3.3 案例大文件上传里的Worker实战另一个让我印象深刻的深挖是关于“前端使用Worker上传大文件”的。当时我做一个文件管理后台要支持上传几个GB的视频直接用formdata上传很容易失败体验也很差。我采用了分片上传加断点续传方案把文件切片、MD5计算放到Web Worker里主线程不卡死。面试官从这里开始连环发问切片大小怎么定我答的是按文件大小动态算小于2GB用2MB一片更大用5MB这样可以避免分片数量太多导致服务端合并压力大。他又问MD5怎么算我说在Worker里用SparkMD5对每个切片计算主线程只接收进度回调。他追问Worker能不能直接访问window当然不能所以需要postMessage通信。最后他问断点续传的元数据存哪里我答localStorage或indexedDB还要带一个文件指纹字段保证不是同一个文件不能继续传。这套问题只要你真正实现过一遍答起来会非常流畅。如果只是看过博客很容易在“切片大小为什么是2MB还是5MB”“文件指纹怎么生成”这类细节上露怯。所以我在上篇强调过简历里写的东西一定要是自己真正做过的别为了好看去写没碰过的高大上技术。3.4 案例微前端改造的架构演进两年经验如果接触过微前端项目面试官会格外感兴趣。我参与过一个老旧中后台系统迁移到微前端架构的项目从qiankun选型开始到基座应用设计、子应用接入、公共依赖共享、样式隔离踩坑一整套走下来。面试官问得最多的是为什么不直接用iframeqiankun为什么会有JS沙箱和样式隔离的问题子应用之间通信怎么处理公共包怎么抽取这些问题光看文档很难答到点子上亲手踩过坑就知道iframe的硬伤是通信烦、状态隔离成本高、路由体验割裂。qiankun的JS沙箱是模拟window代理实现的所以会有一些边界问题。样式隔离默认方案是给子应用包裹容器选择器遇到body级样式就容易出问题所以通常还要配experimentalStyleIsolation或者自己约定规范。建议在面试前把这类常见坑专门查一遍只懂概念和懂踩坑面试官几句话就能试出来。3.5 项目讲解的四段式结构不管项目多复杂我建议都用“背景-方案-落地-复盘”四段式来讲。背景一句话说清业务痛点方案讲技术选型和核心设计落地讲自己负责的部分和关键细节复盘讲哪里做得好、哪里还能优化。面试官不打断的话你按这个结构讲3分钟他对你的水平基本就有判断了。如果他听完开始追问细节说明感兴趣这是加分信号而不是压力信号。我面过好几次面试官在项目讲述阶段全程听完之后问了几个非常细节的问题最后反馈是“项目经历比较扎实”。反而那种讲不到1分钟就被打断问你“等等你具体做了什么”的多半是项目描述太空了。4. 场景题与工程化方案面试官真正想听的思路4.1 场景设计题的通用套路场景题比项目深挖更难准备因为题目千奇百怪。比如“设计前端监控系统”“首屏加载进1秒怎么做”“10万条数据的表格怎么保证流畅”。但套路是固定的先确认需求边界再给整体方案然后拆关键模块最后讲权衡取舍。面试官看重的不是你的方案多完美而是你思考过程结构化了没有。我面试时最喜欢说的一句话是“我先确认几个边界条件”这一句话就能把面试基调从“背书”变成“协作”。比如他问“首屏加载优化”你先反问“当前首屏是多少秒目标是多少秒主要场景是移动端还是PC端”面试官就会觉得你是有真实优化经验的人而不是背了一堆优化手段的背题家。4.2 组件库设计从零开始怎么回答“设计一个组件库”出现频率不低。我的答法是先确定设计规范和组件分类基础组件、业务组件、布局组件分开然后设计API规范统一props命名考虑受控与非受控、ref转发接着定样式方案是CSS Modules还是Tailwind还是styled-components最后讲文档、单测和发布流程组件库没有文档就等于没有。追问“主题定制怎么做”时我会提CSS变量加主题Provider的方案再讲一讲组件如何从设计层面让颜色、间距、字体都走token而不是硬编码。这个问题能把你对组件抽象的理解展示出来。我记得有个面试官听完之后追问“怎么保证组件库升级不破坏业务”这就涉及到语义化版本和迁移文档了。组件库是工程化能力的综合体现平时开发时多留心组件抽象答起来不会难。4.3 性能优化从排查到方案的一条龙性能优化是必考题但很多人答题方向是错的。面试官问“首屏加载慢怎么排查”很多人直接开始背代码分割、gzip、懒加载。但正确顺序是先讲排查打开Network看是资源体积大、请求数量多还是接口响应慢然后针对定位到的原因逐层优化。这一步的差异就出来了会排查的才是真实做过优化的人只会背方案的是临时抱佛脚。长列表场景也一样先问数据量级再决定虚拟滚动还是时间分片还是Canvas渲染。所有优化都必须能说出“解决了什么问题、收益有多大”才有说服力。比如你做了路由懒加载那就说“首屏JS从800KB降到了300KB首屏时间从2.3秒降到1.1秒”这个数字比任何形容词都有力。4.4 工程化与依赖管理pnpm和Monorepo要懂这两年工程化迭代太快面试官开始考察工具链理解。我从npm换到yarn再换到pnpm深刻体会是pnpm的硬链接和内容寻址存储确实省磁盘、安装快。用pnpm workspace搭Monorepo管理多个包公共代码提取变得很轻松。面试官问“幽灵依赖怎么避免”时我会从node_modules的解析规则讲起npm和yarn会把依赖套娃式铺开导致你明明没声明某个包却能在代码里引用到而pnpm用符号链接和严格依赖声明解决这个问题。如果你的项目已经在用Monorepo这一块一定要能讲清楚为什么选它、解决了什么问题、带来什么复杂度。Monorepo不是银弹它引入了构建编排、依赖版本同步、权限控制这些问题你如果能主动说出这些代价面试官会觉得你对工程化有清醒认知。4.5 没接触过的新技术怎么应对每次面试都有概率被问到没碰过的技术比如RxDB、SSE、WebCodecs解码h264、AI辅助开发工具这些。我的策略是诚实说用得不多然后讲我对它的理解和可能的用途再反问面试官确认理解对不对。硬编答案非常容易翻车面试官在这个领域深耕多年你编两句他就能听出来。面试官更看重学习能力和思考路径而不是你刚好用过这个库。如果时间允许拿到面试通知后把JD里列的技术栈都过一遍官方文档每样能聊两句不冷场就已经赢了大多数候选人。我面过一个AI相关的团队面试官问我对agent怎么理解我说“本质是一个能自主决策和调用工具的执行体前端侧更多是交互界面和状态流的呈现”虽然不算深入但起码表明了我看过、思考过。5. 交叉面与HR面技术之外的隐形战场5.1 交叉面到底在考察什么交叉面一般由不同团队的技术负责人或资深工程师来面目的主要有两个验证你前面几轮面试表现的真实性以及看你的技术视野和软素质。所以这个环节通常不会抠太多细节更多是聊架构思路、技术选型、团队协作。我记得一次交叉面的面试官让我“介绍一下团队前端基础设施的现状”这就是典型的全局视角考察。如果你只聊自己负责的模块就会显得视野窄如果能从CI/CD、代码规范、组件库、监控告警这几个维度去讲就算聊得不够深也能体现你平时有在关注整个团队。5.2 HR面常见问题与回答策略HR面看着轻松但表达水平的差别很容易在这里显现。常见问题的应对思路大概是这样常见问题应对要点离职原因不提前公司坏话统一说“希望接触更复杂的业务和技术挑战”为什么选我们提前做功课从业务、技术栈、团队情况三个角度回答期望薪资结合行情给一个区间表达有可谈空间未来规划避免空泛给可落地的“成为团队前端专家”路线我的经验是HR面姿态放低一点诚恳一点。面试官也是在选未来同事性格合不合很影响最终结果这种软性的判断在HR轮尤其重要。我记得有一次HR面对方问“你平时怎么学习”我就把最近在看的书、在写的技术笔记、常逛的社区说了说不夸张、不假大空最后聊得很顺畅。5.3 薪资谈判与offer比较薪资是可以谈的但要注意分寸。我一般先通过脉脉、OfferShow等渠道了解市场行情定一个合理的期望区间再在HR面时诚恳表达。如果offer低于预期最好的话术是“我对这个业务和技术方向很感兴趣但薪资和我的期待有差距能否帮忙争取一下”大部分HR都会去和业务线沟通。反过来如果你拿了offer就直接接受反而会让HR觉得你预期太低、可能在攒offer。比较offer时不要只看base年终奖、期权、公积金比例、加班强度、业务发展潜力都要算进去。我见过很多只看base的入职几个月后才发现综合收益并不理想到时候再换代价就大了。另外面试过程中你也能感受到团队氛围如果一面面试官全程冷脸、三句话不离加班那这个团队的风格你大概率接受不了给再多钱也要慎重。6. 面试中踩过的坑与复盘心得6.1 简历不诚实是最大的坑这一点怎么强调都不为过。我在面试过程中遇到过一些候选人简历写得非常华丽但一个追问就露馅。面试官不讨厌经验少的候选人但非常讨厌夸大的候选人。项目里只是用了框架就写“使用”主导了架构设计才写“主导”。技术圈很小口碑一旦坏了很难翻盘。更关键的是不诚实的简历会在面试中消耗你的心理能量。你时刻担心被问到那个不熟的点整个人会变得紧张、防御反而影响了正常发挥。诚实点写简历面试时你会轻松很多。6.2 表达节奏与互动技巧我一开始面试时语速偏快容易紧张就加速后来刻意练习控制节奏。每答完一个点停一下观察面试官的反应。对方点头就继续往下讲对方皱眉就主动问“这块需要我展开吗”。这种带着互动的答题方式会让整个面试氛围轻松很多也给自己争取了思考时间。还有个技巧如果你没听懂问题可以复述一遍“你是想问XXX吗”。这样既能确认问题又能争取几秒钟组织答案的时间。这比直接说“没听懂”要好得多面试官也不会觉得你理解能力差反而觉得你沟通很严谨。6.3 用复盘把面试变成成长加速器每次面试结束我会趁记忆还新鲜立刻记录问了哪些题、哪些答得好、哪些卡壳、为什么卡壳。这个方法朴素但极其有效。我面第三家时发现自己对CDN缓存机制不够熟专门花半天补了缓存原理、命中率、回源流程后面再遇到这类题就非常从容。面试是一面镜子它会在最短时间内照出你的知识短板。别把面试只当成找工作它其实是一次免费的、高质量的阶段性测评。七八家面下来我对自己技术版图的认知比过去两年还要清晰。6.4 两年前端后续学习建议如果你过了这个跳槽季还想继续往上走我的建议是三线并进。第一条线是JavaScript/TypeScript语言本身把原型链、事件循环、闭包这些底层机制吃透第二条线是框架原理至少能讲清楚React或Vue的一个核心机制虚拟DOM、diff算法或者更新调度都行第三条线是工程化与架构视野从组件设计、状态管理、性能优化、监控体系切入。三条线同时推进半年后你会发现面试题自然而然就会了不是背出来的。我自己的体会是两年经验恰好是打底子的黄金期。基础扎实了后面三到五年冲高级工程师才有力气基础如果松松垮垮每次跳槽都会在同一个地方栽跟头。所以别嫌基础的东西枯燥它们才是面试和工作中最值钱的部分。最后聊点心理层面的东西。我面完七八家之后最大的体会是面试成功与否技术实力占七成剩下三成是状态、表达和心态。你可能准备得已经足够好但一到面试脑子空白大概率是给自己的压力太大了。我后来用了一个笨办法把面试官想象成一个来跟你请教项目经验的同事心态就能明显稳下来。如果你也是两年经验在准备中大厂面试希望这篇下篇能帮你少走一些弯路。后续如果还有新的面试心得我会再来更新。祝面试顺利也祝我们都能一直保持对前端这个领域的好奇心。