做了这么多年前端面试过别人也被别人面试过我得说前端面试题其实是有规律可循的。很多人一到面试就紧张疯狂背题结果面试官换个问法就当场卡壳。这篇总结是我自己整理前端面试题时的核心笔记也是我带团队时实际会考察的点。我不打算给你列一个几千题的题库然后让你背那样没意义。我更想帮你把前端面试这件事看透面试官到底在考什么为什么考你怎么答才能既显得有深度又不至于飘。先说结论前端面试题表面考的是知识点实际考的是两件事第一件事是你有没有真正写过代码、踩过坑第二件事是你有没有把知其然升级到知其所以然的能力。很多候选人是被自己坑死的——背答案的时候背的是结论面试官追问一句为什么就露馅了。所以这篇文章里每一个高频考点我都会给出题逻辑、标准答法、追问方向三件套你照着这个思路去准备比闷头刷一百道题管用得多。1. 前端面试到底在考什么先把底层逻辑捋清楚1.1 面试题背后的三层能力模型我观察了这几年招聘市场上前端岗位的面试题变化发现一个很明显的事实八股文的比重在下降场景题的比重在上升。以前面试爱问数组去重有几种方法现在更爱问你项目里有个表格渲染一万行数据会卡怎么处理。背后的逻辑是单纯的知识点背诵已经无法区分候选人水平了面试官需要的是通过问题看你解决问题的能力。所以我把前端面试题拆成三层能力模型来准备第一层是基础功底包括JavaScript语言特性、浏览器工作原理、网络协议、CSS布局与渲染。这一层考的是你写代码的内功决定你能否在这个行业长期走下去。很多干了三五年的人栽在这一层就是因为平时写业务代码太顺了从来不深究底层。第二层是框架与工程能力包括Vue、React等框架的核心原理、组件通信方案、构建工具配置、代码规范与协作。这一层考的是你能不能在一个真实团队里高效产出能不能把项目的技术架构理顺而不是只会照着文档抄代码。第三层是架构与业务思维包括性能优化、跨端方案选型、微前端拆分、低代码设计、大文件上传这类复杂场景。这一层主要出现在中高级岗位的面试里考的是你有没有全局视野能不能在资源受限的情况下做出合理的技术判断。1.2 不同级别岗位的考察侧重点初级岗位、中级岗位和高级岗位面试题的重心差异非常大我用一张表说明你对照自己的目标岗位去准备就行级别核心考察点典型题型准备重点初级1-3年语言基础、API熟练度数组方法、闭包、事件循环、CSS居中手写代码要熟练原理能讲清七成中级3-5年框架原理、工程化、性能Vue/React响应式原理、组件设计、打包优化源码阅读痕迹、项目难点复盘高级5年以上架构设计、团队效能、业务落地微前端方案、低代码引擎、复杂状态管理方案对比能力、落地数据、踩坑复盘这里我想多说一句很多人准备面试时喜欢以题备考把网上流传的几百道题刷完就觉得稳了。但实际上面试官问什么取决于你简历里写了什么。你简历里写精通Vue那面试官一定往深了问Vue的响应式原理和diff过程你写负责过性能优化那面试官一定追问具体的优化指标和收益数据。所以第一步不是刷题而是把简历里的每一个技术点都变成一道可以深挖的面试题先自问自答一轮。2. JavaScript核心必考点这些题绕不过去2.1 原型链与闭包面试官最爱问的送命题JavaScript的原型链和闭包基本上是所有前端面试题里出场率最高的两个概念。说它们是送命题是因为很多人觉得自己懂了但一开口就暴露了理解深度。我面试时经常这么问你讲讲原型链是什么以及它和new之间有什么关系很多人的回答是原型链就是对象之间通过__proto__链接起来的链条然后就没有然后了。这种答案我只能给及格分。真正好的回答应该包含这几个层次首先说清楚每个对象都有一个__proto__属性指向构造函数的prototype对象其次说明当访问对象属性时如果自身没有就沿着__proto__链向上找直到Object.prototype再往上就是null最后要能说出new一个构造函数时发生了什么——创建一个新对象、把this绑定到新对象、把新对象的__proto__指向构造函数的prototype、如果构造函数没有显式返回对象则返回this。同样的道理闭包也是。闭包的定义其实就一句话函数在定义时的词法作用域之外被执行仍然能访问定义时的作用域变量。但面试官真正想听的是你能不能用闭包解决实际问题比如用闭包实现私有变量、实现函数防抖节流、实现单例模式。我建议你准备两三个闭包的实战场景面试时直接抛出来既展示理解深度又展示实战经验。2.2 this指向、作用域与执行上下文this指向问题是JavaScript面试题里翻车率最高的没有之一。核心原因在于this的指向在函数调用时才能确定而不是定义时。我总结了一个简单的判断口诀默认绑定看是否严格模式隐式绑定看调用对象显式绑定看call/apply/bindnew绑定优先级最高。举个例子下面这段代码很多人会答错var name window var obj { name: obj, getName: function() { return function() { return this.name } } } console.log(obj.getName()())答案是window。因为obj.getName()返回的是一个普通函数这个函数调用时没有调用对象属于默认绑定在非严格模式下this指向全局对象。如果把内部函数改成箭头函数结果就变成obj因为箭头函数没有自己的this它会继承外层作用域的this。我建议你把call、apply、bind三兄弟的区别也一起准备了call和apply都是立即执行区别只在传参方式call是逐个传参apply是数组传参bind是返回一个新函数不会立即执行而且bind返回的函数可以被new调用这时候new会覆盖bind的this绑定。面试官经常用bind和new的优先级来出题记住new绑定优先级高于显式绑定就行了。2.3 异步编程与事件循环机制事件循环Event Loop是前端面试题中最能拉开差距的知识点之一因为它考察的是你对JavaScript运行时机制的整体理解。面试官常问说说浏览器的事件循环机制宏任务和微任务的区别是什么标准的回答框架是这么展开的JavaScript是单线程语言所有同步任务都在主线程执行遇到异步任务就交给浏览器其他线程处理。事件循环的每一轮先执行一个宏任务然后执行所有微任务微任务执行完后可能触发UI渲染然后再取下一个宏任务。宏任务包括script整体代码、setTimeout、setInterval、I/O操作、UI交互事件微任务包括Promise的then回调、MutationObserver、queueMicrotask。面试官一定会让你分析一段代码的输出顺序比如console.log(1) setTimeout(() console.log(2), 0) Promise.resolve().then(() console.log(3)) console.log(4)输出顺序是1、4、3、2。第一轮宏任务执行同步代码输出1和4然后清空微任务队列输出3最后执行setTimeout回调输出2。这里有个细节容易被忽略setTimeout的0毫秒不是立刻执行而是至少等待当前轮宏任务及所有微任务执行完毕而且浏览器对嵌套setTimeout有4毫秒的最小时延限制。2.4 手写代码题怎么答才能让面试官眼前一亮手写题是前端面试题里最考验基本功的环节。我遇到过的常见手写题包括手写Promise、手写防抖节流、手写深拷贝、手写数组去重、手写发布订阅。我的建议是不要死记硬背答案而是掌握每种题型的考点内核。以手写深拷贝为例考察的核心是是否了解基本类型和引用类型的区别、是否考虑循环引用、是否考虑特殊对象Date、RegExp、Map、Set。一个加分写法是这样的function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target if (map.has(target)) return map.get(target) const clone Array.isArray(target) ? [] : {} map.set(target, clone) if (target instanceof Date) return new Date(target) if (target instanceof RegExp) return new RegExp(target) for (const key in target) { if (target.hasOwnProperty(key)) { clone[key] deepClone(target[key], map) } } return clone }用WeakMap处理循环引用的这个点就是区分普通候选人和优秀候选人的分水岭。面试时手写代码我建议你一边写一边小声说思路让面试官看到你的思考过程哪怕最终有小bug只要思路方向对分数也不会低。3. 框架与工程化从会用到懂原理3.1 Vue高频面试题响应式原理和diff策略Vue是很多国内团队的主力框架前端面试题里Vue的占比相当高。最核心的问题是响应式原理。Vue 2用的是Object.defineProperty对对象的属性进行劫持Vue 3改用Proxy代理整个对象。两者的区别要能讲透defineProperty只能劫持已有属性新增属性需要Vue.set来处理Proxy可以直接监听对象属性的新增和删除还能监听数组索引和length的变化。Vue 2的响应式流程要背熟initData时通过Object.defineProperty给data的每个属性添加getter和settergetter里做依赖收集Dep收集Watchersetter里触发更新通知所有依赖的Watcher执行update。每个组件渲染时创建一个Watcher组件内的模板编译成render函数render函数执行时访问data属性触发getter完成依赖收集。数据变化时setter触发Watcher更新重新执行render函数生成新的虚拟DOM然后与旧的虚拟DOM做diff最后更新真实DOM。关于虚拟DOM的diff策略Vue采用了同层比较不会跨层级比较。具体过程是新旧VNode比较时先判断key是否相同如果key不同直接替换如果key相同继续比较标签名和props子节点数组比较时Vue 2使用双端比较算法从新旧子节点的头尾四个指针开始对比尽量复用节点。Vue 3在此基础上引入了patchFlag针对动态节点做了更细粒度的优化编译时标记哪些节点是动态的更新时只处理被标记的部分这也是Vue 3性能提升的原因之一。3.2 React高频面试题组件渲染调度与Hooks基础React的面试题核心集中在几个方面虚拟DOM和Fiber架构、Hooks原理、组件通信方案。Fiber架构的核心思想是把不可中断的递归渲染拆分成可中断的链表遍历。每个Fiber节点对应一个组件实例信息通过child、sibling、return指针连接成树。渲染过程分为render阶段和commit阶段render阶段可以被打断commit阶段不可中断。Hooks是React面试题的重灾区。我最常问的是useEffect和useLayoutEffect的区别是什么useEffect是异步执行的不会阻塞浏览器绘制useLayoutEffect是同步执行的会在DOM变更后、浏览器绘制前执行如果你在useLayoutEffect里修改了状态浏览器会在同一帧内重新绘制所以视觉上不会闪烁。还有一个高频追问为什么Hooks不能写在条件语句里因为React是依靠Hooks的调用顺序来关联状态的如果某次渲染时某个Hooks没有被调用后面的Hooks顺序就会错位导致状态错乱。组件通信方案这块要能说清楚几种方式的适用场景props传递适合父子组件ref调用子组件方法适合需要命令式操作的场景Context适合跨层级共享全局状态Redux/Zustand适合复杂状态管理自定义事件总线适合模块间解耦。面试官如果问你Context和Redux怎么选核心答案不是哪个好而是Context适合低频更新Redux适合有复杂逻辑和中间件需求的场景。3.3 组件库、微前端与前端SDK的面试新考点最近几年的前端面试题里组件库、微前端和前端SDK相关的问题明显增多了。这不是偶然而是行业发展到一定阶段的必然结果——业务复杂度上来了团队协作模式变了面试自然要跟上。组件库的常见问题是如果让你设计一个组件库的按需加载方案你会怎么做标准答案是借助babel-plugin-import一类工具在编译阶段把引入语句转换成按需路径配合ES Module的tree-shaking。更深一层会问样式按需加载怎么做答案是样式文件独立打包通过组件的sideEffects标记来配合tree-shaking或者直接用CSS-in-JS方案。微前端的问题一般围绕qiankun展开考察点包括JS沙箱是怎么实现的Proxy代理window监听属性访问和修改、样式隔离怎么做shadow DOM或者样式前缀、应用间通信方案globalState或者props。你要能说出微前端的适用边界——如果团队只有两三个人一个应用几百个页面硬上微前端只会增加维护成本。前端SDK的问题平时容易被忽略但这两年越来越常见因为很多公司开始做开放平台或工具产品。核心考点是SDK的打包格式UMD、ES Module、版本兼容策略、如何做SDK的灰度发布、错误监控与上报怎么做。我在实际项目里踩过一个坑SDK的版本号变更没有考虑缓存策略导致老版本用户拉不到新代码联调时排查了很久。后来统一在发布流程里加了版本号校验和最小版本强制升级机制才算彻底解决。4. 浏览器、网络与安全前端面试的硬骨头4.1 从输入URL到页面渲染这一题能把基础能力问穿从浏览器地址栏输入URL到页面渲染完成中间发生了什么这道题堪称前端面试题里的综合大题因为它考察的是整个知识体系的串联能力。一个完整的回答要覆盖六个阶段。DNS解析阶段要提到DNS解析的层级查找过程浏览器缓存、系统缓存、路由器缓存、本地DNS服务器、根DNS服务器逐级向上。然后是TCP连接要能说出三次握手的过程和为什么是三次而不是两次——因为三次握手能确认双方的收发能力都正常。接着是HTTP请求要说明请求头里的关键字段比如Cache-Control、If-Modified-Since。然后是浏览器解析HTML构建DOM树、解析CSS构建CSSOM树两者合并成渲染树。再往下是布局和绘制。面试官喜欢在这一题后面追问为什么CSS放在head里、JS放在body末尾答案是因为CSS会阻塞渲染放在head里可以让样式尽早加载避免白屏JS会阻塞DOM解析放在末尾可以避免阻塞。如果你能多说一句现代浏览器对脚本引入了defer和async属性可以改变加载和执行的时机面试官会对你另眼相看。4.2 浏览器缓存机制强缓存与协商缓存的完整对比浏览器缓存是网络相关面试题里最常考的也是实际开发中排查问题最常用的知识。核心是两类缓存强缓存和协商缓存。强缓存直接读本地缓存不发请求由Expires和Cache-Control控制协商缓存需要向服务器发请求确认由Last-Modified/If-Modified-Since和ETag/If-None-Match控制。我用一张表把两者的差异列出来对比维度强缓存协商缓存是否发请求否是控制头Cache-Control、ExpiresLast-Modified、ETag生效条件缓存未过期服务器判断资源是否变化返回状态码200from cache304这里有个容易踩的坑Expires是绝对时间依赖客户端时间校准如果用户改了系统时间缓存就失效了。所以现在推荐都用Cache-Control的max-age相对时间。还有一个是ETag和Last-Modified的优先级ETag优先因为Last-Modified只能精确到秒级如果资源在1秒内被修改多次Last-Modified就判断不出来了。面试官如果问你缓存更新的策略你可以提文件名指纹法——打包时给文件名加上内容hash内容变了文件名就变配合Cache-Control: max-age31536000既能强缓存又能保证更新。4.3 前端安全XSS、CSRF怎么防安全相关的前端面试题这两年的比重明显上升可能跟行业里安全事件频发有关。最常问的是XSS和CSRF。XSS跨站脚本攻击的核心原理是攻击者往页面里注入恶意脚本偷取用户数据。防御手段主要有输入过滤对用户的输入做白名单校验、输出编码把HTML特殊字符转义、设置Cookie的HttpOnly属性防止脚本读取、使用CSP内容安全策略限制脚本来源。CSRF跨站请求伪造的核心原理是攻击者诱导用户在已登录的网站上执行非本意的操作。防御手段主要是校验Referer字段、使用CSRF Token服务端生成随机token表单提交时带上服务端校验、同源检测、设置SameSite属性。这里我要补充一个容易被忽略的点前端验证码输入框组件、登录表单这类交互本身就是安全设计的一部分。面试时如果被问到登录功能怎么做才安全不要只说加密和token要能说出验证码的作用是防暴力破解和防自动化攻击还要提到登录态存储的安全性——localStorage存token有被XSS读取的风险更稳妥的方案是存HttpOnly Cookie或者用内存存储配合刷新机制。5. 性能优化与场景实战题不会答这个就谈不上资深5.1 性能指标与优化手段从指标到落地的完整链路性能优化是前端面试题里拉开中高级差距的关键板块。面试官不会满足于你说压缩图片、开启Gzip、代码分割这种零散的点他要看到你有完整的优化思路。我的建议是掌握一套从检测指标到定位问题再到实施优化的闭环方法。首屏加载的核心指标有几个FPFirst Paint首次绘制、LCPLargest Contentful Paint最大内容绘制、FIDFirst Input Delay首次输入延迟、CLSCumulative Layout Shift累计布局偏移。面试时随口说出这几个指标的英文全称和含义就已经赢了一半。然后是优化手段的归类加载层面资源压缩、CDN加速、HTTP缓存、懒加载、预加载preload/prefetch都属于这一类。渲染层面减少DOM层级、避免强制同步布局、使用requestAnimationFrame批量更新样式、长列表用虚拟滚动。代码层面路由懒加载、组件按需引入、第三方库按需加载、合理拆分chunk。缓存层面利用浏览器的HTTP缓存、Service Worker做离线缓存和资源预取。虚拟滚动这个点我想多说一句。表格渲染一万行数据会卡核心原因是DOM节点太多重排重绘成本高。虚拟滚动的思路是只渲染可视区域内的节点通过估算每行高度和滚动位置动态计算需要渲染的节点范围配合绝对定位和padding占位来模拟完整列表的高度。这是一个高频场景题我建议你亲手实现一遍面试时能画出结构草图会非常加分。5.2 大文件上传与实时交互场景题场景题是近年前端面试题里的新宠因为面试官发现背知识点的候选人太多只有给一个具体场景才能试探出真实水平。高频场景题包括大文件上传、WebSocket实现实时通信、前端防止爬虫、强制刷新版本等。大文件上传的场景题核心考点是分片上传和断点续传。思路是前端把大文件用Blob.slice切成多个分片每个分片单独上传后端按顺序组装。上传前先请求接口获取已上传的分片信息实现断点续传。并行上传时控制并发数避免一下子发几十个请求把服务器压垮。秒传的实现方式是上传前计算文件的hash值服务端判断这个hash是否已经存在存在就直接返回上传成功不用真的传文件。计算hash时用增量计算的方式避免大文件卡死主线程。这个场景还有一个可以主动说的加分项用Worker来算hash或处理文件避免阻塞主线程。我在实际项目里就用过Worker处理大文件的分片和hash计算一个2GB的文件主线程完全无感。实时交互的场景题核心是WebSocket的用法和坑。要能说清楚WebSocket和HTTP的区别HTTP是请求-响应模式服务端不能主动推送WebSocket是全双工通信服务端可以主动推送。实际开发中要注意心跳机制——WebSocket连接长时间空闲会被中间设备断开所以需要定时发送心跳包保持连接断线后要自动重连重连要加指数退避策略。5.3 跨端方案与uniapp相关考点跨端开发在前端面试题里的出现频率也在上升尤其是直播H5、小程序、App内嵌H5这些场景。这跟行业现状有关现在很多业务都是多端投放前端要能一套代码搞定web、小程序、App。面试常见问题是为什么选uniapp而不是原生微信小程序或者uniapp的优缺点是什么。uniapp的核心价值是跨端复用一套Vue语法代码可以编译到H5、小程序、App等多个平台开发效率高适合业务快速迭代的场景。但它的代价是性能有折损因为多了一层编译和运行时适配。面试官如果问小程序和H5的区别你要能说出小程序有双线程模型逻辑层和视图层分离通过setData通信性能受限于setData的数据量所以写小程序要注意避免频繁大对象setData。直播H5的面试题一般围绕播放方案做文章HLS直播延时高但兼容性好HTTP-FLV延时低但需要代理WebRTC延时最低适合互动场景。如果面试官问直播的弹幕怎么实现不卡答案是弹幕走WebSocket或者独立的HTTP长轮询通道渲染时用canvas而不是DOM因为DOM节点的频繁创建和销毁会卡死页面。6. 前端面试题常见问题与排查技巧实录6.1 高频面试题速查表与参考答法我把自己实际面试中问过的、以及被问过的高频题整理成一份速查表每一道都标注了考察意图和关键踩分点。你准备的时候不要背答案而是要看着题目在脑子里过一遍我会怎么答、追问怎么接。面试题考察意图关键踩分点说说你对闭包的理解语言基础、作用域链定义特征应用场景内存风险Vue的v-if和v-show区别框架基础、渲染机制是否销毁/重建、display切换、重排成本数组扁平化怎么实现编码能力、递归与迭代reduce、flat、手写递归、去重结合路由的hash模式和history模式区别工程能力、浏览器APIhash变化不触发刷新、history需要后端配合什么是tree-shaking工程化、打包原理ES Module静态分析、副作用标记如何排查页面白屏实战能力、问题定位阶段划分DNS→请求→解析→渲染→JS报错前端怎么做灰度发布架构能力、发布流程路由维度、版本控制、AB测试、回滚方案这张表里的题我建议你每周自己模拟一轮拿个录音软件录下来自己的回答回放时你会发现很多平时注意不到的口头禅和逻辑漏洞。我当年是这么练的效果比只写不说了好太多。6.2 面试现场的高频失误与避坑心得面试现场有些错误是非常可惜的明明会却答砸了。我总结了几个高频失误你对照着避坑。第一个失误是只答结论不答过程。面试官问为什么Vue 3用Proxy替代defineProperty你只回答性能更好四个字就结束了。正确的做法是把为什么好讲出来defineProperty只能劫持已有属性对新增属性无能为力每次只能劫持一个属性遍历对象属性时性能差无法劫持数组的索引变化。三个理由摆出来面试官马上就知道你读过源码。第二个失误是不懂装懂被追问就崩。面试官问到一个你没听过的名词比如你知道React的Concurrent Mode吗你硬着头皮说知道结果一问细节就露馅了。我的建议是面试中遇到不熟悉的知识点坦诚说这块我了解得不多但我对相关的XX比较熟然后把话题引向自己熟悉的领域。诚实加引导比硬撑体面得多。第三个失误是准备了很多但没展示出来。面试官问说说你做过的最复杂的项目很多人就开始流水账式地讲业务功能讲了五分钟面试官还是不知道你的技术亮点在哪。正确做法是套用STAR法则讲清背景Situation、任务Task、行动Action、结果Result重点放在你用了什么技术方案、解决了什么难点、带来了什么收益。不要说我用了一个组件库要说业务需要一套千人同时在线的编辑协作功能我调研了主流的OT算法和CRDT方案最终选了XX方案把编辑冲突率从X%降到了Y%。6.3 从面试失败到offer的复盘方法最后分享一个我自己的复盘方法这个方法帮我从一个面试连续被拒的状态走出来也帮团队里好几个年轻同事拿到了心仪的offer。面试结束后的24小时内趁记忆还新鲜立刻做一次结构化复盘记录三件事哪些问题是我完全没答上来的、哪些问题是我答了但被面试官追问后卡住的、哪些问题是我觉得答得很好但事后发现理解有误的。每一类问题都要追查根因。完全没答上来的通常不是知识盲区而是准备时的我以为会了。答了但被追问卡住的大概率是只背了结论没理解推导过程。事后发现理解有误的往往是平时写代码时用了错误姿势但没意识到。追着这三个根因去补每次面试你都比上一次更进一步而不是一次次重复同样的失败。说到底前端面试题只是职业生涯中的一个关卡。真正值钱的是你通过准备面试把知识体系重新梳理了一遍把那些能用但说不清的技术点弄得明明白白。这个梳理的过程比你拿到的offer还珍贵。祝你在面试路上少踩坑多拿满意的结果。