上篇聊完简历筛选、笔试策略和基础八股速记这篇直接进重头戏技术面里的项目深挖、框架原理追问、性能优化场景题以及越到后面越关键的软技能轮。很多同学三年经验卡在二面三面不是技术底子差而是不知道怎么把自己的项目讲出深度或者一被追问就露怯。这篇我把面试中真实遇到的追问链、答题思路和踩坑记录都捋一遍给准备跳槽的朋友做个参考。1. 项目深挖讲项目不是背稿子是要能接住追问三年经验的面试八成时间都在聊项目。面试官会通过项目判断你的技术深度、解决问题的思路和团队协作方式。有同学把项目准备得像产品发布会功能点罗列一堆结果面试官一句“这块具体怎么实现的”就卡住了。项目深挖的核心是“每一句话都能被追问”你说的每个技术点都要做好被往下挖三层的准备。1.1 先把项目讲成“有因果的故事”很多人讲项目喜欢按时间线“我们做的是一个后台管理系统有用户管理、订单管理、权限管理我负责登录模块和列表页”。这种讲法信息密度太低面试官听完没有任何记忆点。我自己的经验是改用“背景—难点—方案—量化结果”四段式来讲每个模块只挑一两个能体现技术深度的点。比如讲一个订单列表页的性能优化背景订单数据量大列表页接口返回慢用户反馈卡顿。难点列表一次要渲染几千条数据且订单状态实时变化不能简单做静态缓存。方案前端做了三层处理列表虚拟滚动降低DOM数量接口按需分页加条件缓存订单状态用WebSocket推送增量更新而不是整表刷新。量化结果首屏渲染时间从3.2秒降到900毫秒接口请求量减少60%。这样讲面试官就能顺着你的方案追问“虚拟滚动怎么实现的”“增量更新怎么保证消息不丢失”“缓存失效策略是什么”每一问都是你准备好的范围。最怕的就是方案里带出一个自己不熟悉的名词比如你说“我们用了虚拟滚动”但被问到虚拟滚动的核心原理和边界情况时答不上来那这题就变成了减分项。1.2 高频追问为什么、怎么做、有没有更好的面试官在你讲完项目后最常问的三句话是“为什么用这个方案”——考察方案选型能力。“具体怎么实现的”——考察落地能力有没有真正写过代码。“有没有考虑过更好的方案”——考察知识广度和思考深度。我遇到过最狠的一次面试官拿着简历上写的“基于Web Worker实现大文件分片上传”追了五轮。先是问分片大小怎么定的然后问断点续传的元数据存在哪又问服务端怎么校验分片完整性最后问如果用户上传中途切到弱网环境怎么处理。这些其实都不是简历上能写出来的细节但你只要真正做过就能从自己的技术决策过程里找到答案。准备项目时我有个习惯把做过的每个核心功能都写一遍“技术决策清单”——当初为什么选这个方案用了什么库或API遇到什么坑如果有时间重做会怎么改。这个清单不需要写进简历但是面试前过一遍面试时就能非常自然地应对追问。2. 框架与原理源码别死记面试官要的是“为什么”三年经验面中大厂框架原理是绕不开的区域。但这里有个误区很多同学背了一堆源码细节比如Vue3的effect函数实现、React的fiber节点结构结果面试官随口换个角度问就答不上来。框架原理考察的不是背诵能力而是你是否理解框架的设计思想和底层逻辑。2.1 从使用到原理的追问链条我记得很清楚的一场面试面试官先问我“ref和reactive有什么区别”这个问题大部分人都能答上来“ref给基本类型加响应式reactive只能处理对象”。然后面试官接着问“那为什么ref定义的对象在模板里会自动解包但reactive不会ref底层是怎么实现的”这一问就把很多人问倒了。正确的思考路径应该是ref返回的是一个RefImpl实例内部通过get value()和set value()拦截读写操作在get时触发依赖收集在set时触发更新。模板编译器遇到ref类型会自动解包是因为它通过isRef做了判断。而reactive是基于Proxy做深层代理对象本身没有被包裹所以模板里不需要解包。到这里你已经把“是什么”说清楚了面试官如果继续问“为什么reactive不用解包”你就可以说因为Proxy代理的是对象本身访问属性就是直接访问而ref是对值的封装需要一层.value来中转模板编译时做解包是为了开发者体验。2.2 diff算法与更新粒度另外一个大类是diff算法。面试官问“Vue和React的diff有什么区别”很多人的回答停留在“Vue用双端指针React用单链表”。这没错但不够。要有深度地回答这个问题需要拆成三层来讲第一层两者的优化思路不同。React的diff是“找到需要更新的最小操作集合”通过key来识别节点是否可复用。Vue的diff在此基础上做了双端比较从头尾同时向中间收敛快速跳过不变的头部和尾部节点。第二层更新粒度不同。React的更新粒度是组件级别的一个组件setState整个组件函数重新执行然后用diff结果去更新真实DOM。Vue的更新粒度是组件内依赖级别的哪个响应式数据变了精确更新对应的effect所以Vue的diff主要在“同层节点列表”的复用上发力。第三层对静态节点的处理不同。Vue3的编译器会在编译阶段做静态提升把不变的节点标记为staticdiff时直接跳过。React也在做类似的事比如React.memo和useMemo但这是开发者手动控制的不是编译器自动完成的。如果你能这样分层答面试官基本就能确认你不仅用过框架还研究过底层机制。我个人的准备方法是不用死记源码而是先理解这个框架“为什么这么做”再去读对应源码验证自己的理解这样学到的内容才是活的。2.3 框架题应答的“三不”原则根据我被问和被考的经验整理三个注意事项不要张口就背源码行号或变量名。面试官想听的是设计思路不是逐行翻译源码。你可以说“我记得大概是在reactive.ts里有做了Proxy的拦截”但别试图精确到函数第几行。不要回避“不知道”。如果真被问到一个没接触过的源码细节坦诚说“这个源码层面我没细看但我理解它的设计意图是……”比强行编一个答案好得多。面试官也是写代码的你编没编他心里有数。不要只会说一个框架。面中大厂通常要求至少一个框架精熟、其他框架有了解。如果你主打Vue至少要能说出“React的useEffect和Vue的watchEffect使用场景差异”这种对比题。3. 性能优化从“我做过”到“我会分析”性能优化是三年经验面试里的又一个高频场景。面试官通常不会问你“做过哪些优化”而是给一个具体场景“首屏加载很慢你会怎么排查和优化”这种题没有标准答案但要有清晰的排查思路和分析框架。3.1 性能指标先量化再谈优化我建议先建立一套完整的指标体系回答时直接按指标来拆FCPFirst Contentful Paint首屏内容绘制时间衡量用户看到内容的快慢。LCPLargest Contentful Paint最大内容绘制时间衡量首屏主体内容的加载速度。TTITime to Interactive可交互时间衡量页面从加载到可操作需要多久。CLSCumulative Layout Shift布局偏移量衡量页面稳定性影响用户对页面质量的感知。回答场景题时先说“我会先用Performance面板和Lighthouse跑一轮拿到这几个指标”再根据指标卡在哪里来定位问题。这样说面试官会觉得你有实际排查经验而不是背了一堆名词。3.2 首屏优化从三个层面拆如果面试官追问“具体怎么优化”我习惯从三个层面拆解第一层是网络链路。检查服务端响应时间是不是过长有没有开Gzip、HTTP缓存设置是否正确CDN是否生效。资源能不能做合并或者用HTTP/2多路复用减少连接数。第三方的脚本有没有阻塞渲染比如埋点SDK、客服组件这些能不能做异步加载或者延迟加载。第二层是资源体积。打包产物的体积分析用webpack-bundle-analyzer或vite的rollup-plugin-visualizer看哪些包占了大头。按需加载只引用的组件和工具函数比如lodash按需引入或者用原生方法替代。大图片做WebP格式转换和懒加载首屏之外的图片用loadinglazy。第三层是渲染路径。JavaScript执行过长会阻塞首次渲染检查有没有在script里做重的计算能不能拆到setTimeout或者requestIdleCallback里去做。首屏不依赖的组件能不能用动态import拆出去等用户滚到对应位置再加载。我在准备这道题时会准备一个自己实际做过的优化案例把每个指标前后的数值变化记下来。比如之前接过一个H5活动页首屏LCP是4秒优化后降到1.8秒。优化点就是三个图片从PNG切WebP体积小了70%初始化接口从串行改成并行首屏的弹窗组件改成懒加载。这三件事的效果是有具体数据支撑的聊起来就非常实在。3.3 性能优化的“量化思维”很多人在聊性能优化时只说“做了缓存”“用了懒加载”但不说效果。面试官想听到的是你有没有闭环的量化思维。就算你只是做了一次很小的优化只要能说出优化前多少、优化后多少用什么工具测的这个项目的说服力就比其他人的“我做过性能优化”大得多。有一个加分项是提到持续监控。比如你在项目里接入了性能监控平台把FCP、LCP、长任务等指标上报到数据平台设置告警阈值。有了这个面试官会认为你不仅会做优化还会有意识地防止性能回退这已经是很高的工程素养了。4. 工程化与架构能力三年经验的分水岭三年经验的技术面除了基础题和项目题越来越多的面试官会考察你的工程化能力——不是会不会用构建工具而是具不具备“搭一套工程体系”的意识和经验。这个区域是区分“会写页面”和“能带项目”的分水岭。4.1 构建工具与依赖管理说出你的理解构建工具相关的问题几乎是必考项核心问法有两类一类是“Vite和Webpack有什么区别”另一类是“你项目里的构建流程有没有做过优化”。Vite和Webpack的区别不能只答“Vite快、Webpack慢”。面试官想听的是Vite在开发环境下利用原生ESModule浏览器直接加载模块不做预打包所以冷启动快生产环境下还是需要打包用的是Rollup。Webpack则是在开发、生产环境都要做模块分析和打包所以首次构建慢但它的生态成熟支持各种自定义配置和插件。构建流程优化方面我实际做过的优化包括生产环境开启gzip压缩compression-webpack-plugin和图片压缩image-webpack-loader把不常变动的第三方库提取到单独的vendors包利用浏览器缓存用thread-loader或esbuild-loader对构建做多进程或并行编译缩短构建时间。依赖管理这块我建议至少分清dependencies和devDependencies的区别知道package-lock.json是干什么的以及为什么需要锁定版本。我面试时就被问过“如果你发现项目里的某个依赖版本升级后出现兼容性问题你会怎么排查”这是一个实操题答法应该是“先看package-lock.json确认当前版本再看升级日志和CHANGELOG在本地用npm diff或直接切版本验证最后查Git提交记录看是什么时候引入的”。4.2 微前端不是会接入就算会微前端在热词里热度一直很高中大厂项目里也确实在用。但如果你的简历写了微前端面试官一定会追问它的核心问题为什么需要微前端微前端的隔离方案有哪些各自的原理是什么讲微前端我的建议是往“为什么”和“怎么做”两个方向讲清楚。先说为什么随着团队和业务规模扩大多个团队维护一个巨石应用发布互相阻塞、技术栈无法升级。微前端的价值是让每个团队独立开发、独立部署互不阻塞同时给用户一个统一整合的体验。再说怎么做核心难点在于三件事JS隔离确保子应用之间的全局变量、事件监听不互相污染。常见方案有iframe隔离彻底但体验差、with Proxy如qiankun实现沙箱等。样式隔离子应用样式不串味。qiankun默认通过scoped方式处理本质上还是给样式加了一层作用域限制或者用CSS Modules来约定。路由切换主应用和子应用的路由怎么联动刷新时怎么回到正确的子应用页面。如果你是负责接入微前端的开发至少要能说出自己项目的接入方式、遇到过的坑比如子应用资源加载路径、publicPath配置、事件没清理导致的内存泄漏等。能说出这些真实细节的比只会说“我们用了qiankun”的高好几个档次。4.3 大文件上传一个完整的场景题热词里出现“前端使用worker上传大文件”不是偶然这个场景题我很推荐好好准备因为它能一次性考察你四个能力分片思维、并发控制、Web Worker的运用、异常处理。完整答法模板大概是首先把大文件用File.slice切成固定大小的分片比如每片5MB用一个唯一的fileId标记本次上传任务。然后通过Web Worker做分片的哈希计算比如用SparkMD5避免主线程卡顿。之后用Promise控制并发数通常是3到5个同时上传每传完一片记录到localStorage或者后端返回的uploadId里。中途断网或刷新下次进入页面时通过之前记录的进度跳过已上传的分片实现断点续传。所有分片传完后调用一个merge接口通知服务端合并分片。如果服务端检测到某个分片损坏前端可以单独重传这个分片。这道题我建议准备到能画出请求时序的程度面试官如果追问“并发数设多少合适”或者“服务端怎么判断分片是否完整”你也要有基本的分析和答案。并发数可以根据带宽和文件大小估算比如乐观情况下每片5MB带宽10Mbps同时传3片每秒约1.25MB传完100MB需要80秒左右如果带宽小并发数要调低否则只是排队空耗。服务端判断分片完整性一般是记录每个分片的hash合并时按hash校验一遍。5. 场景题与软技能别把面试聊成技术背诵到了二面三面技术之外的能力开始占比重。面试官会通过场景题和软技能问题来看你的沟通表达能力、解决问题的思路以及与团队的匹配度。这个环节没有标准答案但有高下之分。5.1 场景题答题框架先确认问题再给方案我见过的场景题常客有“如果给你一个全新项目前端技术选型你怎么做”“合作的后端接口还没好前端怎么推进开发”“线上有个BUG用户反馈很严重你怎么处理”这三类题有个共同特征不只是考察你的编码能力而是考察你的工程思维。我给自己总结的答题框架是“确认目标—拆解问题—给方案—讲取舍”。举个例子“接口还没好前端怎么推进”这道题很多人的第一反应是“等接口好了再联调”或者“用mock数据”。但更好的回答是先跟后端确认接口文档是否已定义如果已定义前端可以直接用typescript定义好类型按文档进行开发用mock数据填充页面如果文档都没有前端可以先跟后端对齐数据结构自己先定一版interface等后端提供后做适配同时在一些基础组件层面提前封装请求层统一处理loading、错误提示和超时重试这样不管后端接口怎么变前端改动范围都被控制住。这样回答的亮点在于“通过流程控制来降低协作风险”能体现你的主动性和工程视角。5.2 HR面与行为面试技术之外的加分项HR面看起来不聊技术但千万别放松。这几年大厂HR面刷人并不罕见核心是看重你的稳定性、协作能力、学习能力和职业规划。高频问题包括为什么离开上一家公司工作中跟同事或产品经理发生过冲突吗你怎么看待加班未来三到五年的职业规划是什么我踩过的坑是回答“为什么离开上一家公司”时把前东家抱怨了一通。后来换了思路从职业发展角度来讲比如“在上一家公司接触的业务已经比较稳定我希望到一个业务增长更快、技术挑战更大的环境里锻炼自己”。这样既体现了上进心又不会让人觉得你是个不好协作的人。行为面试题可以用“STAR法则”来组织当时的情况Situation、你的任务Task、你采取的行动Action、最后的结果Result。比如回答“有没有解决过特别棘手的技术问题”就按这个方法讲一个具体的例子重点突出你自己是怎么分析定位问题的而不是团队协作时甩锅给同事。5.3 反问环节这是个让你加分的机会很多面试官在最后会问“你有什么想问我的”这题不好好答很可惜。我一般分三类来准备和技术相关的好问题“团队目前在前端工程化方面最大的痛点是什么”“项目的性能优化目前做到什么程度了”这类问题能让面试官觉得你真有热情、有思考。和团队相关的好问题“前端团队现在有多少人代码评审和发布流程是怎样的”“团队对新人有怎样的培养机制”不建议问的问题“加班多吗”“加班有加班费吗”“好请假吗”这类问题不是说完全不能问而是在技术面里问会显得关注点偏了可以留到HR面再确认。反问环节也是你在面试里展示自己的一次机会问得好比答得好更能让人记住你。6. 临场心态与准备工作面到最后其实是拼状态面经写了这么多最后说点实际的。三年经验的面知识点是有限的真正拉开差距的是临场状态和准备程度。我自己的准备习惯是提前两周做一次“模拟面试”。找朋友或者自己对着镜子把所有常考题都过一遍重点不是背答案而是训练自己在压力下保持条理清晰。很多人在面试时不是不会答而是一紧张逻辑就乱了本来会的东西也说得七零八落。另一个有用的技巧是准备一个“项目故事库”。把过去三年做过的项目提炼成五六个核心故事每个故事都按“背景—难点—方案—结果”的框架写好面试时不管面试官问哪个项目都能迅速从库里调出来讲。这个库不需要写进文档里但在脑子里过一遍效果完全不一样。最后面试本身就是一场信息交换不只是公司在面你你也在面公司。遇到面试官追问题追得比较深那不是刁难而是帮你判断这家公司对技术的要求是不是你想要的。放平心态把面试当成一次技术交流状态松弛下来反而更容易过。