简介面向求职前端岗位的开发者这份资源将高频面试题按技术栈拆解为体系化题库覆盖HTML/CSS、JavaScript/ES6、Vue/React、Node/TypeScript、Webpack、算法、网络与安全、浏览器等核心模块并单独加入Vue3面试热点。压缩包共28个文件以20个Markdown文档为主体按专题拆分题目解析、原理剖析与思路笔记少量配置文件仅用于辅助阅读整体体积仅110KB可轻松存入移动设备随时刷题。目前已有248人学习使用。题库还覆盖移动端、状态管理Vuex/Redux、工程化配置等细分方向每份文档独立成篇方便按需查阅尤其适合碎片化学习。内容既有基础概念与手写代码题也包含逻辑题、HTTP/架构类进阶问题适合校招和社招的“考前冲刺”与查漏补缺章节划分清晰能帮助读者快速定位薄弱环节也可作为面试前一晚的速查清单。 面试这东西准备过和没准备过完全就是两种状态。尤其是前端知识点又多又散今天 Vue 明天 React后天还可能问你 Node 和工程化光靠临时抱佛脚刷题大概率是面完就忘、一追问就露馅。我这些年既被面过也面过人最深的感受就是前端面试没有捷径但绝对有“章法”。如果你正在备战前端岗位或者准备跳槽换一个更好的平台这篇文章我不想给你罗列一份几千题的题库清单而是想和你聊聊一套靠谱的前端面试复习体系应当怎么搭每个技术方向真正值得下功夫的“题眼”在哪里以及那些面试官在题目背后真正想考察的东西到底是什么。无论你现在是什么基础照着这套思路去准备都比漫无目的地刷题要高效得多。1. 面试准备的第一步先看清知识版图的真实轮廓前端面试和其他后端岗位最大的区别在于它的知识面实在太宽了。HTML、CSS 是基本功JavaScript 是核心MVVM 框架是标配网络协议和浏览器原理是分水岭到了中高级岗位还要看 Node.js 和工程化能力。很多人在准备阶段容易陷入一个误区就是拿着题单一题一题背背完就忘、忘完再背最后既浪费时间又没有形成体系。我比较推荐的做法是先拿出一张白纸把下面的知识版图自己画一遍能画出多少算多少画不出来的就是你要重点补的地方第一层是语言基础层包括 HTML 语义化标签、CSS 布局与动画、JavaScript 核心语法和 DOM 操作。第二层是框架应用层Vue 的响应式原理和生命周期、React 的组件渲染机制和 Hooks。第三层是运行原理层包括浏览器渲染过程、事件循环、闭包与作用域链、原型与继承。第四层是工程与网络层涵盖 HTTP 协议、前端安全、构建工具和 Node.js。面试官出的每一道题无论包装成什么形式本质上都在检验这四个层面的某一块拼图是否完整。比如“Vue 中 computed 和 watch 有什么区别”这道经典题表面考的是两个 API 的差异深层考的是你对响应式依赖收集机制是否真的理解。再比如“浏览器从输入 URL 到页面展示发生了什么”看似是一道网络题实则贯穿了 DNS、TCP、HTTP、渲染引擎和 JavaScript 执行这五个层面的知识模块一个人对这道题的作答深度基本能反映出他的整体水平。所以准备面试的第一步不是立刻跑去刷题而是按照这个版图做一次系统的知识架构梳理。有了这张地图你才知道自己现在站在哪里、要去哪里、每条路大概要走多远后续的学习和刷题才能有的放矢。2. 核心技术栈的“题眼”HTML、CSS、JavaScript 的重点题型剖析2.1 HTML别小看语义化这是最容易被低估的送分题HTML 在面试中的占比通常不高但属于“送分题也送命题”的板块。面试官最爱问的就是语义化比如“语义化标签有哪些为什么说要重视语义化”。很多人只会答“header、nav、main、footer”但这只是记住了名字。这道题真正想考察的是你有没有从可访问性、SEO、代码可维护性三个维度理解语义化的价值。拿实际工作场景来说同样的页面结构用div堆出来和用语义化标签搭建对屏幕阅读器的解析效果是完全不同的。语义化标签能够清晰地表达文档结构帮助辅助技术正确识别页面内容和导航层级这对视障用户的体验提升非常关键。在 SEO 层面搜索引擎爬虫也会依据标签语义来理解页面的内容权重这对页面收录和排名都有直接影响。我在面试候选人的时候如果应聘者能主动提到“无障碍访问”这个词通常都会给对方加印象分。另外一个高频考点是doctype的作用也就是!DOCTYPE html这行声明到底是干什么的。这个知识点虽然基础却能看出一个人对浏览器渲染模式的理解。现代 HTML5 的 doctype 声明会让浏览器以标准模式渲染页面而缺失这行声明时浏览器会进入怪异模式导致盒模型解析、行高计算等产生兼容性问题。还有meta标签里charsetutf-8的意义、viewport对移动端适配的影响都属于这一类的经典问题。2.2 CSS从选择器到布局方案再到动画性能进阶CSS 这块可以说是前端面试中波动最大的部分基础岗位可能只问居中方案和盒模型稍微深一点就会问到布局方案选型和动画性能优化。先说盒模型这是绕不过去的第一道关。标准盒模型中width只包含内容区宽度而怪异盒模型IE 盒模型中width包含了内容、内边距和边框。实际开发中建议统一用box-sizing: border-box因为它在宽度计算上更符合直觉在做百分比布局时尤其好用。面试官经常在这个知识点上设置连环追问比如“如果父容器宽度是 100%子元素设置了 padding: 20px 和 border: 1px此时子元素实际占多宽”基础不扎实的人在这里就会露怯。布局方面Flex 布局已经是绝对的主流但面试官往往会更进一步问你 Flex 的经典三栏布局怎么实现。这类题目的考点不仅是代码本身还包括你对flex-grow、flex-shrink、flex-basis三个属性的理解深度。比如中间自适应、两侧定宽的布局正确做法是给两侧设固定宽度中间项设置flex: 1但要真正理解flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写而不是简单的“占满剩余空间”。Grid 布局也是近几年面试中的常客比较常考的是grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))这种响应式栅格的用法。CSS 选择器和伪类的细节也很容易被拿来出题。比如伪类选择器:nth-child()和:nth-of-type()的区别前者是在所有兄弟元素中按顺序匹配后者是先在同类标签中筛选再匹配序号。还有:last-child和:last-of-type的差异以及热词里经常搜到的“倒数第二个元素”怎么写——正确是:nth-last-child(2)。这类题目没什么难度但需要真的用过纯粹背答案很容易记混。动画方面现在面试官也越来越喜欢问“CSS 动画和 JavaScript 动画的区别”以及“如何优化 CSS 动画性能”。这里的关键是理解合成器线程和重排重绘的关系。CSS 动画如果能只触发transform和opacity属性的变化就会由合成器单独处理不涉及布局计算和绘制过程性能会好很多。你可以想到一个很直观的类比重排就像把整个房间的家具全部重新摆放一遍重绘就像把墙重新刷一遍漆而合成就是只换一幅画的位置。能用这个思维去回答动画性能题的人通常会在面试中留下不错的印象。2.3 JavaScript闭包、原型链、事件循环一个都不能少JavaScript 是前端面试的绝对核心占比通常在 40% 以上。整个考点可以浓缩为三个核心关键词闭包、原型链、事件循环。闭包的官方定义是“函数能够访问其定义时所在作用域的能力”但真正理解它需要从执行上下文和作用域链说起。我建议准备这道题的时候至少要能自己写一遍这段代码并解释输出结果for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }这段代码输出什么答案是 5 个 5。原因是var声明的变量是函数作用域循环结束时i已经变成 5而定时器回调执行时读取的是同一个i。改成let声明或者用 IIFE立即执行函数包裹就能正确输出 0 到 4。这类题目考察的是对作用域和执行时机的综合理解是面试中出现频率最高的题型之一。原型和原型链是另一个大坎也是很多人面试翻车的地方。其实用一句话就能把握核心JavaScript 中每个对象都有一个隐藏属性[[Prototype]]访问对象的某个属性时如果对象自身没有就沿着原型链向上查找。Function.prototype和Object.prototype的关系、constructor属性指向谁、ES6 Class 的本质是什么这些都需要静下心来梳理清楚。我见过很多人会把“构造函数、原型、实例”三者的关系在脑子里拧成一团建议准备阶段一定要亲手画一遍三角关系图画明白了这一块基本就稳了。事件循环Event Loop是当前面试中区分度的关键题目。它考察的是对 JavaScript 单线程异步机制的整体理解。核心要记住几个要点宏任务如setTimeout、DOM 事件回调和微任务如 Promise 的then回调、queueMicrotask在事件循环中的执行顺序——每轮事件循环先执行一个宏任务然后清空全部微任务再执行下一个宏任务。这里有一个容易出错的点async函数内部的await之后的部分会作为微任务执行而Promise构造函数中的执行器函数是同步执行的。把这些规则梳理清楚再去刷事件循环的输出题你会发现准确率大幅提升。再有就是this指向问题这是一道必考题也几乎是错题率最高的题。核心规则很简单this的指向在函数调用时确定谁调用了函数this就指向谁。普通函数调用指向全局对象对象方法调用指向该对象new调用指向新实例call、apply、bind显式绑定指向指定对象箭头函数没有自己的this它继承自外部词法作用域。把这些场景各自准备一道例题基本就能把这块知识吃透。3. 框架应用与源码理解Vue 和 React 的高频面试重点3.1 Vue响应式原理、生命周期、路由与状态管理Vue 面试目前的高频考点按照出现频率排序大致是响应式原理、生命周期、Vue 3 新特性、路由、组件通信、状态管理。响应式原理是 Vue 面试中当之无愧的 MVP 题型。Vue 2 是通过Object.defineProperty对数据的每个属性进行劫持带来两个限制无法监听对象新增属性和删除属性以及通过索引修改数组时无法触发视图更新。所以 Vue 2 提供了Vue.set和Vue.delete来解决这个问题。Vue 3 改用 Proxy 代理整个对象能够拦截属性访问、赋值、删除、遍历等更多操作因此完美解决了上述限制。面试中如果能说出 Vue 3 的ref和reactive在实现上的区别以及为什么 Proxy 性能更优、代码更简洁这道题基本就稳了。生命周期也是必考项关键在于理解每个阶段能做什么。比如created时能访问data和methods但还没有渲染 DOMmounted时 DOM 已经挂载完成可以操作 DOMbeforeDestroy是清理定时器和取消事件监听的最后机会。Vue 3 中对应的是onMounted、onUnmounted等组合式 API 的形式同时新增了onActivated和onDeactivated用于处理组件在keep-alive缓存中的激活与失活。热词里常见的“vue 播放 m3u8”也是这类考点的变体本质是在考察mounted后如何初始化视频播放器实例的正确时机。Vue 3 的 Composition API 对比 Options API 也是现在面试的常客。这道题的答题思路非常清晰组合式 API 解决了 Options API 中同一功能的逻辑被拆散在data、methods、computed不同选项中的问题使得相关逻辑可以集中在一个函数中同时也让逻辑复用方式从 mixin 的命名冲突问题中解放出来。如果你的面试目标是中高级岗位建议再准备一下v-model在组件中的实现原理、nextTick的作用机制、keep-alive的实现思路这些进阶内容。3.2 React组件渲染、Hooks 原理和性能优化思路React 面试的核心考点与 Vue 有相似之处但也有明显差异。React 更强调函数式编程思维和不可变数据面试官会更关注你对组件渲染机制的理解。组件通信这部分是 React 的基础问题。父传子用props子传父用回调函数跨层级用 Context复杂场景用 Redux 或 Zutand。但 React 面试的进阶题往往体现在一个核心思路上数据状态应该放在哪个层级。面试官常以“组件树中多个组件需要共享某个状态时如何设计”来考察合理的方案是把状态提升到最近的公共父组件中通过 props 分发。如果追问“这样会导致无关组件不必要的重渲染怎么办”就要引出React.memo和useMemo的使用场景与局限性。Hooks 是 React 面试最大的分水岭。先说useEffect的依赖数组机制空数组表示只在挂载时执行传入依赖则每次依赖变化后执行不传数组则每次渲染后都执行。再深入一点就是为什么 Hooks 不能写在条件语句里——因为 React 需要保证每次渲染时 Hook 的调用顺序完全一致这依赖于一个维护在组件实例上的链表结构条件语句会破坏顺序导致状态对应关系错乱。这个考点很考内功能讲清楚背后机制的人在面试官眼里是具备源码阅读能力的。React 的经典问题还包括key的作用这道题和政治正确性无关纯粹是技术考察。key帮助 React 识别列表中哪些项被新增、删除、修改使用稳定的唯一标识比如数据 ID不使用数组索引是因为索引在列表项增删后会发生错位导致 React 误判组件身份而引发状态错乱。这个我说个真实场景我自己曾经因为偷懒用索引当 key在删除列表中间某一行时发现输入框的草稿内容全部串位了排查了半天才定位到这个原因。React 18 的并发特性也是当前热门的追问方向比如useTransition是什么、StrictMode在开发模式下为什么会让副作用执行两次等。这些内容建议花时间准备因为从热词趋势看React 相关搜索中“react 面经”“react 重点知识”的热度在持续上升。3.3 Vue 与 React 对比这道题几乎必考还有一道几乎必考的题是“Vue 和 React 的区别”。我给出一个答题框架供参考从模板语法上看Vue 使用基于 HTML 扩展的模板语法学习门槛更低React 使用 JSX本质上是在 JavaScript 中书写 UI灵活性更高。从数据响应式上看Vue 基于 Proxy 实现细粒度的依赖追踪数据变化能自动精准更新对应视图React 需要手动调用setState并且会从根组件逐步 diff后续配合 Fiber 和 memo 等手段做优化。从组件通信和状态管理上看两者各有生态方案但 Vue 的响应式数据在开发体验上更“直观”React 则更强调单向数据流和不可变性。这道题没有标准答案面试官要听的其实是你对两种技术路线的思考深度。建议结合自己的实际项目经历来回答比如“我在项目里因为什么原因选择了 Vue 或者 React”有真实场景支撑的回答会比背八股有说服力得多。4. 从基础到进阶TypeScript、Node.js 与工程化高难题4.1 TypeScript类型系统的核心概念与面试套路TypeScript 在面试中的地位逐年上升现在已经从“加分项”变成了不少岗位的“必备项”。高频考点集中在以下几个方向。首先是interface和type的区别。这个问题的标准回答是interface擅长描述对象结构且支持声明合并type更灵活可以定义联合类型、元组、交叉类型等。但两者在很多场景下可以互换面试中能举例说明什么时候用哪个更合适就能体现出真实使用经验。其次是泛型的理解。面试官喜欢让你手写一个通用工具类型比如Pick或者Partial的实现。以Partial为例它可以让类型中所有属性变为可选。用映射类型[K in keyof T]?的方式实现再配合keyof的操作就能推演出来。这类手写题是检验一个人是否真正理解类型编程的试金石建议提前手写几遍Partial、Required、Pick的实现。另外unknown和any的区别也是辨析题热点。核心区别是any绕过了类型检查是类型系统中最大的不确定性unknown表示“未知但安全”使用前必须进行类型收窄。一个合格的前端工程师应该尽量把类型定义精确避免随意使用any这个判断标准是很多公司面试时真正想看的态度。4.2 Node.js事件驱动架构与后端基础入门Node.js 的知识点不必准备得非常深但基础原理必须能讲清楚。最核心的是事件驱动架构。Node.js 的底层是异步 I/O 加事件驱动模型通过回调队列和事件循环机制来避免 I/O 阻塞。面试中可能让你对比 Node.js 的process.nextTick、setImmediate和setTimeout的执行时机这其实是在考察你对 Node.js 事件循环各阶段的理解深度。另一个常见考点是 CommonJS 和 ES Module 的区别。常规回答是同步加载与异步加载、动态导入与静态分析、__dirname在 ESM 中的不可用等。如果你能补充 Tree-Shaking 的依赖基础是 ES Module 的静态结构整体分数会更高。对于目标是全栈方向的候选人建议准备一下基于 Node.js 的 Web 服务端开发经验。包括怎么写简单的中间件、如何处理请求体解析、怎么做简单的鉴权。这些内容在很多社区里都有不错的实战帖可以参照自己动手写一个项目会比较扎实。4.3 工程化与其他高频题从前端安全到构建工具工程化的核心考点是 Webpack 的构建流程和性能优化。常考题包括Loader 和 Plugin 的区别是什么Babel 在其中扮演什么角色如何做代码分割tree shaking的原理是什么。准备这部分内容时如果能顺手了解 Vite 的核心思路——基于浏览器原生 ESM 的 dev server 按需编译回答“为什么 Vite 启动比 Webpack 快”会很有优势。前端安全方面XSS 和 CSRF 属于高频考点。XSS 考察的核心是区分三类存储型、反射型、DOM 型以及对应的防范手段比如对用户输入做转义、使用 CSP 策略。CSRF 的防范则依赖 SameSite Cookie 属性、安全 Token 校验等方式。这部分内容不多但几乎隔几场面试就会遇到。前端常见的热点还包括javascript:void(0)这个老梗主要是经常出现在旧代码里它的作用是执行一个表达式并返回undefined通常用来避免a标签默认跳转。javascript:void(0)可能已经是历史遗留问题了但偶尔还会被当作小细节题来考。5. 刷题方法论与面试实战技巧有了知识点体系之后接下来就是刷题的方式方法问题。刷题不是目的构建反应链路才是目的。我的建议是三轮刷题法第一轮按知识模块刷。每天集中攻一个模块比如今天只做 JavaScript 的闭包和原型链题明天只做 Vue 的响应式和生命周期题。这个阶段的核心是建立模块内的知识关联让同类的知识点在你脑中产生连接。第二轮混合刷。按照面试真实题单的顺序随机抽取不同模块的题目组合训练自己在不同知识块之间快速切换的能力。这个阶段要重点审视自己第一轮漏掉的细节比如搞不清 CSS 伪类选择器和 JavaScript 事件循环的边界感。第三轮模拟面试。找一个小伙伴互相提问把答案口头说出来。这里有一个很重要的经验书面作答和口头表达完全是两回事写出来的答案思路清晰但嘴巴说出来可能会变得非常混乱。一定要对着人或者对着录音说出来然后回放录音复盘你会发现很多自己平时没有意识到的口头禅和逻辑断点。面试实战中还有一个非常重要的技巧就是答题时的结构化表达。比如面试官问“Vue 响应式原理怎么实现的”不要一开始就陷入Proxy的细节而是先说“Vue 3 的响应式可以拆分为三个层面数据代理、依赖收集、触发更新。数据代理是基于 Proxy 实现的依赖收集发生在属性被访问时触发更新发生在属性被修改时”。这个回答结构本身就传递出“我有清晰的思维框架”的信号在技术深度相近的情况下这种表达能力往往是录用的关键因素。还有一个建议是错题归档。准备一个记录文档每做错一道题就把题目、错误原因、正确答案、相关知识点四个字段记录下来。到面试前集中过一遍错题比重新刷整套题要高效得多。我自己当年准备面试时这个错题文档帮我避免了至少三分之一的历史错误在面试中反复出现。6. 写在最后的一些个人建议前端面试的准备周期建议控制在三周到一个月。战线太长容易前学后忘太短又无法建立体系。合理的分配比例大约是 JavaScript 占四成、框架占三成、CSS 和 HTML 占两成、工程化和 Node 占一成。这个比例适用于大部分中高级前端岗的面试。最后分享一个我观察到的细节面试官真正想招的从来不是“什么题都会背”的人而是“遇到不会的题也能有思路”的人。所以在面试中如果遇到不会的题目不要直接说“我不会”而是试着说出你的思考路径。比如“我没有深入看过这个 API 的实现但如果让我推测它应该是在 XX 基础上实现的因为 XX。我平时做项目时遇到类似需求会采用 XX 方案”。这种回答方式展现的是你的分析能力和学习潜力效果远好于生硬地承认不会。如果你能按照前面这套体系坚持准备一个月再配合高质量的面试题反复训练我相信你会对沉下心来踏实准备后的那种底气印象深刻。这不是一周速成可以替代的却是最稳妥、最可靠的一条路。本文还有配套的精品资源点击获取 前端面试有章法：构建高效复习体系，抓住核心题眼
简介面向求职前端岗位的开发者这份资源将高频面试题按技术栈拆解为体系化题库覆盖HTML/CSS、JavaScript/ES6、Vue/React、Node/TypeScript、Webpack、算法、网络与安全、浏览器等核心模块并单独加入Vue3面试热点。压缩包共28个文件以20个Markdown文档为主体按专题拆分题目解析、原理剖析与思路笔记少量配置文件仅用于辅助阅读整体体积仅110KB可轻松存入移动设备随时刷题。目前已有248人学习使用。题库还覆盖移动端、状态管理Vuex/Redux、工程化配置等细分方向每份文档独立成篇方便按需查阅尤其适合碎片化学习。内容既有基础概念与手写代码题也包含逻辑题、HTTP/架构类进阶问题适合校招和社招的“考前冲刺”与查漏补缺章节划分清晰能帮助读者快速定位薄弱环节也可作为面试前一晚的速查清单。 面试这东西准备过和没准备过完全就是两种状态。尤其是前端知识点又多又散今天 Vue 明天 React后天还可能问你 Node 和工程化光靠临时抱佛脚刷题大概率是面完就忘、一追问就露馅。我这些年既被面过也面过人最深的感受就是前端面试没有捷径但绝对有“章法”。如果你正在备战前端岗位或者准备跳槽换一个更好的平台这篇文章我不想给你罗列一份几千题的题库清单而是想和你聊聊一套靠谱的前端面试复习体系应当怎么搭每个技术方向真正值得下功夫的“题眼”在哪里以及那些面试官在题目背后真正想考察的东西到底是什么。无论你现在是什么基础照着这套思路去准备都比漫无目的地刷题要高效得多。1. 面试准备的第一步先看清知识版图的真实轮廓前端面试和其他后端岗位最大的区别在于它的知识面实在太宽了。HTML、CSS 是基本功JavaScript 是核心MVVM 框架是标配网络协议和浏览器原理是分水岭到了中高级岗位还要看 Node.js 和工程化能力。很多人在准备阶段容易陷入一个误区就是拿着题单一题一题背背完就忘、忘完再背最后既浪费时间又没有形成体系。我比较推荐的做法是先拿出一张白纸把下面的知识版图自己画一遍能画出多少算多少画不出来的就是你要重点补的地方第一层是语言基础层包括 HTML 语义化标签、CSS 布局与动画、JavaScript 核心语法和 DOM 操作。第二层是框架应用层Vue 的响应式原理和生命周期、React 的组件渲染机制和 Hooks。第三层是运行原理层包括浏览器渲染过程、事件循环、闭包与作用域链、原型与继承。第四层是工程与网络层涵盖 HTTP 协议、前端安全、构建工具和 Node.js。面试官出的每一道题无论包装成什么形式本质上都在检验这四个层面的某一块拼图是否完整。比如“Vue 中 computed 和 watch 有什么区别”这道经典题表面考的是两个 API 的差异深层考的是你对响应式依赖收集机制是否真的理解。再比如“浏览器从输入 URL 到页面展示发生了什么”看似是一道网络题实则贯穿了 DNS、TCP、HTTP、渲染引擎和 JavaScript 执行这五个层面的知识模块一个人对这道题的作答深度基本能反映出他的整体水平。所以准备面试的第一步不是立刻跑去刷题而是按照这个版图做一次系统的知识架构梳理。有了这张地图你才知道自己现在站在哪里、要去哪里、每条路大概要走多远后续的学习和刷题才能有的放矢。2. 核心技术栈的“题眼”HTML、CSS、JavaScript 的重点题型剖析2.1 HTML别小看语义化这是最容易被低估的送分题HTML 在面试中的占比通常不高但属于“送分题也送命题”的板块。面试官最爱问的就是语义化比如“语义化标签有哪些为什么说要重视语义化”。很多人只会答“header、nav、main、footer”但这只是记住了名字。这道题真正想考察的是你有没有从可访问性、SEO、代码可维护性三个维度理解语义化的价值。拿实际工作场景来说同样的页面结构用div堆出来和用语义化标签搭建对屏幕阅读器的解析效果是完全不同的。语义化标签能够清晰地表达文档结构帮助辅助技术正确识别页面内容和导航层级这对视障用户的体验提升非常关键。在 SEO 层面搜索引擎爬虫也会依据标签语义来理解页面的内容权重这对页面收录和排名都有直接影响。我在面试候选人的时候如果应聘者能主动提到“无障碍访问”这个词通常都会给对方加印象分。另外一个高频考点是doctype的作用也就是!DOCTYPE html这行声明到底是干什么的。这个知识点虽然基础却能看出一个人对浏览器渲染模式的理解。现代 HTML5 的 doctype 声明会让浏览器以标准模式渲染页面而缺失这行声明时浏览器会进入怪异模式导致盒模型解析、行高计算等产生兼容性问题。还有meta标签里charsetutf-8的意义、viewport对移动端适配的影响都属于这一类的经典问题。2.2 CSS从选择器到布局方案再到动画性能进阶CSS 这块可以说是前端面试中波动最大的部分基础岗位可能只问居中方案和盒模型稍微深一点就会问到布局方案选型和动画性能优化。先说盒模型这是绕不过去的第一道关。标准盒模型中width只包含内容区宽度而怪异盒模型IE 盒模型中width包含了内容、内边距和边框。实际开发中建议统一用box-sizing: border-box因为它在宽度计算上更符合直觉在做百分比布局时尤其好用。面试官经常在这个知识点上设置连环追问比如“如果父容器宽度是 100%子元素设置了 padding: 20px 和 border: 1px此时子元素实际占多宽”基础不扎实的人在这里就会露怯。布局方面Flex 布局已经是绝对的主流但面试官往往会更进一步问你 Flex 的经典三栏布局怎么实现。这类题目的考点不仅是代码本身还包括你对flex-grow、flex-shrink、flex-basis三个属性的理解深度。比如中间自适应、两侧定宽的布局正确做法是给两侧设固定宽度中间项设置flex: 1但要真正理解flex: 1是flex-grow: 1; flex-shrink: 1; flex-basis: 0%的简写而不是简单的“占满剩余空间”。Grid 布局也是近几年面试中的常客比较常考的是grid-template-columns: repeat(auto-fill, minmax(200px, 1fr))这种响应式栅格的用法。CSS 选择器和伪类的细节也很容易被拿来出题。比如伪类选择器:nth-child()和:nth-of-type()的区别前者是在所有兄弟元素中按顺序匹配后者是先在同类标签中筛选再匹配序号。还有:last-child和:last-of-type的差异以及热词里经常搜到的“倒数第二个元素”怎么写——正确是:nth-last-child(2)。这类题目没什么难度但需要真的用过纯粹背答案很容易记混。动画方面现在面试官也越来越喜欢问“CSS 动画和 JavaScript 动画的区别”以及“如何优化 CSS 动画性能”。这里的关键是理解合成器线程和重排重绘的关系。CSS 动画如果能只触发transform和opacity属性的变化就会由合成器单独处理不涉及布局计算和绘制过程性能会好很多。你可以想到一个很直观的类比重排就像把整个房间的家具全部重新摆放一遍重绘就像把墙重新刷一遍漆而合成就是只换一幅画的位置。能用这个思维去回答动画性能题的人通常会在面试中留下不错的印象。2.3 JavaScript闭包、原型链、事件循环一个都不能少JavaScript 是前端面试的绝对核心占比通常在 40% 以上。整个考点可以浓缩为三个核心关键词闭包、原型链、事件循环。闭包的官方定义是“函数能够访问其定义时所在作用域的能力”但真正理解它需要从执行上下文和作用域链说起。我建议准备这道题的时候至少要能自己写一遍这段代码并解释输出结果for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 1000); }这段代码输出什么答案是 5 个 5。原因是var声明的变量是函数作用域循环结束时i已经变成 5而定时器回调执行时读取的是同一个i。改成let声明或者用 IIFE立即执行函数包裹就能正确输出 0 到 4。这类题目考察的是对作用域和执行时机的综合理解是面试中出现频率最高的题型之一。原型和原型链是另一个大坎也是很多人面试翻车的地方。其实用一句话就能把握核心JavaScript 中每个对象都有一个隐藏属性[[Prototype]]访问对象的某个属性时如果对象自身没有就沿着原型链向上查找。Function.prototype和Object.prototype的关系、constructor属性指向谁、ES6 Class 的本质是什么这些都需要静下心来梳理清楚。我见过很多人会把“构造函数、原型、实例”三者的关系在脑子里拧成一团建议准备阶段一定要亲手画一遍三角关系图画明白了这一块基本就稳了。事件循环Event Loop是当前面试中区分度的关键题目。它考察的是对 JavaScript 单线程异步机制的整体理解。核心要记住几个要点宏任务如setTimeout、DOM 事件回调和微任务如 Promise 的then回调、queueMicrotask在事件循环中的执行顺序——每轮事件循环先执行一个宏任务然后清空全部微任务再执行下一个宏任务。这里有一个容易出错的点async函数内部的await之后的部分会作为微任务执行而Promise构造函数中的执行器函数是同步执行的。把这些规则梳理清楚再去刷事件循环的输出题你会发现准确率大幅提升。再有就是this指向问题这是一道必考题也几乎是错题率最高的题。核心规则很简单this的指向在函数调用时确定谁调用了函数this就指向谁。普通函数调用指向全局对象对象方法调用指向该对象new调用指向新实例call、apply、bind显式绑定指向指定对象箭头函数没有自己的this它继承自外部词法作用域。把这些场景各自准备一道例题基本就能把这块知识吃透。3. 框架应用与源码理解Vue 和 React 的高频面试重点3.1 Vue响应式原理、生命周期、路由与状态管理Vue 面试目前的高频考点按照出现频率排序大致是响应式原理、生命周期、Vue 3 新特性、路由、组件通信、状态管理。响应式原理是 Vue 面试中当之无愧的 MVP 题型。Vue 2 是通过Object.defineProperty对数据的每个属性进行劫持带来两个限制无法监听对象新增属性和删除属性以及通过索引修改数组时无法触发视图更新。所以 Vue 2 提供了Vue.set和Vue.delete来解决这个问题。Vue 3 改用 Proxy 代理整个对象能够拦截属性访问、赋值、删除、遍历等更多操作因此完美解决了上述限制。面试中如果能说出 Vue 3 的ref和reactive在实现上的区别以及为什么 Proxy 性能更优、代码更简洁这道题基本就稳了。生命周期也是必考项关键在于理解每个阶段能做什么。比如created时能访问data和methods但还没有渲染 DOMmounted时 DOM 已经挂载完成可以操作 DOMbeforeDestroy是清理定时器和取消事件监听的最后机会。Vue 3 中对应的是onMounted、onUnmounted等组合式 API 的形式同时新增了onActivated和onDeactivated用于处理组件在keep-alive缓存中的激活与失活。热词里常见的“vue 播放 m3u8”也是这类考点的变体本质是在考察mounted后如何初始化视频播放器实例的正确时机。Vue 3 的 Composition API 对比 Options API 也是现在面试的常客。这道题的答题思路非常清晰组合式 API 解决了 Options API 中同一功能的逻辑被拆散在data、methods、computed不同选项中的问题使得相关逻辑可以集中在一个函数中同时也让逻辑复用方式从 mixin 的命名冲突问题中解放出来。如果你的面试目标是中高级岗位建议再准备一下v-model在组件中的实现原理、nextTick的作用机制、keep-alive的实现思路这些进阶内容。3.2 React组件渲染、Hooks 原理和性能优化思路React 面试的核心考点与 Vue 有相似之处但也有明显差异。React 更强调函数式编程思维和不可变数据面试官会更关注你对组件渲染机制的理解。组件通信这部分是 React 的基础问题。父传子用props子传父用回调函数跨层级用 Context复杂场景用 Redux 或 Zutand。但 React 面试的进阶题往往体现在一个核心思路上数据状态应该放在哪个层级。面试官常以“组件树中多个组件需要共享某个状态时如何设计”来考察合理的方案是把状态提升到最近的公共父组件中通过 props 分发。如果追问“这样会导致无关组件不必要的重渲染怎么办”就要引出React.memo和useMemo的使用场景与局限性。Hooks 是 React 面试最大的分水岭。先说useEffect的依赖数组机制空数组表示只在挂载时执行传入依赖则每次依赖变化后执行不传数组则每次渲染后都执行。再深入一点就是为什么 Hooks 不能写在条件语句里——因为 React 需要保证每次渲染时 Hook 的调用顺序完全一致这依赖于一个维护在组件实例上的链表结构条件语句会破坏顺序导致状态对应关系错乱。这个考点很考内功能讲清楚背后机制的人在面试官眼里是具备源码阅读能力的。React 的经典问题还包括key的作用这道题和政治正确性无关纯粹是技术考察。key帮助 React 识别列表中哪些项被新增、删除、修改使用稳定的唯一标识比如数据 ID不使用数组索引是因为索引在列表项增删后会发生错位导致 React 误判组件身份而引发状态错乱。这个我说个真实场景我自己曾经因为偷懒用索引当 key在删除列表中间某一行时发现输入框的草稿内容全部串位了排查了半天才定位到这个原因。React 18 的并发特性也是当前热门的追问方向比如useTransition是什么、StrictMode在开发模式下为什么会让副作用执行两次等。这些内容建议花时间准备因为从热词趋势看React 相关搜索中“react 面经”“react 重点知识”的热度在持续上升。3.3 Vue 与 React 对比这道题几乎必考还有一道几乎必考的题是“Vue 和 React 的区别”。我给出一个答题框架供参考从模板语法上看Vue 使用基于 HTML 扩展的模板语法学习门槛更低React 使用 JSX本质上是在 JavaScript 中书写 UI灵活性更高。从数据响应式上看Vue 基于 Proxy 实现细粒度的依赖追踪数据变化能自动精准更新对应视图React 需要手动调用setState并且会从根组件逐步 diff后续配合 Fiber 和 memo 等手段做优化。从组件通信和状态管理上看两者各有生态方案但 Vue 的响应式数据在开发体验上更“直观”React 则更强调单向数据流和不可变性。这道题没有标准答案面试官要听的其实是你对两种技术路线的思考深度。建议结合自己的实际项目经历来回答比如“我在项目里因为什么原因选择了 Vue 或者 React”有真实场景支撑的回答会比背八股有说服力得多。4. 从基础到进阶TypeScript、Node.js 与工程化高难题4.1 TypeScript类型系统的核心概念与面试套路TypeScript 在面试中的地位逐年上升现在已经从“加分项”变成了不少岗位的“必备项”。高频考点集中在以下几个方向。首先是interface和type的区别。这个问题的标准回答是interface擅长描述对象结构且支持声明合并type更灵活可以定义联合类型、元组、交叉类型等。但两者在很多场景下可以互换面试中能举例说明什么时候用哪个更合适就能体现出真实使用经验。其次是泛型的理解。面试官喜欢让你手写一个通用工具类型比如Pick或者Partial的实现。以Partial为例它可以让类型中所有属性变为可选。用映射类型[K in keyof T]?的方式实现再配合keyof的操作就能推演出来。这类手写题是检验一个人是否真正理解类型编程的试金石建议提前手写几遍Partial、Required、Pick的实现。另外unknown和any的区别也是辨析题热点。核心区别是any绕过了类型检查是类型系统中最大的不确定性unknown表示“未知但安全”使用前必须进行类型收窄。一个合格的前端工程师应该尽量把类型定义精确避免随意使用any这个判断标准是很多公司面试时真正想看的态度。4.2 Node.js事件驱动架构与后端基础入门Node.js 的知识点不必准备得非常深但基础原理必须能讲清楚。最核心的是事件驱动架构。Node.js 的底层是异步 I/O 加事件驱动模型通过回调队列和事件循环机制来避免 I/O 阻塞。面试中可能让你对比 Node.js 的process.nextTick、setImmediate和setTimeout的执行时机这其实是在考察你对 Node.js 事件循环各阶段的理解深度。另一个常见考点是 CommonJS 和 ES Module 的区别。常规回答是同步加载与异步加载、动态导入与静态分析、__dirname在 ESM 中的不可用等。如果你能补充 Tree-Shaking 的依赖基础是 ES Module 的静态结构整体分数会更高。对于目标是全栈方向的候选人建议准备一下基于 Node.js 的 Web 服务端开发经验。包括怎么写简单的中间件、如何处理请求体解析、怎么做简单的鉴权。这些内容在很多社区里都有不错的实战帖可以参照自己动手写一个项目会比较扎实。4.3 工程化与其他高频题从前端安全到构建工具工程化的核心考点是 Webpack 的构建流程和性能优化。常考题包括Loader 和 Plugin 的区别是什么Babel 在其中扮演什么角色如何做代码分割tree shaking的原理是什么。准备这部分内容时如果能顺手了解 Vite 的核心思路——基于浏览器原生 ESM 的 dev server 按需编译回答“为什么 Vite 启动比 Webpack 快”会很有优势。前端安全方面XSS 和 CSRF 属于高频考点。XSS 考察的核心是区分三类存储型、反射型、DOM 型以及对应的防范手段比如对用户输入做转义、使用 CSP 策略。CSRF 的防范则依赖 SameSite Cookie 属性、安全 Token 校验等方式。这部分内容不多但几乎隔几场面试就会遇到。前端常见的热点还包括javascript:void(0)这个老梗主要是经常出现在旧代码里它的作用是执行一个表达式并返回undefined通常用来避免a标签默认跳转。javascript:void(0)可能已经是历史遗留问题了但偶尔还会被当作小细节题来考。5. 刷题方法论与面试实战技巧有了知识点体系之后接下来就是刷题的方式方法问题。刷题不是目的构建反应链路才是目的。我的建议是三轮刷题法第一轮按知识模块刷。每天集中攻一个模块比如今天只做 JavaScript 的闭包和原型链题明天只做 Vue 的响应式和生命周期题。这个阶段的核心是建立模块内的知识关联让同类的知识点在你脑中产生连接。第二轮混合刷。按照面试真实题单的顺序随机抽取不同模块的题目组合训练自己在不同知识块之间快速切换的能力。这个阶段要重点审视自己第一轮漏掉的细节比如搞不清 CSS 伪类选择器和 JavaScript 事件循环的边界感。第三轮模拟面试。找一个小伙伴互相提问把答案口头说出来。这里有一个很重要的经验书面作答和口头表达完全是两回事写出来的答案思路清晰但嘴巴说出来可能会变得非常混乱。一定要对着人或者对着录音说出来然后回放录音复盘你会发现很多自己平时没有意识到的口头禅和逻辑断点。面试实战中还有一个非常重要的技巧就是答题时的结构化表达。比如面试官问“Vue 响应式原理怎么实现的”不要一开始就陷入Proxy的细节而是先说“Vue 3 的响应式可以拆分为三个层面数据代理、依赖收集、触发更新。数据代理是基于 Proxy 实现的依赖收集发生在属性被访问时触发更新发生在属性被修改时”。这个回答结构本身就传递出“我有清晰的思维框架”的信号在技术深度相近的情况下这种表达能力往往是录用的关键因素。还有一个建议是错题归档。准备一个记录文档每做错一道题就把题目、错误原因、正确答案、相关知识点四个字段记录下来。到面试前集中过一遍错题比重新刷整套题要高效得多。我自己当年准备面试时这个错题文档帮我避免了至少三分之一的历史错误在面试中反复出现。6. 写在最后的一些个人建议前端面试的准备周期建议控制在三周到一个月。战线太长容易前学后忘太短又无法建立体系。合理的分配比例大约是 JavaScript 占四成、框架占三成、CSS 和 HTML 占两成、工程化和 Node 占一成。这个比例适用于大部分中高级前端岗的面试。最后分享一个我观察到的细节面试官真正想招的从来不是“什么题都会背”的人而是“遇到不会的题也能有思路”的人。所以在面试中如果遇到不会的题目不要直接说“我不会”而是试着说出你的思考路径。比如“我没有深入看过这个 API 的实现但如果让我推测它应该是在 XX 基础上实现的因为 XX。我平时做项目时遇到类似需求会采用 XX 方案”。这种回答方式展现的是你的分析能力和学习潜力效果远好于生硬地承认不会。如果你能按照前面这套体系坚持准备一个月再配合高质量的面试题反复训练我相信你会对沉下心来踏实准备后的那种底气印象深刻。这不是一周速成可以替代的却是最稳妥、最可靠的一条路。本文还有配套的精品资源点击获取