两年经验跳槽是个挺尴尬的节点。你说自己是新人吧已经独立负责过模块线上问题也处理过不少你说自己是资深吧离架构设计和团队影响力又差着一截。我恰恰就是在这个阶段开始投中大厂的前后面了七八家把常见的问题类型基本碰了一遍。这篇文章想把这段经历里关于准备方向、基础考点、框架原理和面试现场的东西梳理出来给同样处在两年节点的朋友一个参考。先说实话两年经验面的不是你会多少API而是你有没有形成自己的技术判断。1. 面试前的自我审视与投递策略两年按平均跳槽周期算正好是第一波认真想动的时候。但这个阶段最怕的不是没准备好而是不知道要面什么就闷头冲。我一开始也犯过这个错刷了一堆冷门面试题结果真到面试现场面试官问的全是基础里的细节当场就有点懵。1.1 两年经验到底该具备什么水平面试官心里对两年经验的画像通常是什么能独立负责模块有线上问题排查经验对框架底层有一定理解而不是停留在会用的层面。所以这个阶段别把时间全花在背基础题上要把精力放到每个技术点背后的“为什么”上。我自己的体会是两年经验的面试重点有三块基础是否扎实、框架理解是否到位、项目是否真实且有深度。这三块里项目经验的深度往往是拉开差距的地方。面试官一般不会直接问“你项目做了什么”他会挑一个点往下钻这块怎么设计的当时为什么选这个方案遇到性能问题怎么排查的问三四个回合基本就能看出你是真的做过还是背了别人的项目。这里有个很现实的现象同样两年经验有人已经带过一个小模块的迭代有人还在天天切图。面试官心里很清楚这些差异所以你不用假装自己做过很复杂的系统但一定要把手头做过的事讲清楚。哪怕是公司内部的一个后台管理项目只要你能讲明白其中某个功能的完整设计链路效果就比笼统说“负责过好几个项目”好得多。1.2 简历怎么写才能过筛选简历在两年阶段最忌堆砌技术名词。写了一堆 Vue、React、TypeScript、Webpack、Vite 的清单看起来什么都碰过但每一项都没有纵深反而容易被筛掉。更好的做法是挑两三个项目每个项目写出“项目背景—我的职责—技术方案—最终效果”四段式其中至少一个项目的技术方案能体现你的思考而不是只写“负责了几个页面”。我改简历的时候养成一个习惯每个项目下面列两个关键技术难点并在后面标出解决方案的选型理由。比如某个后台管理系统我写了“基于 Web Worker 实现大文件分片上传”后面补了一句“选 Worker 是因为主线程计算文件 hash 时页面明显卡顿把计算放到 worker 后首屏交互恢复正常”。面试官看到这种描述第一反应不是问你什么是 Worker而是想顺着你的理由继续聊下去。这个开局比你背十道深拷贝题都管用。还有一个小细节简历里的技术栈不要写“熟练使用”这种评价词写上你实际用它做过什么就够了。很多人喜欢写“熟练掌握 Vue3、React、TypeScript”但面试官默认这种话要打五折。你把“用 Composition API 封装过一个通用的列表页模板”写在项目描述里比“熟练掌握 Vue3”有说服力得多。1.3 投递渠道与面试安排节奏投递渠道上我个人体验下来靠谱程度排序是同行业内推最优、Boss直聘和拉钩次之、官网投递兜底。内推最大的优势不是免笔试而是简历会被人捞出来并且在面试官那里多一层信任背书。面试安排方面我踩过一次大坑以为面试周期短就一次约了三家公司的第一轮结果一周内连续面了五场到后面明显感觉脑子转不动连事件循环这种基础题都答得磕磕绊绊。后来我改成每周最多安排两到三场同一周只面两个方向相近的公司。这样既有时间复盘也能根据前面面试官的提问方向动态调整自己接下来的准备重点。1.4 中大厂与普通公司的面试差异这个对比我聊过不少同行大家共识是中大厂面试流程长、轮次多、每轮侧重点不同而普通公司往往一两轮技术面就定结果。中大厂通常至少两轮技术面加一轮交叉面再加一轮 HR 面。第一轮偏基础和项目深挖第二轮偏工程能力和综合设计交叉面则可能由一个不太了解你业务的人来评估你的表达和思路。这种情况下基础高频题答得好不好会直接影响面试官对后续轮次的期待值。普通公司则更看重即时生产力你会不会直接上手改 bug能不能快速把页面写出来框架 API 是否熟。中大厂会花更多时间问底层原理和边界场景更在意思考过程。所以如果你目标明确是中大厂刷题方向最好是“深入 原理”如果你只是想换一个更好一点的平台那“熟练 工程化落地”可能更划算。我自己的建议是准备阶段两边的交集部分很重要基础、框架、项目描述这些不管去什么公司都会考。差异化部分留给面试前一两周再取舍。2. 前端基础高频考点梳理基础部分看起来杂但中大厂的考察方向其实很有规律。与其说是考记忆不如说是在考你对浏览器、JS 运行时和布局体系这些底层机制的理解深度。2.1 浏览器机制从输入 URL 到页面渲染几乎每家都会问“输入 URL 到页面渲染的完整过程”但两年经验这个问题往往不只是背诵。面试官会从网络层问到渲染层再问到 JS 执行每一层都可能截停追问。我第一次被截停是在“CSS 放在底部会有什么问题”这个点上。很多人能答出“会阻塞渲染”但再往下问“那为什么 JS 也建议放底部”就需要说到 HTML 解析中断、样式计算与脚本执行的关系了。我的标准回答路径是先讲 HTML 解析生成 DOM 树遇到 CSS 会下载并解析生成 CSSOM遇到带 defer 或 async 的脚本会并行下载、延后执行同步脚本则会阻塞 HTML 解析。然后是 DOM 树和 CSSOM 合并成渲染树再经过布局、绘制、合成。整个链路讲完可以主动提一句“现代浏览器还有预加载扫描器会在 HTML 解析时提前发现子资源做预加载”这句话往往能让面试官觉得你是在追踪新特性而不只是背流程。关于渲染这块还想多说一句很多人把重排和重绘分得清但被问到“transform 为什么比修改 left/top 性能好”就有点接不住。这里的关键是合成层浏览器可以把某个元素单独提升到合成层transform 的变化不触发重排和重绘只触发合成。平时写动画尽量用 transform 和 opacity就是基于这个原理。这个考点在性能优化专题还会反复出现。2.2 JS 核心闭包、作用域、异步与事件循环JS 是前端面试的基本盘。闭包、原型链、this 指向、事件循环这四块基本覆盖了大部分 JS 轮次。但两年经验的问法往往不是“什么是闭包”而是“闭包在项目里哪里用到了”。我当时的做法是把四块内容分别整理成“定义—原理—场景—坑”的格式来理解。比如闭包定义层面是函数能访问定义时所在词法作用域的变量原理是函数执行上下文被外部引用后不能释放场景是防抖节流、私有变量、模块化封装坑是内存泄漏和循环引用。这样整理完面试时无论从哪个角度提问都能接得住而且不会被“换个问法就不认识了”的问题卡住。事件循环值得单独拎出来说。面试官非常喜欢给一段代码问输出顺序。这段代码里通常会有 setTimeout、Promise 微任务、async/await 和 requestAnimationFrame。要特别留意的是async/await 是分两段执行的await 后面的代码会作为微任务继续运行另外 Node 环境的宏任务队列和微任务队列跟浏览器有差异比如 Node 会把 setTimeout 和 setImmediate 分开处理。实际面试中我被追问过“process.nextTick 在浏览器里有没有”这道题考的就是你到底有没有区分浏览器和 Node 环境。还有一个思路也可以提一下如果被问到“为什么微任务先于宏任务”可以从调度机制的角度答。微任务队列是当前同步代码执行完后立即清空的而宏任务要到一次事件循环的末尾才取出来执行。这种机制保证了 Promise 的回调能尽快执行也避免了频繁的渲染阻塞。2.3 CSS 与布局实战中的高频考察CSS 在两年经验里不会被问太多偏门属性更多是布局和层叠相关的基础。BFC、Flex、Grid、垂直居中、两栏布局这几个点是低风险高频繁的考项。面试官如果问“怎么让一个元素垂直水平居中”想听到的不是一种写法而是不同场景下的取舍。flex 布局适合大多数场景一行代码搞定grid 居中适合父容器就是网格容器的场景position 加 margin auto 适合已知尺寸的弹窗transform 方案适合绝对定位的未知尺寸元素。能把每种方案的边界条件说清这道题才算答透。另外移动端适配几乎必问viewport 的作用、rem 与 vw 的差异、dpr 与物理像素的关系这些要能随口讲出来最好还能结合一个实际的适配方案比如 postcss-px-to-viewport 是怎么工作的。2.4 浏览器安全与网络基础XSS、CSRF 与 HTTP这两年前端安全受到的关注越来越多了中大厂面试几乎必问 XSS 和 CSRF。XSS 的核心是用户输入没有被转义导致恶意脚本注入。面试官通常会追问如何防御输出转义、CSP 限制加载来源、HttpOnly 防止 cookie 被读取这三个方向都能答。CSRF 的核心是跨站请求伪造防御方式是验证 Referer、加 CSRF token、同源检测。HTTP 相关的高频题有缓存机制和 HTTPS 建立过程。缓存这里我建议画一个简单流程请求发起时先查强缓存Cache-Control、Expires命中直接使用没命中走协商缓存带上 If-Modified-Since 或 If-None-Match 问服务器资源是否变化。面试官会继续问“ETag 和 Last-Modified 有什么区别”ETag 是内容级别校验更精确Last-Modified 是时间戳级别存在精度问题。HTTPS 握手这方面不用背得太深但至少要把 TLS 握手的大致阶段说清楚客户端发随机数、服务端返回证书和随机数、客户端验证证书并生成预主密钥、双方用预主密钥派生出会话密钥后续对称加密通信。3. 框架原理Vue 3 与 React 的必问深水区两年经验的框架题基本围绕响应式、渲染机制、组件通信、性能优化这几个维度展开。说到底面试官想确认的不是你会不会用框架而是你在框架内部出了问题时有没有排查路径。3.1 Vue 3 响应式原理与依赖收集我在面试里被问得最多的是“Vue 3 的响应式原理和 Vue 2 有什么区别”。Vue 3 用 Proxy 替代 Object.defineProperty解决了新增属性监听、数组索引监听、深层响应式的性能问题。但面试官通常不会停在“Proxy 能监听新增属性”他会接着问“依赖收集是怎么做的”。如果你只是报技术名词这场追问可能就到这了。如果想让面试官觉得你有深入过可以顺着往下讲一遍get 阶段通过 track 读取当前激活的 effect 作为依赖set 阶段通过 trigger 触发依赖更新。这里有一个新手容易漏的点依赖收集是在组件渲染期间执行的所以 effect 只能在渲染时被激活。这个理解能解释为什么只改一个响应式数据时只有依赖它的组件会更新而不是整棵树重渲。还有一个高频追问是“ref 和 reactive 有什么区别”。表面上是使用方式不同本质是响应式能力的不同实现reactive 直接对对象做代理ref 则是把值包在一个对象里再代理。模板里 ref 会自动解包所以写起来更顺手。面试官可能还会问“ref 在 template 里为什么不需要 .value”这个问题的答案就是解包机制。3.2 React 渲染机制与性能优化React 这边面试官喜欢从“setState 之后发生了什么”展开。一个标准的回答线是setState 触发更新React 根据更新调度 render 阶段render 阶段生成新的 React 元素树协调阶段对比新旧树得到差异提交阶段把差异应用到真实 DOM。这里如果能把“调度”和“协调”分清楚就已经领先不少人了。React 性能优化的高频问题集中在 memo、useMemo、useCallback 的区别和使用场景。面试官会追问“这三种分别做什么哪些情况下优化是多余的”。我的经验是memo 用于组件层级的渲染控制useMemo 用于缓存计算值useCallback 用于缓存函数引用。但更关键的是要理解它们都不是免费午餐用错了反而会导致依赖比较成本增加或闭包过期。我建议准备一个实际的性能排查案例放在兜里。比如某列表页每次输入框敲字都会引起整个列表重渲染排查发现是父组件状态变化导致所有子组件都重新渲染最后用 memo 包裹列表项并把 onChange 用 useCallback 稳定下来问题就解决了。这类案例显得你真实踩过坑而不是只会背概念。3.3 组件通信思路比 API 更重要组件通信是一个既基础又容易答得平庸的考点。Vue 这边有 props/emit、provide/inject、event bus、Vuex/PiniaReact 这边有 props、context、redux/zustand、自定义事件。面试官真正想听到的是你怎么在不同通信方案之间取舍。我的标准答案是优先考虑数据流向是否清晰。父子组件通信用 props 向下、事件向上这是最直白的跨层级共享状态用依赖注入或者全局状态库但全局状态库最好不要滥用否则会变成一个大杂烩。面试官听到你主动说“全局状态库能不用就不用”往往会比较认可因为这说明你不是只会堆 API而是思考过状态维护的成本。场景举例也很重要。比如主题切换、用户信息这种应用级共享数据适合放全局状态库而一个弹窗内部的展开收起就不值得放进 store。能把这个“量级”的判断说清楚组件通信这一题基本就过了。4. 手写代码与面试现场答题技巧手写题是筛掉人的重灾区。两年经验的面经里面手写题既考算法又考 JS 基础尤其是对边界条件的处理。我前两场面试就挂在一道看起来很简单的深拷贝上后来复盘才意识到不是不会写是想得不够周全。4.1 高频手写题及解法思路高频题几乎固定防抖节流、深拷贝、手写 Promise、数组去重与扁平化、订阅发布、call/apply/bind、instanceof。看起来简单但面试官会在你写完后追问边界条件。以深拷贝为例我第一次面试的时候只写了递归复制对象面试官当场就问“循环引用怎么办、Symbol 属性会丢吗、函数和正则怎么处理”。之后我把深拷贝整理成了带注释的完整版本用 WeakMap 记录已拷贝对象来处理循环引用保留 Symbol 和不可枚举属性对 Date、RegExp、Map、Set 分别做构造器处理。这个版本后来我面了好几轮都稳因为它说明你是设计过边界条件的。手写 Promise 更是重量级。我建议至少能脱离参考默写 Promise.resolve、Promise.all 和 Promise.race。这个熟练度不是背出来的需要你对 executor、resolve、reject 和 then 的调用时序有感觉。写的时候注意一个细节then 里注册的回调要异步执行用微任务包装。我曾在面试时把同步执行写错了面试官当场指出问题那个印象太深了。手写题核心考点容易遗漏的边界深拷贝递归、类型判断循环引用、Symbol、特殊对象防抖节流this 绑定、参数透传首次是否执行、取消防抖Promise.all并发管理与时序空数组、reject 顺序call/apply/bindthis 绑定、函数调用bind 后的 new 行为instanceof原型链查找右操作数非函数时的异常表格只是梳理最终还是要在白纸上多写几遍。我备考时是准备了一个笔记本每道手写题先自己写一遍再看标准答案把差异点标出来隔天再默写一遍。三轮下来基本能形成肌肉记忆。4.2 面试现场的表达与复盘方法两年经验的面试表达方式甚至比答案本身更重要。面试官问到一个不太熟的点千万不要直接说“不会”可以先说“这个点我了解不多但以我目前的理解大概是……”再把周边相关的知识讲出来。面试官更在意的是你的思考路径而不是你背了多少题库。当然如果真的一无所知硬编反而更扣分这时候不如坦诚说没接触过但可以讲一下可能的排查思路。每次面试结束后我做的第一件事不是刷手机而是趁记忆新鲜打开备忘录把面试官问的题按“会答的、半会的、完全不会的”三类记录下来。不会和半会的题当天必须查资料弄清楚并且想一遍“下次再被问到怎么说更清楚”。这个复盘习惯帮助我每一轮都有积累而不是面一场忘一场。到后面几家公司时我能明显感觉到自己对同一道题的表述流畅度提升了一大截。5. 面经里的血泪教训与后续规划面试经验不是玄学是可以用方法积累的。但有些坑只要踩一次就可能浪费一个月的准备周期。5.1 我踩过的坑第一个坑是面试前去刷了大量偏难怪的题比如各种冷门 API 和魔法属性结果基础高频题反而没准备充分。后来复盘发现中大厂两年经验的面更看重基础高频题答得扎不扎实偶尔一两道偏题答不上来影响不大但基础题答得含糊会让你整体评价直接降档。第二个坑是项目经验讲得太平。第一次面试的时候被问到“你在这个项目里最大的收获是什么”我居然回答“学会了团队协作”当时面试官表情就很微妙。后来我把收获改成“一个重构里我优化了 XX 模块的渲染性能从 500ms 降到 200ms并沉淀了一套组件设计规范”效果完全不同。记住面经里不要讲虚的用数据、用技术点说话。第三个坑是没做模拟面试。我自己准备了很多题但一进真实环境还是会紧张。后来找了一个朋友做模拟面试对方扮演面试官连续追问我才发现原来很多题嘴上说得清追问两轮就卡壳。提前适应追问的节奏在真正面试时才能稳住。如果没有朋友帮忙也可以对着录音自己问自己重点是模拟被逼到墙角的状态。5.2 上篇总结与下篇预告到这里两年经验面试的上半场基本讲完了从简历到基础从框架到手写这些属于面试的硬部分几乎每家都会考答得好不好直接影响面试官对你的第一印象。下半场我会用到“前端两年经验中大厂面经下”这个题目继续展开聊工程化与性能优化的高频题、算法题的准备策略、系统设计与项目深挖的应对方法以及 HR 面谈薪资时的一些经验。内容比较多我打算拆成两篇来讲工程化一个主题算法与综合面试一个主题避免一篇太长大家读起来累。如果上面这些硬基础你都准备得差不多了那下篇的内容会更有价值因为它讲的是怎么把面试从合格拉到出彩的那部分。两年经验不是劣势关键是你能不能让面试官看到一个有独立思考能力、能解决实际问题的人。