去年年底我集中面了一批公司前前后后大概聊了有十几家从两三百人的创业团队到几千人的大厂都走了一遍。当时是带着“看看市场行情”的心态去的结果面完发现一件很有意思的事这些公司业务差异很大有的做编辑器、有的做电商中台、有的做数据可视化但面试官问的问题高度重叠翻来覆去就是那几类。当时我把每场的面试题都随手记在了备忘录里最近整理的时候粗略统计了一下大概有80%的问题都能归到几个固定模块里。这篇文章就直接按我记录的频次把那些出现频率最高的题分类复盘一遍再聊聊每类题背后面试官到底在听什么。如果你也在准备前端岗的面试按这条主线去准备我个人感觉比漫无目的地刷题效率高很多。1. 十几场面试的共同交集基础题就考这四板斧不管公司大小、技术栈是Vue还是React第一轮技术面基本都会从基础题开场。我整理下来出现频率最高的基础题就四个方向事件循环、闭包、this指向、原型链。这四个点几乎场场必考区别只是换着花样出题。1.1 事件循环几乎每场都有一道“输出顺序题”面试官最常见的姿势是直接甩一段代码让你说输出顺序。比如console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4);答案是 1、4、3、2。但面试官要的不只是这个答案。我后来复盘才发现这道题真正考察的是你知不知道JS是单线程的异步靠事件循环调度你分不区分宏任务和微任务你知不知道浏览器端和Node端的循环模型有差异。第一轮面下来我大概遇到五种变形有换成async/await的、有在Promise里嵌套setTimeout的、有问requestAnimationFrame和setTimeout谁先执行的、还有直接问“微任务清空是什么意思”的。比较加分的讲法是这样的先回答问题然后把事件循环的机制用一两句话说清楚——同步代码执行完之后会先清空微任务队列然后取一个宏任务执行执行完再清空微任务队列如此循环。如果还能补一句“浏览器里每个宏任务之间可能会发生页面渲染所以requestAnimationFrame的回调时机和任务队列不是一回事”那面试官基本就会点头往下走了。1.2 闭包从“是什么”到“用在哪”再到“坑在哪”闭包也是高频中的高频。最直接的问法是“说说你对闭包的理解”但面试官听回答的耐心通常只有三十秒。如果你只背出那句经典定义“函数可以访问外层函数作用域的变量”这场面的气氛会迅速变冷。我后面总结出来的回答套路是三层递进定义层面函数和对其词法作用域的引用捆绑在一起就叫闭包本质是作用域链没断应用层面防抖节流、柯里化、模块化里的私有变量、React Hooks里useEffect的依赖捕获全是闭包的应用坑的层面闭包持有了外部引用容易造成内存泄漏尤其是老版本浏览器里DOM节点被闭包引用时要用Chrome Memory面板看detached节点。把这三层都讲完面试官一般会认为你有实际项目经验而不是单纯背概念。1.3 this指向代码输出题的重灾区this相关的题十几场里至少有十场都考了。最常见的是这种const obj { name: obj, fn: function() { console.log(this.name); } }; const g obj.fn; obj.fn(); // obj g(); // undefined严格模式报错问的就是“为什么同一个函数两次调用结果不同”。这考的是最核心的一句话this是在函数被调用的时候确定的谁调用了它this就指向谁。然后还需要知道优先级new绑定高于显式绑定call/apply/bind高于隐式绑定对象调用高于默认绑定。还有一个高频变体是问箭头函数。面试官常问“箭头函数的this为什么不能用call改变”答案是箭头函数根本没有自己的this它沿用的外层作用域的this所以任何绑定手段都没用。这个搞清楚之后React类组件里为什么需要bind、Hooks里为什么会有过期闭包就都能串起来了。1.4 原型链与继承问“new”的手写题比问定义多得多原型链这块现在面试官很少直接问“什么是原型链”因为背定义太容易了。他们更喜欢让手写new或者手写instanceof。function myNew(Constructor, ...args) { const obj Object.create(Constructor.prototype); const result Constructor.apply(obj, args); return typeof result object result ! null ? result : obj; }写完之后要能讲清楚为什么要在最后判断返回值的类型——因为构造函数可以显式返回一个对象这时new的结果就是那个对象而不是新实例。这就够分了。我的一大感受是基础题不是背知识点是要能现场推导。面试官都能接受“这个API我平时用得少”这种话但不能接受对机制本身含糊其辞。毕竟框架会换代、API会更新但JS的运行时机制不会变。2. 框架题三连问背后面试官真正在听什么过了基础关下一步就是框架题。现在市面上主流还是Vue和React两家我面试的公司里用Vue的偏多但问法和考察逻辑完全一样。我只想说一句如果你的简历写了“熟悉Vue”或“熟练使用React”下面这些题你是躲不掉的。2.1 Vue方向响应式、computed、nextTick是三大金刚Vue这边我遇到的最高频三问是Vue2和Vue3的响应式有什么区别为什么Vue3改用Proxycomputed和watch什么区别nextTick的原理是什么先讲第一题。Vue2用Object.defineProperty拦截属性读写缺点是新增删除属性拦截不到数组索引和length变化也拦截不到所以才有Vue.set和Vue.delete这种补丁API。Vue3用Proxy直接代理整个对象天然支持动态增删属性性能上也没有递归遍历对象属性时的额外开销Vue3是懒代理get到哪个属性才代理哪个。能讲到这一层面试官就知道你是真用过不是看了一遍简介。第二题computed和watch很多候选人能说出“computed有缓存watch没有”就结束了。但其实面试官想听到的是computed适合依赖多个响应式数据、产出派生状态的场景它的缓存机制依赖响应式系统的依赖收集watch适合有副作用、或者要对数据变化做出异步响应的场景。我一般会补一个实际场景——搜索框防抖请求用watch绰绰有余但列表筛选、汇总等派生数据用computed才合理。第三题nextTick核心是Vue的DOM更新是异步批量的nextTick回调会在DOM更新完成后执行。它在Vue2里是微任务优先Promise.then、MutationObserverVue3里直接就是Promise.then。说清楚了这个甚至还能接上事件循环那一章的知识点。2.2 React方向Hooks的闭包陷阱和setState的批处理React这边问的最多的是useEffect的依赖项是什么机制为什么会出现闭包陷阱stale closuresetState到底是同步还是异步函数组件和类组件的本质区别是什么闭包陷阱这个点好多候选人能描述现象——“依赖数组空的时候useEffect里拿到的state总是初始值”——但说不出原因。其实原因就是本章前面那位老朋友闭包。每次渲染都是独立的函数组件每次执行都会创建一个捕获了当前props和state的闭包useEffect里的回调捕获的是本次渲染的值。依赖数组的作用就是告诉React“什么时候要用新闭包替换旧闭包”。一旦理解了这个React面试里一半的问题你都能自己推导出来。setState同步异步那题现在标准答案是在React 18的自动批处理下大部分情况都是异步的但在原生事件、setTimeout里React 18之前不走批处理就是同步的React 18之后再这些场景也批处理了。能说出版本差异的候选人明显比只说“异步”的高一个段位。2.3 框架底层虚拟DOM和diff算法被问烂了但总有人答不对虚拟DOM和diff算法这是老八股了但我发现答得好的候选人比例反而不高。最常见的错误是把diff等价于“比较两个虚拟DOM树的差异”然后开始背key的作用。面试官真正想听的其实是为什么要虚拟DOM因为直接操作真实DOM代价高JS层面的对象比较便宜且虚拟DOM让跨平台渲染成为可能diff的复杂度是怎么从O(n³)降到O(n)的靠的是同层比较、类型不同直接替换、key做节点复用这三条策略Vue2的双端diff和Vue3的最长递增子序列优化到底优化在哪个环节。能讲到“只比较同层级”、“key帮助复用但不建议用index做key”这两点基本就能过了。如果还能说出“最长递增子序列是为了减少移动次数”那在框架原理这块基本没人能问住你。对了现在很多公司还会问一句“AI辅助开发工具比如claudecode这类前端开发插件有没有改变你的编码习惯”。这个问题本质是想考察你有没有在真实工作流里使用新工具有没有评估AI生成代码质量的意识。我当时的回答是AI工具用来写模板代码和单测很快但核心业务逻辑和复杂状态管理还是自己手写AI生成的代码一定要走Code Review。这个回答对方明显是认可的。3. 手写题和场景设计题从思路到边界才是拿分关键手写题在我遇到的十几场面试里出场率超过90%说它是“硬通货”也不为过。但这里我想先说一个反直觉的结论手写题的重点不在“写”在写之前的那30秒。3.1 先讲思路再动手能拉开一半差距很多候选人一上来就闷头写写完递给面试官——哪怕写对了效率也很低。更稳妥的方式是先跟面试官对齐两句“这个防抖需要支持立即执行吗”“取消功能要不要”然后口头把方案讲一遍“用闭包保存定时器连续触发时clearTimeout重新计时最后用apply保留this。”说完再动手写。我统计了一下我这十几场的经历面试官对你先讲思路这件事几乎没有负面反馈反而会顺着思路跟你有来有回。哪怕中途写错了他也知道你的意图在哪不会一票否决。3.2 高频手写题的真实考法我把实际遇到的手写题按频率排了个序手写题出现场次考点防抖/节流12场闭包、this、定时器深拷贝9场递归、类型判断、循环引用Promise.all/race8场异步并发、错误处理call/apply/bind6场this绑定、参数透传手写new / instanceof5场原型链、构造过程数组去重/扁平化4场基础API、复杂度3.3 深拷贝为什么值得单独练一遍深拷贝是面试官最爱加戏的一道题。最基础的版本是递归拷贝普通对象但面试官通常会步步紧逼遇到数组怎么办遇到Date、RegExp、Map、Set怎么办遇到循环引用怎么办我后来总结了一个足够应付面试的版本function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }关键在于用WeakMap解决循环引用用Reflect.ownKeys拿到symbol键这两种写法在实际项目中同样有用。面试官看到WeakMap那行基本就会放过你了。3.4 场景设计题弹窗组件是永恒的考题除了手写场景设计题也频繁出现。我碰到最多的就是“如果让你设计一个Modal弹窗组件你会考虑哪些问题”。这个题的考察面非常广API设计、插槽/children、事件冒泡、body滚动锁定、ReactDOM.createPortal或Vue的Teleport、动画、焦点管理、按需渲染、前后端埋点。我建议的答题框架是先说API设计props/attrs、事件、方法open/close再说渲染位置必须挂到body下面避免父级overflow影响定位用Portal或Teleport然后说交互细节mask点击关闭、ESC关闭、禁止body滚动、移动端锁滚动最后补一句关闭后要卸载DOM避免内存泄漏。能平静地讲完这四层面试官对你的工程化理解就有了基本信任。场景设计题没有标准答案考的就是你有没有真正封装过通用组件有没有踩过布局和事件冒泡的坑。4. 项目深挖环节技术选型和性能优化是重灾区项目深挖是面试中最没有套路、但也最考验积累的环节。这一关挂掉的人往往不是技术差而是讲不清楚自己做过的事。我把遇到的追问归纳成三条主线每一条都有对应的准备思路。4.1 “讲一个你最有成就感的项目”——STAR是底线这句话基本是开场标配。但我第一次被问到的时候直接卡壳了脑子里全是代码细节却组织不出一段有条理的话。后来适应了才发现面试官就是想听你“做了一件什么事、遇到什么困难、怎么解决、拿到什么结果”。一个合格的回答至少要覆盖项目背景业务是什么、你在里面的角色技术方案用了什么技术栈、为什么这么选量化结果性能提升多少、需求交付周期缩短多少个人思考如果重做一遍哪里能更好。“量化结果”是绝大多数人缺失的。做后端管理系统的同学常觉得“没有数据可量化”但其实接口响应时间、首屏加载时间、线上问题数、页面平均操作步骤数都可以是量化的角度。哪怕只是“把30秒的页面交互流程缩短到15秒”也是一个有力的数字。4.2 “你这个技术选型是怎么考虑的”——决策过程比结果重要我遇到过好几家面试官盯着简历上的技术栈问为什么用Vue不用React为什么不用TypeScript为什么自研组件库而不是直接用Antd这类问题没有标准答案但有标准思路讲清楚你的项目约束、备选方案、决策依据和后续演进。我自己的一个例子之前做一个低代码平台组件通信和状态管理非常复杂我们选了Vue3 Composition API Pinia。面试官追问“为什么不选React”我的回答是团队里Vue基础更好、生态里的低代码方案更成熟而且我们当时需要一个上手成本低的方案快速验证业务。如果你只回答“因为我们一直用Vue”那和没回答是一样的。4.3 “项目中的性能优化是怎么做的”——从指标聊到手段性能优化几乎是中大型公司必问的板块。我自己被追问最多的两个项目一个是活动页首屏优化另一个是复杂报表的渲染优化。首屏项目的完整链路是这样的先用Chrome DevTools跑了Lighthouse基线首屏FCP在3.2秒。然后做了四件事图片上CDN并压缩、把首屏请求数从84个合并到32个、在nginx配了强缓存和协商缓存、把渲染入口从同步改为按需加载。最终FCP降到了1.4秒。面试官听完链路之后通常会追问一句“为什么缓存能带来这么大提升”如果这时候你能说出“强缓存命中是从内存/磁盘读的连网络请求都不发自然快”这层就说明你不是简单会敲配置而是真的理解浏览器缓存。4.4 “AI工具在项目里怎么用的”——新阶段的加分题现在的面试环境里完全不提AI工具反而不自然了。我面试的时候会主动讲明代码生成类工具我用过主要用来写正则、生成重复的表单代码、写单元测试骨架。但我坚持人工把关的是涉及业务逻辑安全的部分尤其是权限校验、金额计算这类绝不能出错的地方。面试官对这段话的兴趣普遍很大通常还会追问几个细节“AI生成的代码有没有坑”“你怎么保证质量不下降”我的回答是code review门槛不能降、复杂度高的模块不要用、单测覆盖率作为兜底。这种真实的AI协作经验比简历上写“熟悉AI编程”有价值得多。5. 工程化、安全与性能区分“熟手”和“熟练工”的分水岭基础题考察的是JS功底框架题考察的是技术深度而工程化、安全、性能这三块面试官用来判断你是“能独立扛事的人”还是“只会接需求写页面的人”。这部分题出现的频率不像前几类那么恒定但只要有那么一两道答不上来的话前面积累的好感会大打折扣。5.1 构建工具webpack和vite的分水岭Vite现在明显是主流了但面试官依然喜欢问webpack因为webpack的机制能暴露你对打包的理解。我遇到的最高频提问是loader和plugin的区别是什么tree-shaking的原理是什么怎么优化构建速度loader和plugin的区别最直接的理解是loader负责转换文件内容把less变成css把ts变成jsplugin负责参与打包流程本身在特定生命周期里做事情。一个是文件级别加工一个是流程级别控制。tree-shaking的原理是ESModule的静态结构——import和export在编译期就能确定所以才能分析出哪些导出没有被使用然后在压缩阶段删除。这也就解释了为什么CommonJS做不了tree-shaking因为require是运行时动态的编译器根本不知道你会不会用到某个模块。5.2 浏览器缓存和前端性能从指标到落地的全套路径前端性能优化的考点已经从“雅虎35条”进化到“以指标为中心”。我在面试中遇到的高频问题有两类一类是“首屏性能怎么做”另一类是“怎么定位线上性能问题”。首屏性能的核心链路我一般这样回答接入端DNS预解析、HTTP2、资源预加载静态资源CDN分发、强缓存协商缓存、gzip或br压缩代码层面路由懒加载、组件按需加载、骨架屏图片层面WebP、响应式图片、懒加载监控层面Performance API收集FP、FCP、LCP指标。如果被追问“怎么定位性能问题”就讲Performance面板的调用栈分析、Lighthouse报告、以及Web Vitals的线上数据看板。能说清楚“FCP慢要看服务端响应LCP慢要看资源加载优先级”这种诊断思路面试官就已经比较满意了。5.3 前端安全XSS和CSRF必须能画出示意图前端安全这几年的出镜率明显提升。XSS和CSRF是最常考的两个点。XSS的核心是“攻击者往页面里插入可执行脚本”。存储型发生在数据进数据库时、反射型发生在URL参数拼接进DOM时、DOM型发生在js直接操作DOM时。防御手段分别是输出端编码、过滤危险字符、CSP限制脚本来源。CSRF的核心是“攻击者借用用户的登录态发起跨站请求”。面试时最好能画一个简单的流程图用户登录信任网站A获得cookie此时访问恶意网站BB向A发请求浏览器自动带上A的cookie所以A以为是用户本人操作。防御手段有同源检测、加CSRF token、设置SameSite属性。我遇到过面试官追一句“httpOnly能防XSS吗”这个问题的坑在于很