简介前端面试高频考点全覆盖的刷题资料包面向准备求职的前端开发者和希望系统梳理知识体系的初中级工程师。其中将HTML、CSS、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器等核心方向整理为独立Markdown笔记并且细化到框架对比、状态管理、构建工具、浏览器原理、前端安全等高频专题便于按技术栈分门别类地查阅和突击。压缩包共28个文件以20个Markdown文档为主体包含完整版精选面试题解析、各专题知识梳理以及逻辑题、ES6语法、HTTP与架构等补充材料另有少量IDE配置与项目说明文件包体仅110KB轻量易用。整体目录结构清晰既能用于考前快速冲刺也适合日常查漏补缺帮助读者在较短时间内覆盖前端面试主流考点。已有249人学习是一份非常实用的前端面试刷题参考。1. 前端面试题详解刷题不是背答案是重新学一遍前端前端面试题这个方向很多人误以为就是背题把网上整理的题库刷一遍面试时撞上原题就稳了。但实际上面试官早就不按套路出题了八股文式的题目越来越多地被场景题、手写题、原理追问替换掉。一份真正值得刷的前端面试题应该是按 Html、Css、JavaScript、Vue、React、Node、TypeScript 这条主线把知识重新串一遍每一道题都能讲清楚「为什么」而不是「是什么」。这篇文章要解决的是怎么让刷题这件事变成你系统的技术复盘而不是考前突击的安慰剂。适合读这篇文章的人是准备跳槽的前端工程师、刚学完框架想验证水平的初学者以及带团队需要做面试题库的资深开发。后面的内容不会贴一份现成的题库给你因为那种题库网上一抓一大把但绝大多数没有讲解、没有追问方向、没有坑点提示。我会按技术栈分层讲清楚每一类题背后的知识密度和回答深度再给你一套能落地的刷题方法和避坑清单让你刷一道题顶别人刷十道。2. 前端面试题的刷题路径先建体系再谈题量2.1 按技术栈把面试题拆成四个递进层次前端面试题的范围看起来很大但如果你按技术栈拆开会发现它其实有非常清晰的分层逻辑。我一般会把面试题分成四个递进层次基础语言层、浏览器与工程化层、框架层、服务端与类型层。基础语言层就是 Html、Css、JavaScript 这三件套浏览器与工程化层涉及 DOM 渲染、事件循环、构建工具框架层是 Vue 和 React 的核心机制与生态服务端与类型层是 Node 和 TypeScript。这样分层有什么用处它决定了你的刷题顺序。很多人在网上看到题就刷今天做一道闭包题明天做一道虚拟 DOM 题后天又去刷 Node 的流处理知识完全是碎片化的。面试官追问的时候碎片化知识撑不住因为追问一定会沿着某个技术点的纵深往下挖。按层次递进去刷每一层先建立主干认知再往细节里钻被追问时你就能顺着主干往下走而不是在碎片里乱撞。2.2 建一份自己的面试题知识树而不是收藏别人的题库我建议你动手建一份自己的面试题知识树用 Markdown 或者思维导图工具都可以。树的根节点是「Web 前端」一级分支就是 Html、Css、JavaScript、Vue、React、Node、TypeScript、浏览器原理、工程化每个一级分支下面再挂你遇到的具体题目。这个动作看起来简单但它逼着你把每一道题归类归类本身就是一次理解。知识树建好之后每刷一道题不要只记答案要在这道题下面挂三个字段核心考点、追问方向、关联题目。核心考点是这道题真正考什么追问方向是你猜面试官会沿着哪个点继续问关联题目是这道题和哪几道题属于同一个知识块。这三个字段会让你从「背题」切换到「建体系」。我见过很多候选人的简历写得很好但一追问就露馅就是因为他刷题的时候只记了答案没建关联知识是孤岛。2.3 用「输出倒逼输入」的方法验证自己是否真的会了这里有个非常实用的验证方法每刷完一道题关掉资料尝试用大白话把这道题讲给一个完全不懂前端的人听。如果对方能听懂说明你真正理解了如果你讲的时候卡壳或者需要翻资料才能讲下去说明这个点还没过脑子。这就是常说的费曼学习法的变体它比反复读答案有效得多因为它强制你的大脑把零散信息组织成逻辑链。举个例子很多人背得出「闭包就是函数内嵌套函数并且内部函数引用了外部函数的变量」但让他手写一个用闭包实现计数的例子他写不出来更说不清闭包和内存泄漏之间的关系。如果你按「输出倒逼输入」的方式来刷这道题你会发现你需要搞明白函数作用域、变量生命周期、引用关系、内存回收机制这四件事全通了你才算真正「会」了闭包。刷题的量不重要这个「通」的过程才是面试时能稳定输出的底气。3. Html、Css、JavaScript 必刷题基础层才是失分重灾区3.1 Html 面试题语义化与页面结构考点不再只是标签Html 在面试题里看起来是最好欺负的但恰恰是很多人丢分的地方。现在的 Html 面试题早就不是「h1 到 h6 分别是什么」这种记忆题了而是围绕语义化、可访问性、SEO 展开的实践题。比如「给出一段没有语义的 div 嵌套页面请你重构成语义化结构」这样的题考的是你对 header、nav、main、article、aside、footer 这些元素使用边界的理解以及对 h1 层级、图片 alt 文本、表单 label 关联这些细节的敏感度。这道题的实际考法往往是给你一段真实页面的 HTML 结构让你指出哪里语义不对、对 SEO 和屏幕阅读器有什么影响、怎么改。回答的时候不能只说「div 换成 header 就行」要说清楚为什么div 没有语义屏幕阅读器和搜索引擎都无法判断这块内容的角色而 header 直接告诉浏览器「这是页头区域」。另一个高频考点是 meta 标签的用途特别是 viewport 对移动端适配的影响以及 og 协议对分享链接预览的作用。3.2 Css 面试题布局、层叠上下文与动画性能Css 的面试题集中在几个方向盒模型、布局方案、层叠上下文、BFC、动画与性能。盒模型几乎是必考但一般不会直接问 content-box 和 border-box 的区别而是给你一段代码让你算元素的最终宽度。这种题有个天然陷阱box-sizing 是否被全局重置直接决定计算结果。我建议你刷题的时候养成一个习惯凡是涉及宽度的计算题先看代码里有没有设置 box-sizing没有设置就默认 content-box宽度要加上 padding 和 border。布局题里 Flexbox 和 Grid 是两座大山。高频的考法是「实现一个两栏布局左边固定宽度右边自适应」这样的需求题然后面试官会追问「如果用 Flex 怎么写用 Grid 怎么写两种方案在什么场景下选哪个」。你刷这道题时不要只背实现方案要把两种方案的适用边界搞清楚Flexbox 适合一维布局主轴和交叉轴的控制更灵活Grid 适合二维布局对行列的整体把控更强。另外 Css 的层叠上下文也是一个高频失分点面试官会给一个嵌套元素的代码让你判断某个元素的背景色最终是什么这就要你理解 z-index 只在同一个层叠上下文里比较以及 transform、opacity 这些属性会创建新的层叠上下文。3.3 JavaScript 必刷题原型链、事件循环、闭包与手写题JavaScript 是前端面试题里的绝对主力考点密集到可以单独写一本书。但面试官真正高频考察的其实是四个核心原型链与继承、事件循环与异步、闭包与作用域、手写 API 实现。原型链这道题是老牌必考题但问法一直在进化从最早的「new 的过程发生了什么」到现在的「class 继承和构造函数继承有什么区别原型链上如何实现继承」。刷这道题要做的不是背过程而是自己画一遍原型链的指向关系实例的__proto__指向构造函数的prototype构造函数的prototype.constructor指回构造函数本身顺着这条链往上一直能找到Object.prototype。事件循环是一个高频且容易讲不清的考点因为它涉及同步代码、微任务、宏任务的执行顺序。面试官会给一段混合了setTimeout、Promise、async/await的代码让你说出打印顺序。刷题时我建议你自己把这段代码跑一遍然后对着输出结果逆向分析执行顺序比单纯背「微任务先于宏任务」要深刻得多。闭包的考点已经写过这里不再展开重点说一下手写题。手写题是区分度最高的一类题高频的有手写Object.create、手写call/apply/bind、手写防抖节流、手写深拷贝、手写Promise.all。这类题的刷法不能靠背你要理解每个 API 的内部机制。比如手写bind核心是「返回一个新函数且新函数的 this 被绑定支持预设参数支持 new 调用时 this 不被改变」。你要写出这段实现Function.prototype.myBind function (context, ...args) { // 当前调用 myBind 的函数 const fn this; // 返回的新函数兼容 new 调用和普通调用 function bound(...innerArgs) { // new.target 在 new 调用时存在此时 this 由 new 决定不能绑定 const isNew new.target ? this : context; return fn.apply(isNew, [...args, ...innerArgs]); } // 维护原型链让 new bound() 能继承原函数的原型 bound.prototype Object.create(fn.prototype); return bound; };这段实现里有一个关键参数isNew它处理的是 new 调用与普通调用的差异。面试官问「bind 返回的函数能不能被 new」时如果你写不出来这一步就说明你只是背了参考答案。防抖节流的手写题同样要理解场景防抖适合搜索框输入节流适合滚动事件你要能在代码注释里说明两者的触发时机差异这样面试官追问「什么场景用哪个」时你才能接上。3.4 高频手写题的 4 个必调参数与边界条件手写题除了实现功能还有一个维度是边界条件。以深拷贝为例必调参数是是否需要处理循环引用、是否需要拷贝 Symbol 类型的 key、是否需要拷贝函数、是否需要保留原型。大多数参考答案只处理了普通对象和数组不处理循环引用会直接栈溢出。面试时你主动提「这个实现没考虑循环引用我加一个 WeakMap 做缓存」这句话比写完整个深拷贝更加分因为它说明你有边界意识。另一个重量级常客是Promise.all它的边界条件是传入空数组应该返回一个已 resolved 的 Promise、某个 promise reject 时整体 reject、返回的数组顺序要和传入顺序一致。这三个条件缺一个你的实现都有问题。我见过很多候选人在面试时写Promise.all用forEach遍历然后resolve(results)但没处理空数组的情况被面试官一个追问就卡住了。刷题的时候把这些边界条件记在题目旁边比多刷十道新题都管用。4. Vue 与 React 面试题从「会用」讲到「原理」区分度全在这里4.1 Vue 面试题响应式原理、生命周期与组件通信Vue 的面试题可以分成三层使用层、原理层、工程层。使用层的题像「v-if 和 v-show 有什么区别」「computed 和 watch 怎么选」这类题只要用过 Vue 基本都能答。原理层的题才是拉分项最核心的是响应式原理。Vue 2 的Object.defineProperty和 Vue 3 的Proxy有什么区别这个考点基本是绕不过去的。面试官会追问为什么 Vue 3 要换 Proxy数组和对象新增属性的响应式处理有什么不同答这道题的关键是你要理解 Vue 2 的响应式有天然的局限Object.defineProperty只能劫持已有的属性新增属性和删除属性无法被感知所以 Vue 2 才提供了Vue.set和Vue.delete来解决数组的length变化也无法拦截所以 Vue 2 只能通过重写数组方法来实现响应式。Vue 3 的Proxy代理的是整个对象不管属性是否存在都能拦截到 get 和 set 操作所以新增删除都不需要额外的 API。能讲清这个差异比背一句「Proxy 性能更好」有说服力得多。组件通信是另一个高频方向。面试官会给一个场景「组件 A 和组件 B 是兄弟关系怎么通信」你要能列举出至少四种方案props 逐层传递、事件总线Vue 3 中已不推荐、状态管理 Vuex/Pinia、provide/inject。每种方案都要说清适用场景和缺点。props 适合父子直接通信但兄弟之间要经过父组件中转代码会变得啰嗦事件总线在大型项目里会导致事件管理混乱难以追踪Pinia 适合跨层组件共享状态但引入成本高provide/inject 适合祖先和后代之间的定向传递。这四种方案的对比面试官非常喜欢追问你要把选型理由讲出来而不是罗列名字。4.2 React 面试题虚拟 DOM、diff 算法与 hooks 闭包陷阱React 的面试题同样有使用层和原理层之分。原理层的核心是虚拟 DOM 和 diff 算法。面试官通常问「虚拟 DOM 一定比直接操作真实 DOM 快吗」这是个带陷阱的问题标准答案是不一定。虚拟 DOM 的优势不是快而是它把「操作真实 DOM」这件事抽象成了「对比新旧虚拟 DOM 的差异再最小化更新真实 DOM」从而让你不用手写命令式的 DOM 操作。在极简单的场景下直接操作真实 DOM 反而更快因为虚拟 DOM 的 diff 本身也有计算成本。能说出这一层回答就有区分度。diff 算法的核心考点是 key 的作用。面试官会给一个列表渲染的代码问你在列表头部插入元素时没有 key 会有什么问题。原因是React 的 diff 是逐层对比的没有 key 时React 会按索引位置复用元素导致整个列表后面的元素都被误判为「只需要更新内容」可能引发状态错乱或性能问题。配合 key 的追问方向是「用数组 index 做 key 有什么问题」。index 做 key 在列表尾部插入时没问题但在头部插入或删除、排序时索引位置变了key 也跟着变了React 会重新创建元素丢失 DOM 状态。能讲到这个层级的候选人通常会被归入「真正用过 React」的行列。Hooks 的高频题是useEffect的依赖数组和闭包陷阱。面试官会给一段代码问「为什么 count 永远打印 0」这是经典的闭包问题useEffect里的回调函数捕获了它创建时那一次的 count 值依赖数组为空意味着回调只执行一次它记住的永远是初始值。解决方式是给依赖数组加上 count或者用useRef保存最新值。这类题刷起来要配合实际场景去理解我建议你刷完一道 hooks 题就自己写一个最小复现 Demo在浏览器里跑一遍比背答案有用得多。4.3 框架面试题的一个通用答题框架现象 → 原理 → 场景我刷框架题刷到后期总结出一个通用答题框架先说现象再说原理最后落到场景。比如被问「Vue 的 nextTick 有什么用」先答现象修改数据后 DOM 不会立刻更新需要等事件循环的 tick再答原理Vue 的 DOM 更新是异步批量的nextTick 的回调会在更新之后执行再落场景如果你在修改数据后要立刻读取 DOM 元素的高度就必须用 nextTick否则读到的还是旧值。这个框架的好处是它让你的回答有层次面试官不容易打断因为你在按逻辑推演。同一个框架也适用于 React 的题。比如「useCallback 是干什么的」先现象父组件重新渲染时子组件的函数 props 引用会变化触发子组件不必要的重渲染再原理useCallback 会缓存函数引用只有依赖变化时才返回新函数再场景配合 React.memo 使用可以避免子组件被无效渲染。这个框架本质上是让你从「背题」切换到「解题」的思维模式面试官能明显感觉到你是在组织语言而不是背诵稿子。5. 前端面试刷题避坑实录三类题海战术的翻车现场5.1 只刷题库不写代码手写题当场卡壳这是我观察到的最多人踩的坑现象是题库刷了 300 道感觉什么都会面试官让手写一个debounce函数憋了半天只写出一个空壳。原因是手写题的肌肉记忆和看题记忆是两回事看题只要眼睛扫过就能「认识」但手写需要大脑在无参考状态下重新组织思路。解决的办法是每道手写题至少独立写三遍。第一遍照着参考答案抄一遍理解每行代码的作用第二遍合上答案自己写写不出来就停下来对比第三遍隔两天再写写完后用一个小测试用例跑一遍验证功能。这个过程不需要额外的时间投入它就是把「看题」替换成「动手」。5.2 只看 vue 2 的面试题遇到项目用 vue 3 直接懵这是一个非常现实的问题。市面上大量面试题库还是以 Vue 2 为主但很多公司的新项目已经切到 Vue 3 或 React 18 了。现象是候选人答 Vue 2 的生命周期、响应式原理头头是道一问 Vue 3 的 Composition API 和 setup 语法就开始含糊。原因是 Vue 3 的很多设计是推翻了 Vue 2 的方案的比如响应式从 Object.defineProperty 换成 Proxy、选项式 API 和组合式 API 的取舍、this的指向变化。解决的办法是刷题时按版本标注每个知识点都问自己「这个点在 Vue 3 里变了吗」比如 filter 过滤器在 Vue 3 里被移除了事件总线的推荐方案也变了。如果你正在准备的岗位需求里写的是 Vue 3那你刷题时的重心应该放在 Composition API 相关的题目上而不是抱着旧题库啃。5.3 只刷框架题不刷基础题一到递归和算法就翻车前端面试题再卷算法和基础的数据结构题始终占有一定比重。现象是Vue 和 React 的原理题答得行云流水面试官出一道「用 JavaScript 实现一个深扁平化数组」的题就写不出来了。原因是框架原理可以通过背题强行记住但算法和编程能力是练出来的没有捷径。解决的办法是刷题计划里必须留出每天 30 分钟的算法时间专项练递归、数组方法、对象操作这三类高频场景。前端岗的算法题普遍不会太难更不会考复杂的图论但数组去重、扁平化、深拷贝、手写 reduce、字符串反转这类题出现的概率非常高这些能力只能靠写靠背是背不出来的。5.4 背答案时不理解「为什么」追问两轮就露馅这是刷题最隐蔽的坑现象是一道题的回答和参考答案一字不差但面试官换个问法就答不上来。比如你背了「computed 有缓存watch 没有缓存」面试官问「为什么 computed 能缓存」你就愣住了。原因是背答案时只记住了「是什么」没理解「为什么」。解决的办法是刷题时必须多问自己三个问题这个设计解决了什么问题不这样做会怎样这个方案的代价是什么比如 computed 的缓存是因为它依赖的响应式数据没有变化时计算函数不需要重新执行直接返回上次的结果不这样设计的话每次访问都重新计算性能会下降代价是它只能声明式地描述计算逻辑不能像 watch 那样执行副作用。这三个问题答通了这道题才算真正归你。5.5 刷题不写项目场景遇到场景题无话可说现在的前端面试题越来越场景化比如「你的页面首屏加载很慢怎么排查」「一个长列表怎么优化渲染性能」。现象是候选人能答出「懒加载」「虚拟滚动」这些名词但面试官让他展开讲讲怎么落地就说不出来了。原因是刷题时的场景是抽象的没有和真实项目挂钩。解决的办法是每刷一道优化类的题就回自己负责的项目里找到对应的可优化点用这道题的方法做一次真实优化记录优化前后的性能数据。有了真实数据支撑面试时你讲出来的不是一个名词而是一段有数据验证的实践过程说服力完全不在一个层级。这是刷题和实战结合最有效的方式。6. 刷题之后的最后一步用答题结构把「会的」变成「得分」刷题到了后期你会发现自己已经知道大部分考点但面试时的表达质量还是参差不齐。这里有一个我实践很久的技巧把每一道高频题的答案整理成「一句话结论 两个核心点 一个场景案例」的结构。一句话结论让面试官快速捕捉你的答案方向两个核心点展示你知识的纵深一个场景案例证明你实践过。举个例子回答「讲讲事件循环」一句话结论是「JavaScript 是单线程的事件循环是处理异步任务调度的机制」两个核心点是「同步任务先执行微任务先于宏任务」和「每轮事件循环会清空所有的微任务再取一个宏任务」一个场景案例是「页面里的接口请求和用户点击事件之间的执行顺序就是一个典型的事件循环过程」。这个结构练熟之后你会发现不再怕追问因为每一个核心点都可以作为下一轮追问的入口。另外一个值得做的动作是给自己做几轮模拟面试。找同样是前端的同事或朋友让他拿着你整理的知识树随机抽题每次 30 到 40 分钟全程只问不答考察你能否在无提示的情况下连续输出。这个练习暴露的问题比你刷一百道新题暴露的要多得多因为它模拟了真实的面试压力。我每次换工作前都会做至少三轮模拟面试第二轮开始就能明显感觉到表达更流畅了知识盲区也越来越清晰。最后分享一个我自己的习惯刷题这件事我从来不把它当成任务而是当成一次对自己技术体系的体检。每一次面试都是体检报告出来的时刻。不管结果怎么样那些被问住的地方就是你下一个阶段要补的知识缺口与其焦虑不如庆幸因为你在面试里发现了自己真实的能力边界。这个心态会支撑你走得很远。希望今天的这些刷题方法和避坑经验能帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/14 16:57:35 · 阅读 1.2k 前端面试题高效刷法：从背答案到重建知识体系
简介前端面试高频考点全覆盖的刷题资料包面向准备求职的前端开发者和希望系统梳理知识体系的初中级工程师。其中将HTML、CSS、JavaScript、Vue、React、Node、TypeScript、Webpack、算法、网络与安全、浏览器等核心方向整理为独立Markdown笔记并且细化到框架对比、状态管理、构建工具、浏览器原理、前端安全等高频专题便于按技术栈分门别类地查阅和突击。压缩包共28个文件以20个Markdown文档为主体包含完整版精选面试题解析、各专题知识梳理以及逻辑题、ES6语法、HTTP与架构等补充材料另有少量IDE配置与项目说明文件包体仅110KB轻量易用。整体目录结构清晰既能用于考前快速冲刺也适合日常查漏补缺帮助读者在较短时间内覆盖前端面试主流考点。已有249人学习是一份非常实用的前端面试刷题参考。1. 前端面试题详解刷题不是背答案是重新学一遍前端前端面试题这个方向很多人误以为就是背题把网上整理的题库刷一遍面试时撞上原题就稳了。但实际上面试官早就不按套路出题了八股文式的题目越来越多地被场景题、手写题、原理追问替换掉。一份真正值得刷的前端面试题应该是按 Html、Css、JavaScript、Vue、React、Node、TypeScript 这条主线把知识重新串一遍每一道题都能讲清楚「为什么」而不是「是什么」。这篇文章要解决的是怎么让刷题这件事变成你系统的技术复盘而不是考前突击的安慰剂。适合读这篇文章的人是准备跳槽的前端工程师、刚学完框架想验证水平的初学者以及带团队需要做面试题库的资深开发。后面的内容不会贴一份现成的题库给你因为那种题库网上一抓一大把但绝大多数没有讲解、没有追问方向、没有坑点提示。我会按技术栈分层讲清楚每一类题背后的知识密度和回答深度再给你一套能落地的刷题方法和避坑清单让你刷一道题顶别人刷十道。2. 前端面试题的刷题路径先建体系再谈题量2.1 按技术栈把面试题拆成四个递进层次前端面试题的范围看起来很大但如果你按技术栈拆开会发现它其实有非常清晰的分层逻辑。我一般会把面试题分成四个递进层次基础语言层、浏览器与工程化层、框架层、服务端与类型层。基础语言层就是 Html、Css、JavaScript 这三件套浏览器与工程化层涉及 DOM 渲染、事件循环、构建工具框架层是 Vue 和 React 的核心机制与生态服务端与类型层是 Node 和 TypeScript。这样分层有什么用处它决定了你的刷题顺序。很多人在网上看到题就刷今天做一道闭包题明天做一道虚拟 DOM 题后天又去刷 Node 的流处理知识完全是碎片化的。面试官追问的时候碎片化知识撑不住因为追问一定会沿着某个技术点的纵深往下挖。按层次递进去刷每一层先建立主干认知再往细节里钻被追问时你就能顺着主干往下走而不是在碎片里乱撞。2.2 建一份自己的面试题知识树而不是收藏别人的题库我建议你动手建一份自己的面试题知识树用 Markdown 或者思维导图工具都可以。树的根节点是「Web 前端」一级分支就是 Html、Css、JavaScript、Vue、React、Node、TypeScript、浏览器原理、工程化每个一级分支下面再挂你遇到的具体题目。这个动作看起来简单但它逼着你把每一道题归类归类本身就是一次理解。知识树建好之后每刷一道题不要只记答案要在这道题下面挂三个字段核心考点、追问方向、关联题目。核心考点是这道题真正考什么追问方向是你猜面试官会沿着哪个点继续问关联题目是这道题和哪几道题属于同一个知识块。这三个字段会让你从「背题」切换到「建体系」。我见过很多候选人的简历写得很好但一追问就露馅就是因为他刷题的时候只记了答案没建关联知识是孤岛。2.3 用「输出倒逼输入」的方法验证自己是否真的会了这里有个非常实用的验证方法每刷完一道题关掉资料尝试用大白话把这道题讲给一个完全不懂前端的人听。如果对方能听懂说明你真正理解了如果你讲的时候卡壳或者需要翻资料才能讲下去说明这个点还没过脑子。这就是常说的费曼学习法的变体它比反复读答案有效得多因为它强制你的大脑把零散信息组织成逻辑链。举个例子很多人背得出「闭包就是函数内嵌套函数并且内部函数引用了外部函数的变量」但让他手写一个用闭包实现计数的例子他写不出来更说不清闭包和内存泄漏之间的关系。如果你按「输出倒逼输入」的方式来刷这道题你会发现你需要搞明白函数作用域、变量生命周期、引用关系、内存回收机制这四件事全通了你才算真正「会」了闭包。刷题的量不重要这个「通」的过程才是面试时能稳定输出的底气。3. Html、Css、JavaScript 必刷题基础层才是失分重灾区3.1 Html 面试题语义化与页面结构考点不再只是标签Html 在面试题里看起来是最好欺负的但恰恰是很多人丢分的地方。现在的 Html 面试题早就不是「h1 到 h6 分别是什么」这种记忆题了而是围绕语义化、可访问性、SEO 展开的实践题。比如「给出一段没有语义的 div 嵌套页面请你重构成语义化结构」这样的题考的是你对 header、nav、main、article、aside、footer 这些元素使用边界的理解以及对 h1 层级、图片 alt 文本、表单 label 关联这些细节的敏感度。这道题的实际考法往往是给你一段真实页面的 HTML 结构让你指出哪里语义不对、对 SEO 和屏幕阅读器有什么影响、怎么改。回答的时候不能只说「div 换成 header 就行」要说清楚为什么div 没有语义屏幕阅读器和搜索引擎都无法判断这块内容的角色而 header 直接告诉浏览器「这是页头区域」。另一个高频考点是 meta 标签的用途特别是 viewport 对移动端适配的影响以及 og 协议对分享链接预览的作用。3.2 Css 面试题布局、层叠上下文与动画性能Css 的面试题集中在几个方向盒模型、布局方案、层叠上下文、BFC、动画与性能。盒模型几乎是必考但一般不会直接问 content-box 和 border-box 的区别而是给你一段代码让你算元素的最终宽度。这种题有个天然陷阱box-sizing 是否被全局重置直接决定计算结果。我建议你刷题的时候养成一个习惯凡是涉及宽度的计算题先看代码里有没有设置 box-sizing没有设置就默认 content-box宽度要加上 padding 和 border。布局题里 Flexbox 和 Grid 是两座大山。高频的考法是「实现一个两栏布局左边固定宽度右边自适应」这样的需求题然后面试官会追问「如果用 Flex 怎么写用 Grid 怎么写两种方案在什么场景下选哪个」。你刷这道题时不要只背实现方案要把两种方案的适用边界搞清楚Flexbox 适合一维布局主轴和交叉轴的控制更灵活Grid 适合二维布局对行列的整体把控更强。另外 Css 的层叠上下文也是一个高频失分点面试官会给一个嵌套元素的代码让你判断某个元素的背景色最终是什么这就要你理解 z-index 只在同一个层叠上下文里比较以及 transform、opacity 这些属性会创建新的层叠上下文。3.3 JavaScript 必刷题原型链、事件循环、闭包与手写题JavaScript 是前端面试题里的绝对主力考点密集到可以单独写一本书。但面试官真正高频考察的其实是四个核心原型链与继承、事件循环与异步、闭包与作用域、手写 API 实现。原型链这道题是老牌必考题但问法一直在进化从最早的「new 的过程发生了什么」到现在的「class 继承和构造函数继承有什么区别原型链上如何实现继承」。刷这道题要做的不是背过程而是自己画一遍原型链的指向关系实例的__proto__指向构造函数的prototype构造函数的prototype.constructor指回构造函数本身顺着这条链往上一直能找到Object.prototype。事件循环是一个高频且容易讲不清的考点因为它涉及同步代码、微任务、宏任务的执行顺序。面试官会给一段混合了setTimeout、Promise、async/await的代码让你说出打印顺序。刷题时我建议你自己把这段代码跑一遍然后对着输出结果逆向分析执行顺序比单纯背「微任务先于宏任务」要深刻得多。闭包的考点已经写过这里不再展开重点说一下手写题。手写题是区分度最高的一类题高频的有手写Object.create、手写call/apply/bind、手写防抖节流、手写深拷贝、手写Promise.all。这类题的刷法不能靠背你要理解每个 API 的内部机制。比如手写bind核心是「返回一个新函数且新函数的 this 被绑定支持预设参数支持 new 调用时 this 不被改变」。你要写出这段实现Function.prototype.myBind function (context, ...args) { // 当前调用 myBind 的函数 const fn this; // 返回的新函数兼容 new 调用和普通调用 function bound(...innerArgs) { // new.target 在 new 调用时存在此时 this 由 new 决定不能绑定 const isNew new.target ? this : context; return fn.apply(isNew, [...args, ...innerArgs]); } // 维护原型链让 new bound() 能继承原函数的原型 bound.prototype Object.create(fn.prototype); return bound; };这段实现里有一个关键参数isNew它处理的是 new 调用与普通调用的差异。面试官问「bind 返回的函数能不能被 new」时如果你写不出来这一步就说明你只是背了参考答案。防抖节流的手写题同样要理解场景防抖适合搜索框输入节流适合滚动事件你要能在代码注释里说明两者的触发时机差异这样面试官追问「什么场景用哪个」时你才能接上。3.4 高频手写题的 4 个必调参数与边界条件手写题除了实现功能还有一个维度是边界条件。以深拷贝为例必调参数是是否需要处理循环引用、是否需要拷贝 Symbol 类型的 key、是否需要拷贝函数、是否需要保留原型。大多数参考答案只处理了普通对象和数组不处理循环引用会直接栈溢出。面试时你主动提「这个实现没考虑循环引用我加一个 WeakMap 做缓存」这句话比写完整个深拷贝更加分因为它说明你有边界意识。另一个重量级常客是Promise.all它的边界条件是传入空数组应该返回一个已 resolved 的 Promise、某个 promise reject 时整体 reject、返回的数组顺序要和传入顺序一致。这三个条件缺一个你的实现都有问题。我见过很多候选人在面试时写Promise.all用forEach遍历然后resolve(results)但没处理空数组的情况被面试官一个追问就卡住了。刷题的时候把这些边界条件记在题目旁边比多刷十道新题都管用。4. Vue 与 React 面试题从「会用」讲到「原理」区分度全在这里4.1 Vue 面试题响应式原理、生命周期与组件通信Vue 的面试题可以分成三层使用层、原理层、工程层。使用层的题像「v-if 和 v-show 有什么区别」「computed 和 watch 怎么选」这类题只要用过 Vue 基本都能答。原理层的题才是拉分项最核心的是响应式原理。Vue 2 的Object.defineProperty和 Vue 3 的Proxy有什么区别这个考点基本是绕不过去的。面试官会追问为什么 Vue 3 要换 Proxy数组和对象新增属性的响应式处理有什么不同答这道题的关键是你要理解 Vue 2 的响应式有天然的局限Object.defineProperty只能劫持已有的属性新增属性和删除属性无法被感知所以 Vue 2 才提供了Vue.set和Vue.delete来解决数组的length变化也无法拦截所以 Vue 2 只能通过重写数组方法来实现响应式。Vue 3 的Proxy代理的是整个对象不管属性是否存在都能拦截到 get 和 set 操作所以新增删除都不需要额外的 API。能讲清这个差异比背一句「Proxy 性能更好」有说服力得多。组件通信是另一个高频方向。面试官会给一个场景「组件 A 和组件 B 是兄弟关系怎么通信」你要能列举出至少四种方案props 逐层传递、事件总线Vue 3 中已不推荐、状态管理 Vuex/Pinia、provide/inject。每种方案都要说清适用场景和缺点。props 适合父子直接通信但兄弟之间要经过父组件中转代码会变得啰嗦事件总线在大型项目里会导致事件管理混乱难以追踪Pinia 适合跨层组件共享状态但引入成本高provide/inject 适合祖先和后代之间的定向传递。这四种方案的对比面试官非常喜欢追问你要把选型理由讲出来而不是罗列名字。4.2 React 面试题虚拟 DOM、diff 算法与 hooks 闭包陷阱React 的面试题同样有使用层和原理层之分。原理层的核心是虚拟 DOM 和 diff 算法。面试官通常问「虚拟 DOM 一定比直接操作真实 DOM 快吗」这是个带陷阱的问题标准答案是不一定。虚拟 DOM 的优势不是快而是它把「操作真实 DOM」这件事抽象成了「对比新旧虚拟 DOM 的差异再最小化更新真实 DOM」从而让你不用手写命令式的 DOM 操作。在极简单的场景下直接操作真实 DOM 反而更快因为虚拟 DOM 的 diff 本身也有计算成本。能说出这一层回答就有区分度。diff 算法的核心考点是 key 的作用。面试官会给一个列表渲染的代码问你在列表头部插入元素时没有 key 会有什么问题。原因是React 的 diff 是逐层对比的没有 key 时React 会按索引位置复用元素导致整个列表后面的元素都被误判为「只需要更新内容」可能引发状态错乱或性能问题。配合 key 的追问方向是「用数组 index 做 key 有什么问题」。index 做 key 在列表尾部插入时没问题但在头部插入或删除、排序时索引位置变了key 也跟着变了React 会重新创建元素丢失 DOM 状态。能讲到这个层级的候选人通常会被归入「真正用过 React」的行列。Hooks 的高频题是useEffect的依赖数组和闭包陷阱。面试官会给一段代码问「为什么 count 永远打印 0」这是经典的闭包问题useEffect里的回调函数捕获了它创建时那一次的 count 值依赖数组为空意味着回调只执行一次它记住的永远是初始值。解决方式是给依赖数组加上 count或者用useRef保存最新值。这类题刷起来要配合实际场景去理解我建议你刷完一道 hooks 题就自己写一个最小复现 Demo在浏览器里跑一遍比背答案有用得多。4.3 框架面试题的一个通用答题框架现象 → 原理 → 场景我刷框架题刷到后期总结出一个通用答题框架先说现象再说原理最后落到场景。比如被问「Vue 的 nextTick 有什么用」先答现象修改数据后 DOM 不会立刻更新需要等事件循环的 tick再答原理Vue 的 DOM 更新是异步批量的nextTick 的回调会在更新之后执行再落场景如果你在修改数据后要立刻读取 DOM 元素的高度就必须用 nextTick否则读到的还是旧值。这个框架的好处是它让你的回答有层次面试官不容易打断因为你在按逻辑推演。同一个框架也适用于 React 的题。比如「useCallback 是干什么的」先现象父组件重新渲染时子组件的函数 props 引用会变化触发子组件不必要的重渲染再原理useCallback 会缓存函数引用只有依赖变化时才返回新函数再场景配合 React.memo 使用可以避免子组件被无效渲染。这个框架本质上是让你从「背题」切换到「解题」的思维模式面试官能明显感觉到你是在组织语言而不是背诵稿子。5. 前端面试刷题避坑实录三类题海战术的翻车现场5.1 只刷题库不写代码手写题当场卡壳这是我观察到的最多人踩的坑现象是题库刷了 300 道感觉什么都会面试官让手写一个debounce函数憋了半天只写出一个空壳。原因是手写题的肌肉记忆和看题记忆是两回事看题只要眼睛扫过就能「认识」但手写需要大脑在无参考状态下重新组织思路。解决的办法是每道手写题至少独立写三遍。第一遍照着参考答案抄一遍理解每行代码的作用第二遍合上答案自己写写不出来就停下来对比第三遍隔两天再写写完后用一个小测试用例跑一遍验证功能。这个过程不需要额外的时间投入它就是把「看题」替换成「动手」。5.2 只看 vue 2 的面试题遇到项目用 vue 3 直接懵这是一个非常现实的问题。市面上大量面试题库还是以 Vue 2 为主但很多公司的新项目已经切到 Vue 3 或 React 18 了。现象是候选人答 Vue 2 的生命周期、响应式原理头头是道一问 Vue 3 的 Composition API 和 setup 语法就开始含糊。原因是 Vue 3 的很多设计是推翻了 Vue 2 的方案的比如响应式从 Object.defineProperty 换成 Proxy、选项式 API 和组合式 API 的取舍、this的指向变化。解决的办法是刷题时按版本标注每个知识点都问自己「这个点在 Vue 3 里变了吗」比如 filter 过滤器在 Vue 3 里被移除了事件总线的推荐方案也变了。如果你正在准备的岗位需求里写的是 Vue 3那你刷题时的重心应该放在 Composition API 相关的题目上而不是抱着旧题库啃。5.3 只刷框架题不刷基础题一到递归和算法就翻车前端面试题再卷算法和基础的数据结构题始终占有一定比重。现象是Vue 和 React 的原理题答得行云流水面试官出一道「用 JavaScript 实现一个深扁平化数组」的题就写不出来了。原因是框架原理可以通过背题强行记住但算法和编程能力是练出来的没有捷径。解决的办法是刷题计划里必须留出每天 30 分钟的算法时间专项练递归、数组方法、对象操作这三类高频场景。前端岗的算法题普遍不会太难更不会考复杂的图论但数组去重、扁平化、深拷贝、手写 reduce、字符串反转这类题出现的概率非常高这些能力只能靠写靠背是背不出来的。5.4 背答案时不理解「为什么」追问两轮就露馅这是刷题最隐蔽的坑现象是一道题的回答和参考答案一字不差但面试官换个问法就答不上来。比如你背了「computed 有缓存watch 没有缓存」面试官问「为什么 computed 能缓存」你就愣住了。原因是背答案时只记住了「是什么」没理解「为什么」。解决的办法是刷题时必须多问自己三个问题这个设计解决了什么问题不这样做会怎样这个方案的代价是什么比如 computed 的缓存是因为它依赖的响应式数据没有变化时计算函数不需要重新执行直接返回上次的结果不这样设计的话每次访问都重新计算性能会下降代价是它只能声明式地描述计算逻辑不能像 watch 那样执行副作用。这三个问题答通了这道题才算真正归你。5.5 刷题不写项目场景遇到场景题无话可说现在的前端面试题越来越场景化比如「你的页面首屏加载很慢怎么排查」「一个长列表怎么优化渲染性能」。现象是候选人能答出「懒加载」「虚拟滚动」这些名词但面试官让他展开讲讲怎么落地就说不出来了。原因是刷题时的场景是抽象的没有和真实项目挂钩。解决的办法是每刷一道优化类的题就回自己负责的项目里找到对应的可优化点用这道题的方法做一次真实优化记录优化前后的性能数据。有了真实数据支撑面试时你讲出来的不是一个名词而是一段有数据验证的实践过程说服力完全不在一个层级。这是刷题和实战结合最有效的方式。6. 刷题之后的最后一步用答题结构把「会的」变成「得分」刷题到了后期你会发现自己已经知道大部分考点但面试时的表达质量还是参差不齐。这里有一个我实践很久的技巧把每一道高频题的答案整理成「一句话结论 两个核心点 一个场景案例」的结构。一句话结论让面试官快速捕捉你的答案方向两个核心点展示你知识的纵深一个场景案例证明你实践过。举个例子回答「讲讲事件循环」一句话结论是「JavaScript 是单线程的事件循环是处理异步任务调度的机制」两个核心点是「同步任务先执行微任务先于宏任务」和「每轮事件循环会清空所有的微任务再取一个宏任务」一个场景案例是「页面里的接口请求和用户点击事件之间的执行顺序就是一个典型的事件循环过程」。这个结构练熟之后你会发现不再怕追问因为每一个核心点都可以作为下一轮追问的入口。另外一个值得做的动作是给自己做几轮模拟面试。找同样是前端的同事或朋友让他拿着你整理的知识树随机抽题每次 30 到 40 分钟全程只问不答考察你能否在无提示的情况下连续输出。这个练习暴露的问题比你刷一百道新题暴露的要多得多因为它模拟了真实的面试压力。我每次换工作前都会做至少三轮模拟面试第二轮开始就能明显感觉到表达更流畅了知识盲区也越来越清晰。最后分享一个我自己的习惯刷题这件事我从来不把它当成任务而是当成一次对自己技术体系的体检。每一次面试都是体检报告出来的时刻。不管结果怎么样那些被问住的地方就是你下一个阶段要补的知识缺口与其焦虑不如庆幸因为你在面试里发现了自己真实的能力边界。这个心态会支撑你走得很远。希望今天的这些刷题方法和避坑经验能帮到你。本文还有配套的精品资源点击获取