1. 先说点实际的金三银四前端面试到底在考什么又到了金三银四身边不少前端朋友都在准备换工作私信问我最多的就是“现在前端面试到底考什么”“八股文还背不背”“项目怎么讲才加分”。说实话我每年这时候都会帮身边人做模拟面试也接触了不少大厂、中厂的真实面经前后端工程师的面试考察逻辑这几年变化非常明显——已经从“背出知识点”转向“讲清原理落过项目扛得住追问”。这篇面经不是给你列一份题库而是把我亲手整理的一套前端面试准备思路、高频考点拆解、项目包装方法、手写题应对策略以及我踩过的坑、复盘过的真实案例一次性串给你。适合准备跳槽的初中级前端也适合想系统梳理知识体系、但又不知道从哪里下手的同学。你跟着这个框架走一遍至少能保证面试前心里不慌。先说一个核心结论现在的面试官80%的时间都在验证两件事——第一你是不是真的理解技术原理而不是只会调API第二你做过的事是不是能讲清楚为什么这么做、换一个场景你还会不会做。后面所有内容都是围绕这两点展开的。2. 前端面试的整体准备思路2.1 先搞懂面试官想看什么面试本质上是“信息不对称下的信任建立”。你需要让面试官相信你的技术深度能胜任岗位你的工程经验能带来产出你的学习能力能适应变化。对应到前端岗位面试官的考察维度大致分成四层第一层语言基础。JavaScript 的核心机制、CSS 的布局与渲染、TypeScript 的类型能力。这层是“地基”挂在这里最不划算。第二层框架与生态。Vue 或 React 的核心原理、Hooks 或 Composition API 的生命周期、状态管理、路由、组件通信。这层是“工地”几乎所有日常开发都在这里。第三层工程化与性能。构建工具Webpack/Vite、模块化、代码规范、CI/CD、浏览器渲染、性能优化手段。这层是“施工管理”决定你能否从“会写页面”升级为“会搭体系”。第四层软技能与业务思维。项目背景、技术选型理由、协作流程、线上问题处理、业务价值判断。这层是“综合验收”通常在一面之后的层层面试里出现。不同公司、不同年限的面试侧重点差异很大。应届生和三年以内的候选人面试官更看重第一层和第二层因为默认你还没有足够多的项目经验去支撑第三四层三年以上或者应聘高级岗位的第三四层的权重会迅速上升八股文反而不会问得太细更多是通过项目深挖来验证。2.2 时间线怎么排才不走弯路备面最忌讳东一榔头西一棒子。我建议你把准备周期控制在四到八周分四个阶段推进。第一周是“摸底与定位”。把自己过去做过的项目列一个清单每个项目写清三个东西我负责的模块、用到的核心技术和框架、除了“实现功能”之外还有什么亮点性能优化、工程化搭建、复杂逻辑处理、跨端方案等。这一步是后面写简历和讲项目的基础。第二三周是“系统复习”。按我上面说的四个维度拉一张知识清单先过一遍语言基础和框架原理再补工程化和网络知识。重点是“原理”而不是“用法”比如 Vue 的 nextTick 为什么能在 DOM 更新后拿到最新值、React 的 useState 为什么不能写在条件语句里这些问题要能讲出源码层面的原因。第四五周是“实战刷题与项目复盘”。刷题分两块一块是手写代码题包括防抖节流、深拷贝、Promise、EventEmitter 这些高频题另一块是算法题前端岗位通常以 LeetCode 的 easy 和 medium 为主重点刷数组、字符串、链表、二叉树、动态规划基础题。项目复盘则是把简历里每个项目按照“背景-方案-难点-结果”的逻辑写成逐字稿再预演面试官可能的追问。第六周以后是“投递与模拟面试”。不建议一上来就投心仪的大厂可以先用中小厂练手把面试当成免费的模拟测试。我见过太多人第一场面试紧张到话都说不利索面完两三家之后状态明显好了很多说话也有了逻辑。所以“先小后大”这个策略亲测有效。2.3 面经里的高频关键词先心里有数从最新的前端面经热词来看有几个词出现的频率特别高微前端、组件库、大文件上传、Worker、Vue 3、React Hooks、前端监控、前端工程化。“微前端”几乎成了中大厂二面的标配场景题面试官会问你“如果让你们项目接入微前端你怎么设计主应用和子应用的通信”“js 沙箱的作用是什么”。组件库考察的是你对封装和抽象的理解比如“设计一个 Table 组件要考虑哪些边界情况”。大文件上传则经常和 Worker 结合起来问比如“大文件上传为什么要用 Web Worker”“切片上传和断点续传的实现思路”。这些关键词不一定都是深挖但至少要有一个“理解全貌、能讲思路”的状态我下个章节会逐个展开。3. 核心高频考点拆解与原理深挖3.1 JavaScript 基础不止会背还要会画执行过程JavaScript 基础是前端面试的“必考题”但考法和前几年不一样了。以前是“闭包是什么”“原型链是什么”这种概念题现在更多是给你一段代码让你写出输出结果并解释每一步的执行过程。举个高频例子console.log(script start); setTimeout(function () { console.log(setTimeout); }, 0); Promise.resolve() .then(function () { console.log(promise1); }) .then(function () { console.log(promise2); }); console.log(script end);输出顺序是script start、script end、promise1、promise2、setTimeout。这道题考察的是事件循环Event Loop的执行机制同步任务先执行微任务Promise.then在执行栈清空后、下一个宏任务setTimeout之前执行而宏任务之间又分为不同的任务源队列所以 setTimeout 的 0 毫秒延迟并不代表它在微任务之前执行。很多同学能答对结果但被追问“微任务和宏任务各自有哪些 API”就卡住了。这里我整理一个速查表任务类型常见 API宏任务macrotasksetTimeout、setInterval、setImmediate、I/O、UI 渲染、MessageChannel微任务microtaskPromise.then/catch/finally、queueMicrotask、MutationObserver闭包也是常考结构。比如for (var i 0; i 5; i) { setTimeout(() console.log(i), 1000); }输出是 5 个 5因为 var 声明的是函数级作用域循环结束后 i 已经变成 5。改成 let 后输出 0 1 2 3 4因为 let 会为每次循环创建一个新的块级绑定。如果再深入一点面试官会问“不用 let怎么实现输出 0 1 2 3 4”这是经典的闭包应用场景——用立即执行函数IIFE保存每次循环的 i 值。这类题目建议你自己在编辑器里跑一遍并且在纸上画出作用域链的指向关系面试时才能讲得丝滑。3.2 框架原理Vue 3 和 React 18 的差异与共性框架题是前端面试的重头戏。现在问 Vue 2 的越来越少更多是“Vue 3 的响应式为什么改用 Proxy”“React 18 的并发特性是什么”“Vue 和 React 的 diff 算法有什么异同”。Vue 3 的响应式核心是 Proxy 代替了 Object.defineProperty。好处有三点第一可以监听对象属性的新增和删除Vue 2 里需要 Vue.set 才能实现第二可以监听数组索引和 length 的变化不需要重写数组方法第三Proxy 是懒代理默认只代理实际访问到的属性性能更好。讲到这里面试官通常会追问“Proxy 有什么缺点”你要能答出兼容性不支持 IE11、代理对象对比时的身份问题proxy object 返回 false等。React 这边的高频考点是 Hooks。常考有“为什么 Hooks 不能写在条件语句里”答案是 Hooks 的调用顺序决定了每个状态在 Fiber 节点上的存储位置如果条件变化导致某个 Hook 不执行后续所有 Hook 的索引就会偏移状态就乱了。还有一个常问的是“useMemo 和 useCallback 的区别”一个是缓存值一个是缓存函数本质上都是为了减少不必要的计算和子组件重渲染。再深一层会问“React.memo 和 useMemo 的适用场景差异”你要能说出“memo 是组件级别的缓存useMemo 是值级别的缓存”。Vue 和 React 的对比题可以从三个维度回答数据流Vue 是响应式自动追踪React 是单向数据流手动优化、更新粒度Vue 的组件级更新精确到属性React 是 Fiber 树从根节点协调、状态管理Vuex/Pinia vs Redux/Zustand。面试官最关心的不是你说谁好谁坏而是你能不能客观说出各自的设计取舍。3.3 工程化与性能优化从“能跑”到“能扛”工程化题基本围绕构建工具展开。Vite 比 Webpack 快的核心原因是利用浏览器原生 ESM 的能力开发阶段不需要打包启动和热更新都是毫秒级生产构建则用 Rollup。面试官常问“Vite 开发环境为什么快生产构建为什么不用 ESM”你要能答到“ESM 在浏览器原生支持但生产环境需要兼容性和体积优化所以仍然需要打包”。Webpack 的问法大多围绕 loader 和 plugin 的区别、构建优化手段、tree-shaking 原理。tree-shaking 的本质是 ES Module 的静态分析能力只有 import/export 语法才能在编译阶段确定哪些代码被使用、哪些可以剔除。如果你在项目里用了 CommonJStree-shaking 就会失效这也是为什么现在新项目基本都统一用 ESM。性能优化里有一个高频场景题“你的项目首屏加载太慢怎么排查”我建议你按下面的思路答先量化指标用 Lighthouse 或 Performance 面板看 FCP、LCP、TTI 几个核心值。再定位瓶颈网络层面看资源体积和请求数渲染层面看主线程的脚本执行时间。最后给出方案代码层面可以做路由懒加载、组件按需引入资源层面可以开启 gzip、CDN 缓存、图片压缩缓存层面可以用 HTTP 缓存策略配合 Service Worker。最后加一句性能优化不是把所有技术堆上去而是先测量、再定位、再针对性地改。3.4 网络与浏览器缓存、跨域、渲染机制网络知识的考察非常务实。HTTP 缓存几乎是必考你要能区分强缓存Expires、Cache-Control和协商缓存Last-Modified/If-Modified-Since、ETag/If-None-Match并说清两者的优先级和适用场景。比如 Cache-Control 的 max-age 和 no-cache 的区别no-cache 不是不用缓存而是每次都向服务器验证验证通过则用缓存验证失败则重新拉取。跨域问题的本质是浏览器的同源策略。常见的解决方式有 JSONP、CORS、代理转发、postMessage。中级以上面试官会追问 CORS 的细节比如“简单请求和非简单请求的区别”“OPTIONS 预检请求是干什么的”“携带 Cookie 需要满足什么条件”。这些不能只记名字要能说出完整流程非简单请求会先发一个 OPTIONS 预检请求服务器返回 Access-Control-Allow-Methods、Access-Control-Allow-Headers 之后浏览器才会发真实请求。浏览器渲染机制的经典问题是“从输入 URL 到页面展示发生了什么”。这个问题其实是一个“系统性叙事”考察题建议从 DNS 解析、TCP 连接、HTTP 请求、构建 DOM 树、构建 CSSOM 树、合成渲染树、布局、绘制、合成九个步骤展开。同样的问题面试官会关注你有没有把“渲染树和 DOM 树的区别”“回流和重绘的区别”讲清楚。4. 项目经历怎么讲才加分4.1 用 STAR 法则包装每个项目项目提问是面试里占比最高、也最容易拉开差距的环节。很多同学的项目背景是“参与 xx 后台管理系统负责 xxx 模块”这种描述几乎等于没有亮点。我建议你按照 STAR 法则来组织每个项目的表达情境Situation项目是什么业务背景解决什么痛点 任务Task你在项目中的职责和核心目标是什么 行动Action你具体做了哪些事用了什么技术方案为什么这么选 结果Result取得了什么可量化的结果比如性能提升、稳定性提升、效率提升。举一个真实的例子我的一个朋友在他的简历里写“负责公司后台管理系统的权限模块”面试时完全讲不出亮点。我帮他把项目改成这样描述背景是业务线从单一角色扩展到多租户模式原来的前端按钮级权限写死在组件里新角色上线要改代码他牵头设计了一套动态权限指令和路由守卫方案权限数据由后端返回前端通过指令统一控制按钮显隐上线后新角色接入从原来的需要排期开发压缩到仅需配置权限数据即可接入了三个新角色节约了至少两天开发量。这样一来面试官看到了他的业务敏感度、方案设计能力、结果导向思维追问自然就围绕这个方案展开了。4.2 项目中的“亮点”要能讲出三种备选方案面试官特别喜欢问“你为什么用这个方案有没有考虑过其他的”。项目里每个技术选型你至少要准备三种方案并且能说出为什么选其中一个。这里我可以给你一个通用的回答模板“我当时对比了 A、B、C 三个方案。A 方案优点是……缺点是……B 方案优点是……缺点是……最终我选了 C因为在这个业务场景下它的优势最匹配我们的需求。比如我们当时数据量每天只有 XX 条不需要引入重型中间件所以用 C 的轻量方案就够了。”举个例子我在一个项目里做前端字典管理最初想用第三方 i18n 库实现多语言后来发现需求只是管理一些业务枚举和状态下拉选项引入 i18n 反而重。最终选择了本地维护一个字典配置模块通过接口动态拉取后全局注册。面试官再问“如果字典数据量变大比如上万条你怎么办”你就可以答改成按需加载 缓存策略或者迁移到后端统一配置中心。这个追问的本质是看你有没有考虑系统的演进。4.3 项目复盘最容易踩的坑过度夸大与不懂取舍我见过不少候选人简历写得特别炫但一深挖就露馅。比如写“用 Web Worker 实现大文件上传”但问到他 Worker 线程里做了什么、主线程和 Worker 之间怎么通信、进度条怎么计算的时候他说不出细节。这种情况比不写这个亮点更危险因为面试官会怀疑你的诚实度。我的建议是项目写你真正做过的事哪怕听起来不那么高级只要你把细节讲透效果也很好。比如你只是做了前端页面里的一个复杂表格交互你把它讲清楚“表格 500 行数据渲染卡顿我分析后改用虚拟滚动只渲染可视区域内的行滚动条高度用总高度占位”这个复杂度已经足够证明你的能力和思考。5. 手写代码与场景题实战5.1 高频手写题清单与解题思路前端面试手写题范围其实比想象中固定。我把高频题目列成一张表后面再挑几道讲思路题目考察点难度防抖和节流闭包、定时器、this易深拷贝递归、循环引用、Symbol、Map中Promise.all / Promise.race异步流程控制中发布订阅EventEmitter设计模式、回调管理中数组拍平与去重reduce、Set、递归易手写 new原型链、对象创建过程中手写 reduce数组方法内部实现中LazyMan 之类异步队列任务队列、链式调用难以手写防抖为例标准回答如下function debounce(fn, delay) { let timer null; return function (...args) { const context this; clearTimeout(timer); timer setTimeout(() { fn.apply(context, args); }, delay); }; }关键要讲清楚为什么用闭包保存 timer因为要保证多次调用的是同一个 timer 变量为什么用 apply 保存 this因为事件处理函数里 this 指向很重要如果要求“第一次点击立即执行”怎么加一个 immediate 参数。深拷贝是另一道常考手写题注意三个点循环引用用 WeakMap 存储已拷贝对象、Symbol 类型、原型链的保持。有同学 30 秒写完一个 JSON.parse(JSON.stringify(obj))然后说“这就是深拷贝”这是大忌面试官一定会追问这个方式的局限比如日期对象、正则、函数、循环引用都会被破坏。5.2 系统设计题用“目标-方案-细节-演化”四段式回答系统设计场景题越来越常见比如“设计一个前端监控系统”“设计一个大文件上传功能”。这类题考察的是你的系统架构能力和逻辑表达能力。我建议用四段式来组织回答下面以“大文件上传”为例拆给你看。第一步明确目标。大文件上传要解决的核心问题是网络不稳定导致的上传失败、超大文件占用过多内存、上传进度感知差。第二步提出方案。切片上传 断点续传 并发控制。前端将文件按固定大小比如 5MB切成多个切片并行或者串行上传后端记录每个切片的上传状态全部上传完成后前端发送合并请求。断点续传可以用文件 hash比如 SparkMD5 计算内容 hash标识文件上传前先向后端查询哪些切片已存在只上传缺失的切片。第三步讲细节。并发控制可以用 p-limit 这类库也可以自己实现一个并发池。进度计算是已上传切片数/总切片数而不是所有分片的字节数因为并发上传时字节数统计会乱。如果文件 hash 计算很耗时可以用 Web Worker 在后台线程计算不阻塞主线程 UI这正好回应了热词里的“前端使用 worker 上传大文件”。第四步说演化。如果文件数量很大可以把切片信息也持久化到 IndexedDB下次打开页面自动续传如果是多个文件批量上传需要增加队列管理如果要支持秒传需要后端先校验 hash 是否存在存在则直接返回成功。这套话术的好处是有骨架、有血肉、有思考哪怕面试官临时换一个场景题比如“设计一个前端错误监控系统”你也可以套用同样的四段式。5.3 手写题的现场状态管理手写题考察的还有临场发挥。我在模拟面试里发现一个规律很多人不是不会写而是太紧张导致思路断片。这里给你三个实战技巧。第一先讲思路再写代码。面试官让你手写的时候你可以先说“我的思路是先用闭包保存一个变量再通过定时器控制执行频率”这会让面试官知道你不是在背题而是真的理解。第二写出主体骨架再补边界。比如写深拷贝时先写一个普通递归版本再补循环引用、Symbol、特殊对象的处理不要一上来就追求完整写不出来反而卡住。第三遇到不会的坦诚说“这块我没有深入过但我的理解是……”。面试官最怕的是不懂装懂、乱写一通的人坦诚加一个合理的思路推测往往能保住印象分。6. 一次真实面试模拟全流程复盘6.1 一面基础题手写题算法题怎么过我用一个真实的模拟案例来展示一面全流程。候选人小张两年 Vue 开发经验目标岗位是中级前端。面试开场通常是一个自我介绍时间控制在三分钟左右。小张的第一版自我介绍是“我叫小张工作两年做过电商后台和政务项目熟练使用 Vue、Element UI熟悉 JavaScript”。这个自我介绍问题很大没有任何差异化。我帮他改成“我做了两年前端主要技术栈是 Vue 3 和 TypeScript。上份工作里我负责了电商后台从 Vue 2 到 Vue 3 的迁移顺便搭了一套基于 Vite 的工程化骨架现在新项目开发效率比之前提升了不少。”这一段话就埋了两个可聊的钩子迁移项目和工程化建设。接下来是八股和手写穿插。面试官可能会问“Vue 3 的 ref 和 reactive 有什么区别”小张如果能答出 ref 主要用于基础类型和引用类型reactive 只能用于对象且 ref 在模板中会自动解包、在 JS 中需要 .value就已经不错。如果还能补一句“reactive 的局限是不能直接整个替换对象因为 Proxy 的整个对象替换会丢失代理所以需要嵌套 ref 或者用对象下的字段”这就能让面试官眼前一亮。一面通常还会有一道算法题。前端考的都是基础题比如“给定一个数组找出和为 target 的两个数”。这道题用哈希表可以做到 O(n) 复杂度function twoSum(nums, target) { const map new Map(); for (let i 0; i nums.length; i) { const diff target - nums[i]; if (map.has(diff)) return [map.get(diff), i]; map.set(nums[i], i); } return []; }注意这里要解释为什么要用 Map关键是用空间换时间否则双循环是 O(n^2)。面试官追问“如果数组有序能不能优化到 O(1) 空间”你就可以讲双指针法。这两问都能接上算法环节基本就稳了。6.2 二面项目深挖和场景题怎么扛二面通常是团队负责人或技术专家提问风格会从“你知道什么”变成“你做过什么、你会怎么做”。小张的简历里写了一个“低代码表单配置平台”的项目这是他自己主导开发的。面试官开始深挖你第一步模块是如何设计的如果用户自定义组件你怎么做动态渲染你的表单校验是怎么解决的小张一开始没有准备只能凭印象讲效果很差。我给的建议是在面试前把项目的每个模块都按“功能-方案-细节”重新过一遍特别是你自己设计的部分要把代码实现的关键路径画出来。比如动态渲染他可以讲“通过记录组件的 type 字段在渲染时动态 import 对应的组件文件然后用 defineAsyncComponent 实现懒加载”这样面试官就能看出他真的有代码层面的思考。场景题则会围绕业务的复杂度展开。比如“后台管理系统的字典管理一般有什么用”这个问题看着基础其实考察你是否理解字典抽象的边界。你可以展开字典是业务数据和展示层之间的映射它解决的问题是“枚举值散落在代码里变更要发版”。通过接口获取字典项前端渲染时统一映射做搜索下拉、状态标签、表单选项都能复用。再进一步字典的缓存、多租户隔离、字典组的概念、后端配置平台对接方式这些都能体现你的业务深度。6.3 三面和 HR 面软技能的临门一脚三面更多是“通盘考察”关注你的学习能力、抗压能力、团队协作。常见问题是“你遇到过的最难的技术问题是什么怎么解决的”。这个问题套路性很强但很多人答不好。我建议你用“遇见问题-排查过程-最终解决-复盘沉淀”来回答重点放在排查过程和复盘沉淀上。HR 面则更关注“为什么离开上一家公司”“期望薪资”“入职时间”。技术人容易在 HR 面栽跟头的点是把抱怨情绪带出来。无论上一家公司有多少让你不满意的地方答离职原因时都强调“个人成长空间”和“职业规划匹配”而不是“加班多”“领导不行”。薪资谈判时可以提前了解市场行情给自己定一个区间并说明你期望薪资的依据。7. 常见问题与踩坑记录这几条我希望你提前知道7.1 简历和面试环节最常见的 6 个雷第一简历写得像岗位 JD。写“负责 xx 系统的前端开发使用 Vue 开发页面”属于废话没有信息增量。我建议把简历里的每个项目都提炼出“解决的问题”和“技术动作”比如“用虚拟滚动解决 5000 行表格渲染卡顿”明显更有说服力。第二八股文只背不会讲。你背了“nextTick 是异步更新队列的一种机制”但面试官问“nextTick 为什么要用微任务而不是宏任务”你就卡住。记住背概念是最低级的准备方式理解机制、能举例子、能画执行流程才是有效准备。第三项目里写了自己不熟悉的技术。如果你简历里写了 Web Worker、微前端、Canvas面试官一定会围绕这些展开。如果没有实际做过建议要么补充学习到能讲清原理的程度要么从简历里删掉。第四答非所问。面试官问“你的项目有哪些难点”你回答“我用 Element UI 做了一个表单”这完全没有回应问题。难点应该是“有技术挑战、有取舍权衡”的点比如“表单联动逻辑复杂我构建了一套基于配置的渲染方案”。第五不准备反问环节。“你有什么想问我的”是面试里重要的加分项也是你了解团队的机会。你可以问“团队当前技术栈的演进方向”“这个岗位未来半年的核心目标是什么”“代码评审和发布流程是怎样的”这些都是正向的、显示你对岗位有真实兴趣的问题。第六面试后不复盘。每次面试结束后花半小时把被问住的问题记录下来然后立即找资料补上。我认识的拿 offer 拿到手软的人几乎都有一个自己的错题本面一场补一场越面越强。7.2 关于心态和精力的几点经验金三银四的面试周期通常会持续两三周中间可能穿插多场面试体力和心态都很重要。我的经验是不要在一天内安排超过两场面试给每场面试留出至少一个小时的缓冲面试前不要做新题不要临时翻书保持轻松面试过程中语速可以放慢一点给自己留思考时间说“我理一下思路”完全没问题。关于“面完后没消息”这件事我的建议是不要等。一般大厂二面到 HR 面可能间隔一周这是正常流程。如果超过两周没消息可以礼貌地在邮件或微信里跟进一次但不用频繁催促。技术人的口碑很重要保持专业和耐心比什么都强。7.3 最后再分享一个小技巧我在每次模拟面试的最后都会让候选人准备一个“30 秒技术亮点自述”。在面试开头或结尾当你被问到“你觉得自己最大的优势是什么”的时候不要泛泛而谈“学习能力强工作认真负责”而是说“我最近半个月在系统梳理前端性能优化相关知识并在自己的项目里做了三处优化FCP 提升了 20% 左右”。这句带着具体数字和行动的回答比一百句“学习能力强”都有说服力。我个人在实际操作中的体会是面试准备最怕的不是知识盲区而是“明明知道却讲不清楚”。所以不管是八股文、项目、还是手写题都要用输出的方式来检验自己——找朋友模拟面试自己对着录音讲一遍项目把每一个技术方案都按“是什么、为什么、怎么做、不这么做会怎样”来复盘。等你把每个知识点都讲到能脱口而出的程度金三银四再卷你也能稳住阵脚。