1. 前端面经的价值不只是背题而是建立面试思维这两年前端岗位的竞争强度经历过的人都懂。一个普通岗位收到的简历动辄几百份面试轮次从两轮加到四轮甚至五轮考察范围也从单纯的JavaScript、CSS扩展到框架原理、工程化、性能优化、算法、软技能全覆盖。我见过太多基础不错的朋友倒在面试环节不是能力不行而是根本不了解面试官想听什么回答问题抓不住重点。这份面经汇总不是把网上流传的题目复制粘贴一遍而是按照面试的逻辑重新梳理一遍前端知识体系。每个考点都会说明“面试官为什么问这道题”“回答到哪个深度算过关”“哪些追问最容易翻车”。无论你是准备春招秋招的应届生还是打算跳槽的进阶开发者按照这份清单系统过一遍比盲目刷几十套题效率高得多。前端面试有两个明显的趋势一是深度越来越深早年问“什么是闭包”就能过关现在会追问闭包的内存模型、与垃圾回收的关系、实际项目里哪些场景用到了闭包二是广度越来越广微前端、WebAssembly、AI辅助开发、跨端方案都会出现在面试里。应对这种变化唯一的办法是把知识体系化而不是零散地记结论。我在整理这份面经时把所有考点分成了六个大块底层逻辑、JavaScript核心、框架与工程化、浏览器与性能、手写题与算法、简历与面试技巧。每一块都会结合真实面试场景展开标注出最高频的追问方向也会分享我自己作为面试官筛选候选人的真实标准。这些内容不一定能保证你拿到offer但至少能让你在面试时不被问懵回答问题有章法。2. 面试官在想什么前端面试的底层逻辑与准备策略2.1 面试官考察的四个核心维度很多人以为面试官是在考知识点其实知识点只是载体。围绕“前端面经”这个主题我把面试官的考察意图拆解成四个维度想清楚了这四个维度你准备面试的方向就不会跑偏。第一是基础扎实度。JavaScript的语言特性、浏览器的渲染机制、HTTP协议的常见细节、CSS的布局原理这些属于内功决定一个开发者的上限。面试官会通过基础题快速判断你是否有完整的知识体系而不是只会调框架API。第二是项目深度。项目经历是简历上最容易被注水的部分所以面试官会不断追问细节为什么选这个方案、遇到什么坑、怎么排查的、性能数据是多少、有没有对比其他方案。问得越细越能看出哪些是你真做的哪些是你背的。第三是工程化思维。现在的业务开发已经不是写页面那么简单了代码规范、组件复用、构建优化、监控告警、CI/CD这些都是面试官关注的点。一个只会写业务代码的候选人在高级岗位的面试中很难过关。第四是沟通与学习能力。面试官会故意问一些你不太熟悉的方向观察你的反应。是坦诚说不了解然后尝试分析还是支支吾吾硬编答案这决定了面试官对你的整体印象。记住一句话面试官不怕你说不会怕的是你不会还装懂。2.2 “八股文”的正确打开方式前端圈经常把面试题叫做“八股文”带着贬义。但我的看法是如果你只是背诵结论八股文确实没有意义但如果你把每个结论背后的原理搞清楚八股文就是你建立知识体系的地图。关键在于怎么从“背答案”切换到“讲原理”。以“浏览器从输入URL到页面渲染发生了什么”这道经典题为例。初级回答是背出“DNS解析、TCP连接、HTTP请求、渲染”这几个关键词。中级回答是补充每个阶段的具体过程比如DNS解析有本地缓存、递归查询、迭代查询TCP连接有三次握手和四次挥手。高级回答则是能讲清楚关键细节TCP慢启动对资源加载的影响、HTTP/2的多路复用解决了什么问题、渲染过程中CSSOM和DOM的构建顺序、JavaScript的加载为什么会阻塞渲染、async和defer的区别。所以我在准备面经时有个习惯每道题都会问自己三个问题——它的底层原理是什么、它在实际项目里对应什么场景、如果我再深入一层面试官会问什么。用这个方法过题一道题能带出一整片知识网络。比如闭包这道题底层是作用域链和词法作用域实际场景是防抖节流、模块化封装、React Hooks的闭包陷阱再深入一层就是内存泄漏和垃圾回收机制。2.3 2-3周速成准备的时间规划如果你离面试还有2到3周时间紧但也不是不可能。我建议把时间分成三个周期每个周期有明确的目标避免东一榔头西一棒子。第一周以JavaScript和浏览器为核心这是最高频也是性价比最高的考点。花3到4天过一遍JavaScript核心知识点闭包、作用域、原型链、this指向、异步编程、事件循环、ES6新特性配合刷题巩固。再花2到3天过浏览器相关的内容渲染机制、缓存、存储、跨域、性能优化。这两块占面试总题量的40%以上值得投入最多精力。第二周主攻框架和工程化。如果你用React重点准备Fiber架构、Hooks原理、状态管理方案、React 18的并发特性。用Vue就重点准备响应式原理、diff算法、Vue 3的Composition API。工程化方面至少要知道Webpack和Vite的核心原理与差异常用的Loader和PluginTree Shaking的原理。这一周是拉开差距的关键因为基础和算法大家都会准备框架深度才是区分度所在。第三周是手写题、算法和模拟面试。手写题每天练3到5个高频题目防抖节流、深拷贝、手写Promise、柯里化、数组去重、发布订阅。算法题以LeetCode热门题为主重点练字符串处理、数组操作、链表、二叉树、动态规划入门。最后务必做至少两次全真模拟面试可以找朋友互相问也可以对着录屏自己复盘主要练表达节奏和抗压能力。3. JavaScript核心考点从变量提升到事件循环3.1 闭包、作用域链与内存泄漏闭包是前端面试里出场率最高的问题也是追问最深的点。最基础的问题是“什么是闭包”大部分人都能答上来函数嵌套函数内部函数引用了外部函数的变量就形成了闭包。但面试官很少在这么浅的层面停下来他一定会向上抛两个问题闭包的底层原理是什么以及闭包会导致什么问题。底层原理是词法作用域和作用域链。JavaScript的函数在定义时就确定了作用域链内部函数保存了对外部函数变量对象的引用所以即使外部函数执行完毕内部函数依然能访问它的变量。这个机制的本质是函数对象持有了作用域链的引用导致外部函数的变量对象无法被垃圾回收。关于内存泄漏要分清两种情况。合理使用闭包不会导致内存泄漏只有闭包中引用了不再需要的大对象或者闭包被意外挂到全局引用上才会造成内存无法释放。我面试时喜欢出一个场景题有一个列表组件每行绑定了一个点击事件点击后需要访问该行数据现在长列表频繁刷新问内存会不会越来越大。这个问题的核心就是考察候选人能不能想到用事件委托替代每行独立闭包以及如何手动解除不再使用的闭包引用。实际项目里闭包最常用的场景是封装私有变量比如实现一个计数器或缓存模块还有防抖节流这类需要保存定时器状态的场景React Hooks里的useState也是靠闭包实现的。回答闭包题时最好主动把这些场景说出来面试官会认为你不仅懂原理还能在实际开发中运用。3.2 事件循环与异步编程的追问链事件循环是JavaScript面试的分水岭也是很多人背了答案却依然翻车的地方。最常见的题是“说一段代码的输出顺序”比如setTimeout、Promise、async/await混在一起让你预测执行结果。这类题的背后是宏任务、微任务、调用栈之间的关系。完整的回答框架是先说明JavaScript是单线程的所有异步任务通过事件循环调度。同步代码立即执行遇到异步API就把回调挂到对应的任务队列里。执行完当前宏任务后会清空所有微任务然后再取下一个宏任务执行。Promise的回调属于微任务setTimeout和事件回调属于宏任务requestAnimationFrame有自己独立的调度时机。async/await的实质是Promise的语法糖await会暂停当前函数执行把后续代码包成一个微任务。面试官经常会加一个追问如果setTimeout设成0是不是立即执行。答案是设成0也有至少1ms的延迟而且即使不考虑延迟它也要等主线程当前任务和微任务队列全部清空后才会执行。再往后追问还有Node.js的事件循环和浏览器有什么不同process.nextTick的执行时机setImmediate和setTimeout的顺序问题。准备时要覆盖到这里因为很多大厂面试官就喜欢从这个方向深挖。异步编程的另一个高频方向是Promise的各种方法和错误处理机制。Promise.all、Promise.race、Promise.allSettled、Promise.any的区别要背熟尤其要会对应到实际场景并发请求用Promise.all、竞态请求用Promise.race、部分失败也要拿到结果就用Promise.allSettled。手写Promise也是必练的题目能手写出来说明你真的理解了它的状态机和then链的透传机制。3.3 this指向、箭头函数与绑定规则this指向问题在JavaScript面试中经久不衰因为很多前端开发写了好几年代码也没搞明白this到底怎么确定。其实规律就几句话默认绑定非严格模式下指向全局对象严格模式为undefined、隐式绑定作为对象方法调用时指向对象、显式绑定call、apply、bind指向传入的第一个参数、new绑定指向新创建的对象。优先级上new绑定最高显式绑定其次隐式绑定再次默认绑定最低。箭头函数不绑定this它的this继承自外层词法作用域。这个特性在实际中有两个典型应用一是在React类组件中避免事件处理函数的this丢失二是在setTimeout或Promise回调中保留外层this。但要注意正因为箭头函数没有自己的this它也不能作为构造函数不能使用arguments对象。面试中常见的一个深坑是连续链式调用obj.method1().method2()的this指向什么。另外还有隐式丢失的问题——把对象的方法赋值给一个变量再调用this会变成undefined或全局对象。想要拿高分的回答除了背规则还要解释清楚本质this的指向是在函数调用时确定的而不是在定义时确定的箭头函数除外。3.4 原型链与继承的多种实现方式原型链是新手最头疼的内容也是面试必考题。核心概念包括原型对象、constructor属性、__proto__与prototype的区别、instanceof的原理。经典题目是画出一个对象如何沿着原型链找到Object.prototype上的方法以及为什么每个对象都能调用toString()。继承的考察通常从es5的几种方案展开原型链继承、构造函数继承、组合继承、寄生组合继承然后过渡到ES6的class extends方案。重点要理解class本质上是语法糖底层依然是原型链和构造函数。还要知道extends的实现原理也就是寄生组合继承的思路——子类构造函数的原型指向父类构造函数的实例同时把constructor指回子类。追问的方向大概率是两个一个是原型链的修改对既有实例的影响比如在Object.prototype上挂一个方法所有对象马上就能访问到另一个是class和function构造函数的差异比如class不能直接调用、class内部默认严格模式、class的方法不可枚举。准备继承这部分内容时最好自己动手把几种继承方式都写一遍写到能默写的程度面试时手写代码才不会卡壳。4. 框架与工程化React、Vue和构建工具的面试重难点4.1 React高频考点Fiber、Hooks与渲染机制React的面试深度在逐年上升已经不只是问生命周期和setState了。现在的主流追问路径是从虚拟DOM入手问它解决了什么问题再到diff算法怎么优化最后落到Fiber架构为什么要把渲染拆成可中断的单元。虚拟DOM最基础的问题很好回答用JavaScript对象描述UI结构通过对比新旧对象的差异来最小化DOM操作。但追问马上就来如果直接操作DOM可能更快虚拟DOM的价值到底在哪。答案的核心在于跨平台能力——除了浏览器还能渲染到Native声明式开发的代价平衡——开发者不需要手写命令式DOM操作框架通过批量diff来对冲操作开销。更资深一点的回答会提到虚拟DOM让React得以实现并发特性因为Fiber需要在内存中保存可中断的渲染状态。React 18之后并发特性是必然考点。useTransition、useDeferredValue、startTransition这些API要能说出使用场景长列表筛选、搜索框联想、大组件切换渲染这些场景下用并发特性可以避免阻塞用户输入。Hooks原理也是高频考点useState怎么通过闭包保存状态、useEffect的依赖追踪机制为什么会有闭包陷阱、useMemo和useCallback在什么情况下真的有用。这些我建议不要只背结论自己动手写一个简化版的useState和useEffect理解会深很多。状态管理和数据流也是React面试逃不开的话题。Redux的核心概念包含store、reducer、action、dispatch面试时最好能画一遍单向数据流。现在更常被问到的是Redux Toolkit和React Query这类现代的方案以及Context在高频更新场景下的性能问题。回答这类问题要结合项目经验什么场景适合用Redux、什么场景用zustand或Context就够了、服务端状态为什么应该交给React Query。4.2 Vue高频考点响应式原理与diff算法Vue的核心考点和React差异很大最有代表性的就是响应式原理。Vue 2的Object.defineProperty和Vue 3的Proxy的对比是必答题前者只能拦截对象属性的读写新增或删除属性需要特殊API后者可以代理整个对象支持新增删除和数组索引操作而且性能更好。Watch、Computed的底层实现也依赖响应式系统要能说清楚Computed为什么有缓存、依赖收集是怎么触发的。Vue的diff算法同样是高频题关键是理解同层比较、双端指针、key的作用。特别要能解释清楚key的重要性复用元素时如果不加key或者用index当key在列表头部插入元素时会导致状态错乱的bug因为Diff算法只能依赖key判断节点是否是同一个。深入一点还要知道Vue 3在diff上的优化比如静态标记和patchFlag可以让更新跳过静态节点。Vue 3的Composition API是现在的主流考点。setup函数、ref和reactive的区别、computed和watch的新用法、生命周期钩子怎么改成了onMounted这种函数式写法。面试官常问Composition API到底解决了什么问题Standard答案是更好的逻辑复用和组织代码替代了Vue 2时代混入mixin带来的命名冲突和来源不清。要拿高分的话最好再补充一个真实案例自己的项目里如何把一个复杂的业务逻辑从options API重构为composition API代码从多少行简化为多少行。4.3 微前端、组件库与工程化面试题微前端在企业级项目中越来越普遍面试出镜率也直线上升。核心考察点是为什么要用微前端——多个团队独立开发部署、技术栈异构、老项目渐进式迁移。常见的实现方案包括single-spa的注册表模式、qiankun基于single-spa的封装、还有iframe方案的优缺点对比。面试官通常会追问沙箱隔离的实现思路包括JavaScript的全局变量隔离样式隔离以及子应用之间的通信方式。组件库的考察往往和设计模式绑定。面试官会问如何设计一个通用组件库这个时候要考察的是封装思维按钮、输入框这类原子组件怎么分层如何设计props和事件暴露如何支持主题定制和按需加载。基于Element Plus或者Ant Design的实现可以展开讲比如BEM命名规范、样式变量的设计、组件级联的上下文传递。工程化的面试范围很广最常考的还是构建工具。Webpack的核心概念包括entry、output、loader、plugin、tapable事件流、代码分割、Tree Shaking原理。现在Vite也成了高频考点它的核心优势是基于ES Module的开发服务器启动秒开HMR快但生产构建用的还是Rollup。面试官很喜欢问Vite这么快会不会取代Webpack以及Vite生产构建有没有什么坑。前一个问题要回答两者定位不同后一个问题涉及esbuild和Rollup对CommonJS依赖的处理差异、代码分割策略的不同需要实际踩坑才知道。4.4 从URL输入到页面渲染的完整链路这道题是前端面试的经典送分题但很多人只能答出流程答不出细节。完整的回答框架大概这么展开每一层都要有细节支撑。输入URL后浏览器先做HSTS检查、地址解析然后进入DNS解析依次查浏览器缓存、系统缓存、路由器缓存、DNS服务器最终拿到IP。接着是TCP连接三次握手的报文内容、为什么是三次而不是两次。如果使用HTTPS还要加上TLS握手包括证书验证、密钥协商的过程。然后浏览器发送HTTP请求服务端返回响应浏览器根据响应头判断是否走缓存然后开始解析HTML。解析HTML的阶段要重点准备。HTML会被解析成DOM树CSS会被解析成CSSOM树两者合成渲染树。JavaScript的加载和执行会阻塞DOM解析所以有async和defer的区别。接着是布局和绘制阶段第一次接触这个的人经常分不清重排、重绘和合成。重排是布局的重新计算重绘是像素的重新绘制合成是利用GPU层进行位图合成。面试官很可能会追问哪些CSS属性会触发重排、如何利用transform和opacity避免重排和重绘这些都是性能优化面试的基础。5. 浏览器、网络与前端性能优化面试实战5.1 浏览器缓存机制强缓存与协商缓存缓存是前端性能面试的重头戏很多开发只知道“浏览器有缓存”但面试官需要的是能说清楚缓存头怎么配、命中流程是什么样的。先说命中流程浏览器发送请求前先用请求的URL去查内存缓存和磁盘缓存如果命中且没过期就直接用。判断是否过期的依据是Cache-Control的max-age或Expires这就是强缓存。如果缓存过期了浏览器会带上ETag或Last-Modified信息向服务端发请求由服务端判断资源是否真的变了没变就返回304让浏览器继续用本地缓存这就是协商缓存。高级回答要能区分Cache-Control和Expires的优先级说明为什么现在以Cache-Control为主还要能解释ETag和Last-Modified的区别为什么ETag比Last-Modified更精准。另一个容易忽略的点是缓存的应用场景HTML文件默认不缓存或短缓存JS和CSS带hash文件名做长缓存图片字体等静态资源走强缓存。能举出实际设置案例比如nginx的location配置会让人感觉你确实在项目里配过。5.2 前端性能优化清单和核心指标性能优化题几乎是高级前端岗位的必考内容而且面试官通常会要求结合项目数据来说。回答这类题推荐走“指标—问题—方案—效果”的套路不要一上来就背一堆优化技术。先明确性能指标FCP首次内容绘制、LCP最大内容绘制、CLS布局偏移、INP交互到下一次绘制的延迟这些是Core Web Vitals的核心。面试提到性能优化时先说出这些指标立刻就能和只知道工具不会看数据的人拉开差距。常见优化手段可以按加载阶段分类资源体积方面用代码分割、Tree Shaking、压缩混淆、gzip或Brotli压缩网络层面用CDN、HTTP/2多路复用、预加载预连接渲染层面用懒加载、虚拟列表、requestIdleCallback、避免同步长任务。每一项都要能举项目里的例子最好有优化前后的对比数据比如首屏时间从4秒降到1.5秒LCP从3.5秒降到1.8秒。面试官非常看重数据意识和量化思维。5.3 大文件上传与Web Worker实战大文件上传是面试中典型的场景题因为它把多个知识点串成了一条线前端需要把文件切片利用并发控制分片上传服务端接收所有分片后合并断点续传需要记录已上传分片刷新页面后能只传没传的部分秒传则是通过文件hash让服务端判断文件是否已存在。前端涉及的技术点有FileReader、Blob.slice、hash计算比如用SparkMD5或Web Crypto、请求并发控制、Web Worker辅助计算hash。这里推荐补充Web Worker的内容因为“前端使用worker上传大文件”是热搜词中的高频话题。面试官常问为什么要在Worker里计算文件hash而不是主线程。因为大文件hash计算会阻塞主线程造成页面卡顿和用户交互无响应放进Worker里计算就能保持主线程流畅。更进一步的追问是Worker与主线程如何通信、数据传输用structured clone还是转移所有权、SharedArrayBuffer有什么限制。这些内容比较前沿能答好会给面试官留下很深刻的印象。6. 手写题、算法与简历面试技巧6.1 高频手写题清单与常见写法前端面试的手写题通常考察的是对JavaScript API的底层理解而不是复杂的算法。以下是我整理出的高频清单配合思路说明和易错点参考价值比单纯背代码高得多。防抖和节流是最高频的题目。防抖的核心是每次触发事件都清除上一次的定时器重新计时节流是限制固定时间内最多执行一次。进阶考察点是能否支持立即执行版本、能否取消、能否返回Promise。深拷贝是个大坑很多人以为递归遍历就行但还要考虑循环引用、Symbol属性、Map/Set/Date/RegExp等特殊类型完整实现才会有高分。手写Promise考察的是状态机设计pending、fulfilled、rejected三种状态then和catch怎么串联resolve和reject的执行流程。手写发布订阅要能实现on、emit、off、once这些方法。数组去重和拍平也是热身级题目但要注意追问的时间复杂度和兼容性。手写题有几个通用的经验写之前先和面试官确认需求比如深拷贝要不要处理循环引用写的过程中一边写一边说明思路不要闷头写写完后主动总结边界条件和优化空间比如还能怎么改进。这套流程本身就在展示你的工程化思维比代码本身更能加分。6.2 前端岗位算法题的复习优先级算法不是前端面试的核心但重点公司一定会考。刷题范围不需要覆盖全部LeetCode优先掌握这几类就够覆盖90%的前端算法题。字符串和数组处理是最高频的比如反转字符串、最长回文子串、两数之和、合并区间。链表题目虽然在前端业务中少用到但面试官喜欢用来考指针操作比如反转链表、判断环形链表。二叉树的遍历是最常考的树类题型前中后序、层序遍历配合递归和迭代两种写法。动态规划在前端面试中相对低频但简单的爬楼梯、打家劫舍这类题目偶尔会出现至少要能识别出DP的状态转移思路。前端的算法题难度普遍低于后端但考察维度不同。前端算法题更关注对数据结构的选择、边界条件的处理、时间复杂度的分析和代码的可读性。答题时先用语言描述思路再给出复杂度分析最后写代码这个顺序比一上来就写代码容易拿高分。另外强烈建议熟悉JavaScript内置的排序方法、Set/Map/WeakMap等数据结构的使用方法因为很多题可以用来简化代码实现。6.3 简历怎么写才能通过筛选简历是整个求职流程里收益率最高的一环但同时也是大多数人做得最差的一环。前端简历最常见的毛病是项目描述全是功能罗列——实现了一个管理后台、用了Vue和Element UI、完成了登录和权限模块——这种简历在HR和面试官眼中毫无区分度。写项目经历的核心是突出“难点、方案、效果、数据”四个要素。比如同样是写权限管理改成“基于RBAC模型设计了一套动态权限控制方案前端用路由守卫和自定义指令实现按钮级权限菜单根据用户角色动态生成权限变更时无需刷新页面”效果就完全不同。数据意识也很关键凡是能量化的都要量化首屏优化从3秒降到1秒、组件复用率提升40%、页面白屏率从0.5%降到0.1%。另外简历上的技术栈要能撑得起面试官的追问不要堆自己没真用过的技术。6.4 自我介绍、项目讲解与反问环节的实战话术面试的第一个环节通常是自我介绍很多人把它讲成了简历复读机。正确的做法是用1到2分钟讲清楚三件事我的技术栈和业务方向、我做过的最有代表性的项目、为什么我来应聘这个岗位。结尾可以提一个和对方的业务强相关的点比如应聘的岗位涉及小程序可以说明自己做过taro或uni-app跨端项目让面试官有追问的抓手。项目讲解是最容易得分也最容易失分的环节。推荐的讲解框架是项目背景和业务目标我负责的模块和职责项目的技术选型和架构设计遇到的最大难点和解决方案最终的结果和复盘。讲解时要有画面感把遇到问题时的思考过程讲出来比如为什么会选这个方案、还对比了哪些方案、最终为什么定了它。这样面试官会觉得这是一个真实做过项目的人。反问环节是很多候选人浪费掉的机会。别问“公司加班多不多”“每年调薪几次”这种问题要问能展示你思考深度的问题当前团队前端主要技术栈是什么有没有专项的性能优化或质量保障投入团队对前端工程师的能力成长有什么规划。这些问题既得体又能帮你判断这个团队是否值得去。7. 最后聊几句真实的面试经验写这份面经汇总的过程中我把近几年带团队面试和参与招聘总结的经验全部复盘了一遍。最大的感受是面试官不是要找一个所有问题都能答上来的候选人而是要找一个能一起共事、能独立解决问题的人。所以与其焦虑自己还有多少盲区不如把所有高频考点吃透、把真实做过的项目讲清楚剩下的交给临场发挥。有两个小建议想送给正在准备面试的朋友。一是面完试一定要做复盘把被问到但没答好的问题记下来用一个小时弄明白原理下次再遇到就会很稳。二是准备一份自己的“面试错题本”把每次模拟和真实面试的翻车经历整理成文档这个文档的含金量远高于任何网上现成的面经。根据我个人带团队的经验面试说到底看的是基础和思维基础的深度决定了你能不能胜任工作思维的方式决定了你遇到新问题能不能快速上手。前端技术迭代快今天背的面经明年可能就变了但把原理吃透、把思维方式练好这才是任何时候都不会过时的核心竞争力。 前端面试核心考点全解析：从JavaScript原理到性能优化实战
1. 前端面经的价值不只是背题而是建立面试思维这两年前端岗位的竞争强度经历过的人都懂。一个普通岗位收到的简历动辄几百份面试轮次从两轮加到四轮甚至五轮考察范围也从单纯的JavaScript、CSS扩展到框架原理、工程化、性能优化、算法、软技能全覆盖。我见过太多基础不错的朋友倒在面试环节不是能力不行而是根本不了解面试官想听什么回答问题抓不住重点。这份面经汇总不是把网上流传的题目复制粘贴一遍而是按照面试的逻辑重新梳理一遍前端知识体系。每个考点都会说明“面试官为什么问这道题”“回答到哪个深度算过关”“哪些追问最容易翻车”。无论你是准备春招秋招的应届生还是打算跳槽的进阶开发者按照这份清单系统过一遍比盲目刷几十套题效率高得多。前端面试有两个明显的趋势一是深度越来越深早年问“什么是闭包”就能过关现在会追问闭包的内存模型、与垃圾回收的关系、实际项目里哪些场景用到了闭包二是广度越来越广微前端、WebAssembly、AI辅助开发、跨端方案都会出现在面试里。应对这种变化唯一的办法是把知识体系化而不是零散地记结论。我在整理这份面经时把所有考点分成了六个大块底层逻辑、JavaScript核心、框架与工程化、浏览器与性能、手写题与算法、简历与面试技巧。每一块都会结合真实面试场景展开标注出最高频的追问方向也会分享我自己作为面试官筛选候选人的真实标准。这些内容不一定能保证你拿到offer但至少能让你在面试时不被问懵回答问题有章法。2. 面试官在想什么前端面试的底层逻辑与准备策略2.1 面试官考察的四个核心维度很多人以为面试官是在考知识点其实知识点只是载体。围绕“前端面经”这个主题我把面试官的考察意图拆解成四个维度想清楚了这四个维度你准备面试的方向就不会跑偏。第一是基础扎实度。JavaScript的语言特性、浏览器的渲染机制、HTTP协议的常见细节、CSS的布局原理这些属于内功决定一个开发者的上限。面试官会通过基础题快速判断你是否有完整的知识体系而不是只会调框架API。第二是项目深度。项目经历是简历上最容易被注水的部分所以面试官会不断追问细节为什么选这个方案、遇到什么坑、怎么排查的、性能数据是多少、有没有对比其他方案。问得越细越能看出哪些是你真做的哪些是你背的。第三是工程化思维。现在的业务开发已经不是写页面那么简单了代码规范、组件复用、构建优化、监控告警、CI/CD这些都是面试官关注的点。一个只会写业务代码的候选人在高级岗位的面试中很难过关。第四是沟通与学习能力。面试官会故意问一些你不太熟悉的方向观察你的反应。是坦诚说不了解然后尝试分析还是支支吾吾硬编答案这决定了面试官对你的整体印象。记住一句话面试官不怕你说不会怕的是你不会还装懂。2.2 “八股文”的正确打开方式前端圈经常把面试题叫做“八股文”带着贬义。但我的看法是如果你只是背诵结论八股文确实没有意义但如果你把每个结论背后的原理搞清楚八股文就是你建立知识体系的地图。关键在于怎么从“背答案”切换到“讲原理”。以“浏览器从输入URL到页面渲染发生了什么”这道经典题为例。初级回答是背出“DNS解析、TCP连接、HTTP请求、渲染”这几个关键词。中级回答是补充每个阶段的具体过程比如DNS解析有本地缓存、递归查询、迭代查询TCP连接有三次握手和四次挥手。高级回答则是能讲清楚关键细节TCP慢启动对资源加载的影响、HTTP/2的多路复用解决了什么问题、渲染过程中CSSOM和DOM的构建顺序、JavaScript的加载为什么会阻塞渲染、async和defer的区别。所以我在准备面经时有个习惯每道题都会问自己三个问题——它的底层原理是什么、它在实际项目里对应什么场景、如果我再深入一层面试官会问什么。用这个方法过题一道题能带出一整片知识网络。比如闭包这道题底层是作用域链和词法作用域实际场景是防抖节流、模块化封装、React Hooks的闭包陷阱再深入一层就是内存泄漏和垃圾回收机制。2.3 2-3周速成准备的时间规划如果你离面试还有2到3周时间紧但也不是不可能。我建议把时间分成三个周期每个周期有明确的目标避免东一榔头西一棒子。第一周以JavaScript和浏览器为核心这是最高频也是性价比最高的考点。花3到4天过一遍JavaScript核心知识点闭包、作用域、原型链、this指向、异步编程、事件循环、ES6新特性配合刷题巩固。再花2到3天过浏览器相关的内容渲染机制、缓存、存储、跨域、性能优化。这两块占面试总题量的40%以上值得投入最多精力。第二周主攻框架和工程化。如果你用React重点准备Fiber架构、Hooks原理、状态管理方案、React 18的并发特性。用Vue就重点准备响应式原理、diff算法、Vue 3的Composition API。工程化方面至少要知道Webpack和Vite的核心原理与差异常用的Loader和PluginTree Shaking的原理。这一周是拉开差距的关键因为基础和算法大家都会准备框架深度才是区分度所在。第三周是手写题、算法和模拟面试。手写题每天练3到5个高频题目防抖节流、深拷贝、手写Promise、柯里化、数组去重、发布订阅。算法题以LeetCode热门题为主重点练字符串处理、数组操作、链表、二叉树、动态规划入门。最后务必做至少两次全真模拟面试可以找朋友互相问也可以对着录屏自己复盘主要练表达节奏和抗压能力。3. JavaScript核心考点从变量提升到事件循环3.1 闭包、作用域链与内存泄漏闭包是前端面试里出场率最高的问题也是追问最深的点。最基础的问题是“什么是闭包”大部分人都能答上来函数嵌套函数内部函数引用了外部函数的变量就形成了闭包。但面试官很少在这么浅的层面停下来他一定会向上抛两个问题闭包的底层原理是什么以及闭包会导致什么问题。底层原理是词法作用域和作用域链。JavaScript的函数在定义时就确定了作用域链内部函数保存了对外部函数变量对象的引用所以即使外部函数执行完毕内部函数依然能访问它的变量。这个机制的本质是函数对象持有了作用域链的引用导致外部函数的变量对象无法被垃圾回收。关于内存泄漏要分清两种情况。合理使用闭包不会导致内存泄漏只有闭包中引用了不再需要的大对象或者闭包被意外挂到全局引用上才会造成内存无法释放。我面试时喜欢出一个场景题有一个列表组件每行绑定了一个点击事件点击后需要访问该行数据现在长列表频繁刷新问内存会不会越来越大。这个问题的核心就是考察候选人能不能想到用事件委托替代每行独立闭包以及如何手动解除不再使用的闭包引用。实际项目里闭包最常用的场景是封装私有变量比如实现一个计数器或缓存模块还有防抖节流这类需要保存定时器状态的场景React Hooks里的useState也是靠闭包实现的。回答闭包题时最好主动把这些场景说出来面试官会认为你不仅懂原理还能在实际开发中运用。3.2 事件循环与异步编程的追问链事件循环是JavaScript面试的分水岭也是很多人背了答案却依然翻车的地方。最常见的题是“说一段代码的输出顺序”比如setTimeout、Promise、async/await混在一起让你预测执行结果。这类题的背后是宏任务、微任务、调用栈之间的关系。完整的回答框架是先说明JavaScript是单线程的所有异步任务通过事件循环调度。同步代码立即执行遇到异步API就把回调挂到对应的任务队列里。执行完当前宏任务后会清空所有微任务然后再取下一个宏任务执行。Promise的回调属于微任务setTimeout和事件回调属于宏任务requestAnimationFrame有自己独立的调度时机。async/await的实质是Promise的语法糖await会暂停当前函数执行把后续代码包成一个微任务。面试官经常会加一个追问如果setTimeout设成0是不是立即执行。答案是设成0也有至少1ms的延迟而且即使不考虑延迟它也要等主线程当前任务和微任务队列全部清空后才会执行。再往后追问还有Node.js的事件循环和浏览器有什么不同process.nextTick的执行时机setImmediate和setTimeout的顺序问题。准备时要覆盖到这里因为很多大厂面试官就喜欢从这个方向深挖。异步编程的另一个高频方向是Promise的各种方法和错误处理机制。Promise.all、Promise.race、Promise.allSettled、Promise.any的区别要背熟尤其要会对应到实际场景并发请求用Promise.all、竞态请求用Promise.race、部分失败也要拿到结果就用Promise.allSettled。手写Promise也是必练的题目能手写出来说明你真的理解了它的状态机和then链的透传机制。3.3 this指向、箭头函数与绑定规则this指向问题在JavaScript面试中经久不衰因为很多前端开发写了好几年代码也没搞明白this到底怎么确定。其实规律就几句话默认绑定非严格模式下指向全局对象严格模式为undefined、隐式绑定作为对象方法调用时指向对象、显式绑定call、apply、bind指向传入的第一个参数、new绑定指向新创建的对象。优先级上new绑定最高显式绑定其次隐式绑定再次默认绑定最低。箭头函数不绑定this它的this继承自外层词法作用域。这个特性在实际中有两个典型应用一是在React类组件中避免事件处理函数的this丢失二是在setTimeout或Promise回调中保留外层this。但要注意正因为箭头函数没有自己的this它也不能作为构造函数不能使用arguments对象。面试中常见的一个深坑是连续链式调用obj.method1().method2()的this指向什么。另外还有隐式丢失的问题——把对象的方法赋值给一个变量再调用this会变成undefined或全局对象。想要拿高分的回答除了背规则还要解释清楚本质this的指向是在函数调用时确定的而不是在定义时确定的箭头函数除外。3.4 原型链与继承的多种实现方式原型链是新手最头疼的内容也是面试必考题。核心概念包括原型对象、constructor属性、__proto__与prototype的区别、instanceof的原理。经典题目是画出一个对象如何沿着原型链找到Object.prototype上的方法以及为什么每个对象都能调用toString()。继承的考察通常从es5的几种方案展开原型链继承、构造函数继承、组合继承、寄生组合继承然后过渡到ES6的class extends方案。重点要理解class本质上是语法糖底层依然是原型链和构造函数。还要知道extends的实现原理也就是寄生组合继承的思路——子类构造函数的原型指向父类构造函数的实例同时把constructor指回子类。追问的方向大概率是两个一个是原型链的修改对既有实例的影响比如在Object.prototype上挂一个方法所有对象马上就能访问到另一个是class和function构造函数的差异比如class不能直接调用、class内部默认严格模式、class的方法不可枚举。准备继承这部分内容时最好自己动手把几种继承方式都写一遍写到能默写的程度面试时手写代码才不会卡壳。4. 框架与工程化React、Vue和构建工具的面试重难点4.1 React高频考点Fiber、Hooks与渲染机制React的面试深度在逐年上升已经不只是问生命周期和setState了。现在的主流追问路径是从虚拟DOM入手问它解决了什么问题再到diff算法怎么优化最后落到Fiber架构为什么要把渲染拆成可中断的单元。虚拟DOM最基础的问题很好回答用JavaScript对象描述UI结构通过对比新旧对象的差异来最小化DOM操作。但追问马上就来如果直接操作DOM可能更快虚拟DOM的价值到底在哪。答案的核心在于跨平台能力——除了浏览器还能渲染到Native声明式开发的代价平衡——开发者不需要手写命令式DOM操作框架通过批量diff来对冲操作开销。更资深一点的回答会提到虚拟DOM让React得以实现并发特性因为Fiber需要在内存中保存可中断的渲染状态。React 18之后并发特性是必然考点。useTransition、useDeferredValue、startTransition这些API要能说出使用场景长列表筛选、搜索框联想、大组件切换渲染这些场景下用并发特性可以避免阻塞用户输入。Hooks原理也是高频考点useState怎么通过闭包保存状态、useEffect的依赖追踪机制为什么会有闭包陷阱、useMemo和useCallback在什么情况下真的有用。这些我建议不要只背结论自己动手写一个简化版的useState和useEffect理解会深很多。状态管理和数据流也是React面试逃不开的话题。Redux的核心概念包含store、reducer、action、dispatch面试时最好能画一遍单向数据流。现在更常被问到的是Redux Toolkit和React Query这类现代的方案以及Context在高频更新场景下的性能问题。回答这类问题要结合项目经验什么场景适合用Redux、什么场景用zustand或Context就够了、服务端状态为什么应该交给React Query。4.2 Vue高频考点响应式原理与diff算法Vue的核心考点和React差异很大最有代表性的就是响应式原理。Vue 2的Object.defineProperty和Vue 3的Proxy的对比是必答题前者只能拦截对象属性的读写新增或删除属性需要特殊API后者可以代理整个对象支持新增删除和数组索引操作而且性能更好。Watch、Computed的底层实现也依赖响应式系统要能说清楚Computed为什么有缓存、依赖收集是怎么触发的。Vue的diff算法同样是高频题关键是理解同层比较、双端指针、key的作用。特别要能解释清楚key的重要性复用元素时如果不加key或者用index当key在列表头部插入元素时会导致状态错乱的bug因为Diff算法只能依赖key判断节点是否是同一个。深入一点还要知道Vue 3在diff上的优化比如静态标记和patchFlag可以让更新跳过静态节点。Vue 3的Composition API是现在的主流考点。setup函数、ref和reactive的区别、computed和watch的新用法、生命周期钩子怎么改成了onMounted这种函数式写法。面试官常问Composition API到底解决了什么问题Standard答案是更好的逻辑复用和组织代码替代了Vue 2时代混入mixin带来的命名冲突和来源不清。要拿高分的话最好再补充一个真实案例自己的项目里如何把一个复杂的业务逻辑从options API重构为composition API代码从多少行简化为多少行。4.3 微前端、组件库与工程化面试题微前端在企业级项目中越来越普遍面试出镜率也直线上升。核心考察点是为什么要用微前端——多个团队独立开发部署、技术栈异构、老项目渐进式迁移。常见的实现方案包括single-spa的注册表模式、qiankun基于single-spa的封装、还有iframe方案的优缺点对比。面试官通常会追问沙箱隔离的实现思路包括JavaScript的全局变量隔离样式隔离以及子应用之间的通信方式。组件库的考察往往和设计模式绑定。面试官会问如何设计一个通用组件库这个时候要考察的是封装思维按钮、输入框这类原子组件怎么分层如何设计props和事件暴露如何支持主题定制和按需加载。基于Element Plus或者Ant Design的实现可以展开讲比如BEM命名规范、样式变量的设计、组件级联的上下文传递。工程化的面试范围很广最常考的还是构建工具。Webpack的核心概念包括entry、output、loader、plugin、tapable事件流、代码分割、Tree Shaking原理。现在Vite也成了高频考点它的核心优势是基于ES Module的开发服务器启动秒开HMR快但生产构建用的还是Rollup。面试官很喜欢问Vite这么快会不会取代Webpack以及Vite生产构建有没有什么坑。前一个问题要回答两者定位不同后一个问题涉及esbuild和Rollup对CommonJS依赖的处理差异、代码分割策略的不同需要实际踩坑才知道。4.4 从URL输入到页面渲染的完整链路这道题是前端面试的经典送分题但很多人只能答出流程答不出细节。完整的回答框架大概这么展开每一层都要有细节支撑。输入URL后浏览器先做HSTS检查、地址解析然后进入DNS解析依次查浏览器缓存、系统缓存、路由器缓存、DNS服务器最终拿到IP。接着是TCP连接三次握手的报文内容、为什么是三次而不是两次。如果使用HTTPS还要加上TLS握手包括证书验证、密钥协商的过程。然后浏览器发送HTTP请求服务端返回响应浏览器根据响应头判断是否走缓存然后开始解析HTML。解析HTML的阶段要重点准备。HTML会被解析成DOM树CSS会被解析成CSSOM树两者合成渲染树。JavaScript的加载和执行会阻塞DOM解析所以有async和defer的区别。接着是布局和绘制阶段第一次接触这个的人经常分不清重排、重绘和合成。重排是布局的重新计算重绘是像素的重新绘制合成是利用GPU层进行位图合成。面试官很可能会追问哪些CSS属性会触发重排、如何利用transform和opacity避免重排和重绘这些都是性能优化面试的基础。5. 浏览器、网络与前端性能优化面试实战5.1 浏览器缓存机制强缓存与协商缓存缓存是前端性能面试的重头戏很多开发只知道“浏览器有缓存”但面试官需要的是能说清楚缓存头怎么配、命中流程是什么样的。先说命中流程浏览器发送请求前先用请求的URL去查内存缓存和磁盘缓存如果命中且没过期就直接用。判断是否过期的依据是Cache-Control的max-age或Expires这就是强缓存。如果缓存过期了浏览器会带上ETag或Last-Modified信息向服务端发请求由服务端判断资源是否真的变了没变就返回304让浏览器继续用本地缓存这就是协商缓存。高级回答要能区分Cache-Control和Expires的优先级说明为什么现在以Cache-Control为主还要能解释ETag和Last-Modified的区别为什么ETag比Last-Modified更精准。另一个容易忽略的点是缓存的应用场景HTML文件默认不缓存或短缓存JS和CSS带hash文件名做长缓存图片字体等静态资源走强缓存。能举出实际设置案例比如nginx的location配置会让人感觉你确实在项目里配过。5.2 前端性能优化清单和核心指标性能优化题几乎是高级前端岗位的必考内容而且面试官通常会要求结合项目数据来说。回答这类题推荐走“指标—问题—方案—效果”的套路不要一上来就背一堆优化技术。先明确性能指标FCP首次内容绘制、LCP最大内容绘制、CLS布局偏移、INP交互到下一次绘制的延迟这些是Core Web Vitals的核心。面试提到性能优化时先说出这些指标立刻就能和只知道工具不会看数据的人拉开差距。常见优化手段可以按加载阶段分类资源体积方面用代码分割、Tree Shaking、压缩混淆、gzip或Brotli压缩网络层面用CDN、HTTP/2多路复用、预加载预连接渲染层面用懒加载、虚拟列表、requestIdleCallback、避免同步长任务。每一项都要能举项目里的例子最好有优化前后的对比数据比如首屏时间从4秒降到1.5秒LCP从3.5秒降到1.8秒。面试官非常看重数据意识和量化思维。5.3 大文件上传与Web Worker实战大文件上传是面试中典型的场景题因为它把多个知识点串成了一条线前端需要把文件切片利用并发控制分片上传服务端接收所有分片后合并断点续传需要记录已上传分片刷新页面后能只传没传的部分秒传则是通过文件hash让服务端判断文件是否已存在。前端涉及的技术点有FileReader、Blob.slice、hash计算比如用SparkMD5或Web Crypto、请求并发控制、Web Worker辅助计算hash。这里推荐补充Web Worker的内容因为“前端使用worker上传大文件”是热搜词中的高频话题。面试官常问为什么要在Worker里计算文件hash而不是主线程。因为大文件hash计算会阻塞主线程造成页面卡顿和用户交互无响应放进Worker里计算就能保持主线程流畅。更进一步的追问是Worker与主线程如何通信、数据传输用structured clone还是转移所有权、SharedArrayBuffer有什么限制。这些内容比较前沿能答好会给面试官留下很深刻的印象。6. 手写题、算法与简历面试技巧6.1 高频手写题清单与常见写法前端面试的手写题通常考察的是对JavaScript API的底层理解而不是复杂的算法。以下是我整理出的高频清单配合思路说明和易错点参考价值比单纯背代码高得多。防抖和节流是最高频的题目。防抖的核心是每次触发事件都清除上一次的定时器重新计时节流是限制固定时间内最多执行一次。进阶考察点是能否支持立即执行版本、能否取消、能否返回Promise。深拷贝是个大坑很多人以为递归遍历就行但还要考虑循环引用、Symbol属性、Map/Set/Date/RegExp等特殊类型完整实现才会有高分。手写Promise考察的是状态机设计pending、fulfilled、rejected三种状态then和catch怎么串联resolve和reject的执行流程。手写发布订阅要能实现on、emit、off、once这些方法。数组去重和拍平也是热身级题目但要注意追问的时间复杂度和兼容性。手写题有几个通用的经验写之前先和面试官确认需求比如深拷贝要不要处理循环引用写的过程中一边写一边说明思路不要闷头写写完后主动总结边界条件和优化空间比如还能怎么改进。这套流程本身就在展示你的工程化思维比代码本身更能加分。6.2 前端岗位算法题的复习优先级算法不是前端面试的核心但重点公司一定会考。刷题范围不需要覆盖全部LeetCode优先掌握这几类就够覆盖90%的前端算法题。字符串和数组处理是最高频的比如反转字符串、最长回文子串、两数之和、合并区间。链表题目虽然在前端业务中少用到但面试官喜欢用来考指针操作比如反转链表、判断环形链表。二叉树的遍历是最常考的树类题型前中后序、层序遍历配合递归和迭代两种写法。动态规划在前端面试中相对低频但简单的爬楼梯、打家劫舍这类题目偶尔会出现至少要能识别出DP的状态转移思路。前端的算法题难度普遍低于后端但考察维度不同。前端算法题更关注对数据结构的选择、边界条件的处理、时间复杂度的分析和代码的可读性。答题时先用语言描述思路再给出复杂度分析最后写代码这个顺序比一上来就写代码容易拿高分。另外强烈建议熟悉JavaScript内置的排序方法、Set/Map/WeakMap等数据结构的使用方法因为很多题可以用来简化代码实现。6.3 简历怎么写才能通过筛选简历是整个求职流程里收益率最高的一环但同时也是大多数人做得最差的一环。前端简历最常见的毛病是项目描述全是功能罗列——实现了一个管理后台、用了Vue和Element UI、完成了登录和权限模块——这种简历在HR和面试官眼中毫无区分度。写项目经历的核心是突出“难点、方案、效果、数据”四个要素。比如同样是写权限管理改成“基于RBAC模型设计了一套动态权限控制方案前端用路由守卫和自定义指令实现按钮级权限菜单根据用户角色动态生成权限变更时无需刷新页面”效果就完全不同。数据意识也很关键凡是能量化的都要量化首屏优化从3秒降到1秒、组件复用率提升40%、页面白屏率从0.5%降到0.1%。另外简历上的技术栈要能撑得起面试官的追问不要堆自己没真用过的技术。6.4 自我介绍、项目讲解与反问环节的实战话术面试的第一个环节通常是自我介绍很多人把它讲成了简历复读机。正确的做法是用1到2分钟讲清楚三件事我的技术栈和业务方向、我做过的最有代表性的项目、为什么我来应聘这个岗位。结尾可以提一个和对方的业务强相关的点比如应聘的岗位涉及小程序可以说明自己做过taro或uni-app跨端项目让面试官有追问的抓手。项目讲解是最容易得分也最容易失分的环节。推荐的讲解框架是项目背景和业务目标我负责的模块和职责项目的技术选型和架构设计遇到的最大难点和解决方案最终的结果和复盘。讲解时要有画面感把遇到问题时的思考过程讲出来比如为什么会选这个方案、还对比了哪些方案、最终为什么定了它。这样面试官会觉得这是一个真实做过项目的人。反问环节是很多候选人浪费掉的机会。别问“公司加班多不多”“每年调薪几次”这种问题要问能展示你思考深度的问题当前团队前端主要技术栈是什么有没有专项的性能优化或质量保障投入团队对前端工程师的能力成长有什么规划。这些问题既得体又能帮你判断这个团队是否值得去。7. 最后聊几句真实的面试经验写这份面经汇总的过程中我把近几年带团队面试和参与招聘总结的经验全部复盘了一遍。最大的感受是面试官不是要找一个所有问题都能答上来的候选人而是要找一个能一起共事、能独立解决问题的人。所以与其焦虑自己还有多少盲区不如把所有高频考点吃透、把真实做过的项目讲清楚剩下的交给临场发挥。有两个小建议想送给正在准备面试的朋友。一是面完试一定要做复盘把被问到但没答好的问题记下来用一个小时弄明白原理下次再遇到就会很稳。二是准备一份自己的“面试错题本”把每次模拟和真实面试的翻车经历整理成文档这个文档的含金量远高于任何网上现成的面经。根据我个人带团队的经验面试说到底看的是基础和思维基础的深度决定了你能不能胜任工作思维的方式决定了你遇到新问题能不能快速上手。前端技术迭代快今天背的面经明年可能就变了但把原理吃透、把思维方式练好这才是任何时候都不会过时的核心竞争力。