8月一到，很多准备跳槽的前端同学又开始焦虑了。打开招聘软件，岗位看着不少，但投出去的简历常常没有回音；好不容易约到面试，一面聊框架、二面问源码、三面手写代码，中间还夹着十几道八股文，稍有不流畅就觉得要凉。更让人心慌的是，网上的“最新前端面试题”铺天盖地，有的来源是培训机构，有的是个人经验帖，版本新旧不一，题目质量参差不齐，刷了三天反而越刷越乱。
这篇文章先说一个明确的判断：前端八股文面试题不是背出来的，是“顺”出来的。
八股文在这几年的求职环境中被反复吐槽，但它的存在有其合理性——当面试官没法在短短 40 分钟内完整考察你的项目能力时，八股文是最廉价的筛选信号：它考察的是你对基础知识的理解深度、表达能力，以及日常有没有持续积累。所以问题不在“要不要刷”，而在“怎么刷”。如果只是背标准答案，大概率面试官追问一句场景题就露馅；但如果你能把八股文串成自己的知识体系，用项目经历去解释每一个原理，这些题反而会成为你展示实力的跳板。
这篇文章会围绕 2026 年前端面试最常见的高频考点，把 JavaScript、浏览器与网络、框架原理、工程化、性能优化这几个核心模块串起来讲，每部分给出高频面试题、答题思路和可以直接用的代码示例，最后再给出一份“3 天速通”的复习计划，以及面试中非常容易被忽略的加分细节。读完后，你不需要再去收藏一堆零散的面试题仓库，按这篇文章的体系把知识点过一遍，再结合自己的项目不断追问，就能比大多数候选人准备得更扎实。
1. 面试官出八股文时，到底在考察什么
先想一个问题：为什么现在前端面试，八股文的占比仍然这么高？
答案其实很现实。前端岗位的简历数量远多于岗位数量，面试官要在有限的时间里判断一个候选人的基础是否扎实，最直接的方式就是问一些“看似简单、实则能无限追问下去”的问题。比如“讲讲 JavaScript 的事件循环”，这句话看起来是常识题，但面试官可以在你回答的过程中逐年加深：宏任务和微任务的执行顺序、Promise 和 setTimeout 的嵌套输出、Node.js 事件循环的差异、如何用事件循环解释 React 18 的调度机制……一个问题就能覆盖从基础到源码的完整知识层次。
所以，八股文考察的从来不是“背题能力”。它考察的是三件事：
- 知识体系是否完整：你是孤立地记住了某个 API，还是能把 JavaScript、浏览器、框架串成一张网。
- 表达能力是否清晰：能不能用简洁的语言把一个复杂原理讲明白，这直接决定你未来在团队里做技术分享、方案评审时的表现。
- 理解深度是否达标：你知道
Object.defineProperty和Proxy的区别，这不算深度；你能说清楚 Vue 3 为什么选择 Proxy、它解决了 Vue 2 响应式系统的哪些缺陷，这才是深度。
明白了这一点，你的复习方式就会发生改变。不要再抱着几百道题的仓库硬啃，而是按照“知识点 → 高频题 → 追问链 → 项目场景”的方式，一个一个模块吃透。
2. JavaScript 核心考点：从闭包到事件循环的高频追问
JavaScript 是前端面试的绝对核心。无论你面的是 Vue 还是 React，JS 基础不扎实，后面全是空中楼阁。
2026 年前端面试中，JavaScript 部分的出题方向已经越来越偏向“原理 + 手写 + 场景”三者结合。下面按频率排序，把最高频的几个知识点拆开讲。
2.1 闭包：不仅仅是一个“能访问外部变量”的函数
闭包是面试中的“入门题”，但也是“劝退题”。很多候选人对闭包的理解停留在“函数嵌套函数，内部函数可以访问外部函数的变量”，这个理解没有错，但太浅了。
你至少要能答出闭包的三个层次：
- 定义：函数在执行时，会创建一个包含函数体内所有变量的作用域链；当内部函数被返回并在外部执行时，它仍然持有对外部函数作用域的引用，这个“引用”就是闭包。
- 用途：创建私有变量、模块化封装、函数柯里化、防抖节流等。
- 风险：闭包会长期占用内存，使用不当会造成内存泄漏，尤其是在 DOM 事件绑定和定时器场景中。
面试官最喜欢问的追问是：“闭包会造成内存泄漏，那为什么还要用？怎么避免？”
这个问题你要答出“引用释放”的关键：闭包本身不是内存泄漏的原因，泄漏是因为闭包引用的对象被持有且不再需要时没有被释放。比如下面的代码：
function assignHandler() { const element = document.getElementById('app'); element.onclick = () => { console.log(element.id); }; }element被匿名函数引用，而匿名函数又被element.onclick引用，形成循环引用。即使element已经不需要了，它也无法被回收。解决办法是在不需要时解除引用：
function assignHandler() { const element = document.getElementById('app'); element.onclick = () => { console.log(element.id); }; element = null; // 手动释放 }在回答时，最后再补一句“在实际 Vue/React 开发中，闭包最常见的体现是组件闭包、事件监听器和定时器，因此清理副作用时要格外注意”，这样就能把八股文和项目经验串起来。
2.2 事件循环：面试分水岭
事件循环是 JavaScript 面试中出现频率最高的问题，没有之一。可以说，问懂事件循环，就能快速判断一个前端工程师对异步编程的理解深度。
标准的回答框架是：
- JavaScript 是单线程的，同步任务按顺序执行。
- 遇到异步任务，交给浏览器或其他宿主环境处理。
- 异步任务完成后，回调事件会被放入任务队列。
- 同步代码执行完毕后，主线程会从任务队列取出任务执行，这个过程是循环的。
但要拿高分，必须进一步说清楚宏任务（macrotask）和微任务（microtask）的区别：
- 宏任务：
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，最后执行宏任务输出2。
如果面试官继续问“Vue 的 nextTick 为什么用微任务”，你还能接着答：目的是在 DOM 更新后尽快执行回调，避免不必要的渲染等待。这样，一道 JavaScript 的事件循环题，就能自然延伸到 Vue 源码，知识网就串起来了。
2.3 this 指向与箭头函数：最容易丢分的题
关于this的题目在 2026 年面试中依然高频，而且已经演化出很多变体。核心考点是：this的指向取决于函数的调用方式，而不是定义方式。
四个主要规则：
- 直接调用函数，
this指向全局对象（浏览器中是window，严格模式下是undefined）。 - 作为对象方法调用，
this指向该对象。 - 通过
call/apply/bind调用，this指向绑定的对象。 - 箭头函数没有自己的
this，它继承外部词法作用域的this。
高频追问是“箭头函数和普通函数的区别是什么”，答案要包含：this指向、不能用做构造函数（没有prototype）、没有arguments对象、不能用于call/apply/bind的this绑定。
更进阶的追问是“如果让你实现一个bind函数，你会怎么写”，这时可以现场写出：
Function.prototype.myBind = function (context, ...args) { const fn = this; return function (...bindArgs) { return fn.apply(context, args.concat(bindArgs)); }; };同时要补充说明：原生bind还有一个特点，支持 new 时this失效。能答到这个层次，基本就是本轮面试的高分候选人。
3. 浏览器与网络：页面渲染、缓存、HTTP 系列高频题
前端面试的第二大重点在浏览器和网络。这个模块的知识点比较分散，但面试官非常喜欢从中抽 1 到 2 题，因为它直接关系到一个开发者的页面性能意识和工程化素养。
3.1 从输入 URL 到页面展示，中间发生了什么
这可能是前端面试中最经典的“综合题”。它不是八股文，但它考察的知识面极广。
回答时可以按阶段拆分：
- URL 解析：浏览器判断协议是否合法，构造请求。
- DNS 解析：域名解析成 IP，涉及多级缓存（浏览器缓存、系统 DNS、运营商 DNS、根服务器）。
- 建立 TCP 连接：三次握手，HTTP/1.1 默认开启 keep-alive，HTTPS 需要额外 TLS 握手。
- 发送 HTTP 请求：请求行、请求头、请求体；服务器返回响应。
- 浏览器渲染：解析 HTML 生成 DOM 树，解析 CSS 生成 CSSOM 树，合并生成渲染树，然后计算布局、绘制、合成。
在这道题中，面试官通常会在浏览器渲染阶段继续深入。比如：
- CSS 是否会阻塞渲染？会。
link标签中的 CSS 是渲染阻塞资源，因为渲染树需要 CSSOM。 script标签是否会阻塞解析？普通脚本会阻塞 HTML 解析，这也是引入defer和async的原因。defer和async的区别是什么？defer会等 DOM 解析完按顺序执行，async是下载完立即执行，不保证顺序。
能把这三个问题答清楚，面试官就会认为你有扎实的浏览器渲染基础。
3.2 浏览器缓存的完整回答
缓存是前端性能优化中最常见的面试问题，也是实际项目中最容易被用错的机制。
需要掌握的知识点包括：
- 强缓存：
Cache-Control（优先级更高）和Expires，浏览器直接使用本地缓存，不发送请求。 - 协商缓存：
Last-Modified/If-Modified-Since和ETag/If-None-Match，浏览器会发送请求到服务器，由服务器决定是否可以使用缓存。 - 缓存位置：memory cache、disk cache、Service Worker 缓存。
面试官最常见的追问是：“如果项目发布了新版本，但用户还是看到旧的 JS 和 CSS，怎么解决？”
标准的回答是：给静态资源的文件名加上内容哈希（如app.8f3k2a.js），新版本文件名变化后，浏览器会重新请求；同时 HTML 文件本身不要设置强缓存（或设置很短的时间），确保能及时获取最新的资源引用。
3.3 HTTP 1.1、HTTP 2、HTTP 3 的演进
这个考点在 2026 年依然重要，因为越来越多的项目开始使用 HTTP/2，而 HTTP/3 也逐渐进入生产环境。
回答时抓住关键差异：
- HTTP/1.1：队头阻塞问题（每个连接同一时间只能处理一个请求），依赖多个 TCP 连接来提升并发。
- HTTP/2：引入多路复用，一个 TCP 连接可以并发多个请求和响应；头部压缩（HPACK）；优先级与依赖关系；服务端推送。
- HTTP/3：基于 QUIC，使用 UDP 协议，从传输层解决队头阻塞问题，减少连接建立延迟。
继续追问时，常会问“HTTP/2 的多路复用解决了队头阻塞，为什么还需要 HTTP/3？”，因为 TCP 层的丢包重传仍然会导致队头阻塞，QUIC 在连接层面做了更好的处理。这个问题往往能区分出候选人掌握的深度。
4. 框架题：Vue 与 React 的高频面试题怎么答
框架题是前端中高级面试的核心板块。Vue 和 React 都是高频考点，但考察角度有明显差异：Vue 侧重响应式原理和模板编译，React 侧重 Fiber 架构和 Hooks 心智模型。
4.1 Vue 3 响应式原理
Vue 3 的面试题，最核心的就是响应式原理。高频题是“Vue 3 的响应式为什么用 Proxy 替代 Object.defineProperty”。
参考答案框架是：
- Vue 2 的局限：
Object.defineProperty只能劫持对象已有属性，新增属性和删除属性无法触发更新；需要通过$set/$delete解决；数组的索引和 length 修改无法直接响应；需要深度遍历所有属性，初始化性能较差。 - Vue 3 的改进：
Proxy可以拦截对象的 13 种操作，支持动态新增属性、删除属性、数组索引等；Reflect配合 Proxy 保证操作语义一致；采用懒代理（只有访问到某个属性时才进行依赖收集），初始化性能更好。
可以补充一下响应式实现的伪代码，说明 dep 和 effect 的关系：
// 简化的响应式核心逻辑 let effect = null; function reactive(target) { return new Proxy(target, { get(obj, key, receiver) { const value = Reflect.get(obj, key, receiver); // 依赖收集 if (effect) { track(obj, key); } return value; }, set(obj, key, value, receiver) { const result = Reflect.set(obj, key, value, receiver); // 触发更新 trigger(obj, key); return result; }, }); }回答时要注意：不要只背结论，要结合“为什么 Vue 3 提升了大规模数据渲染性能”来解释，最好再补一句在项目中使用 Vue 3 的时候，是否遇到过响应式丢失的场景、如何解决。
4.2 Diff 算法与虚拟 DOM
“虚拟 DOM 和 Diff 算法”是框架题的另一大金刚。无论面 Vue 还是 React，都绕不开。
对于 Vue 3，需要掌握的核心点是：
- 虚拟 DOM 是什么：用 JS 对象描述真实 DOM 结构，减少频繁操作真实 DOM 的性能开销。
- Diff 是干什么的：新旧虚拟 DOM 对比，找出差异，最小化更新真实 DOM。
- Vue 3 的 Diff 优化：静态标记（PatchFlags）、动态属性和事件追踪、Block Tree、双端 Diff + 最长递增子序列。
面试官常常追问“虚拟 DOM 一定比真实 DOM 操作更快吗？”，你要能批判性地回答：虚拟 DOM 的优势不是“更快”，而是“保证性能下限”和“让开发者不用手动操作 DOM”，在小规模更新场景下可能不如直接操作 DOM，但在复杂应用中可以避免大量无谓的重排和重绘。
4.3 React Hooks 的核心问题
React 面试最强的考点在 2026 年仍然是 Hooks，尤其是闭包陷阱和状态更新机制。
高频题是“useState 的原理是什么？为什么不能在条件语句中调用 Hooks？”
答题框架：
useState返回一个状态值和更新函数，React 内部通过 Hooks 链表维护每个组件的状态。- Hooks 的调用顺序必须保持稳定，React 依赖调用顺序来将 Hooks 与状态关联。
- 如果在条件语句中调用，会导致顺序变化，React 无法正确对应状态。
另一个高频追问是“useEffect 的依赖数组是怎么工作的”。回答时要说明：Effect 在执行时，React 会比较依赖数组中的每个值是否变化，如果没有变化就跳过；如果传空数组，则只在挂载和卸载时执行。
闭包陷阱的例子则要现场写代码说明：
function Counter() { const [count, setCount] = useState(0); useEffect(() => { const timer = setInterval(() => { console.log(count); // 永远打印 0 }, 1000); return () => clearInterval(timer); }, []); return ( <button onClick={() => setCount(count + 1)}> 点击 {count} 次 </button> ); }这里的问题是：useEffect的空依赖数组导致它只在挂载时执行一次，闭包捕获的count是初始值0。解决办法是把count加入依赖数组，或使用useRef保存最新值。这道题如果答得好，基本就稳过 React 轮次。
5. 工程化与性能优化：区分普通开发与高级工程师的加分项
在 2026 年的前端面试中，纯八股文的比重正在下降，工程化和性能优化的考察比重明显上升。因为项目越来越复杂，团队需要的不只是“会写页面”的工程师，而是“能解决性能问题、能参与工程化建设”的人。
5.1 构建工具：Webpack 与 Vite 的区别
关于构建工具，面试中最常见的问题是“Webpack 和 Vite 的区别，你怎么选”。
答题思路：
- Webpack是打包器，开发启动时需要先打包整个应用，再启动服务；模块越多，启动越慢。
- Vite基于原生 ES Module，开发环境不用打包，直接利用浏览器对 import 的原生支持；按需编译，启动和热更新更快。
- 在生产环境，Vite 默认使用 Rollup 进行打包。
高频追问是“Vite 在开发模式下是怎么处理第三方依赖的”，答案：Vite 预构建依赖（用 esbuild 把 CommonJS 转成 ESM，并合并依赖），同时利用 HTTP 缓存减少重复请求。
不过要注意，面试官真正想听的往往不是两者差异，而是“你的项目为什么会选择某种方案”。所以回答时要结合实际场景：如果项目很复杂、生态以 Webpack 插件为主，保守选择 Webpack；如果追求开发体验和项目是 Vue 3 / React 新项目，Vite 是更现代的选择。
5.2 前端性能优化：首屏加载
性能优化是高级前端面试的必考项。最常见的场景是“首屏加载慢，你怎么排查和优化”。
建议按以下框架回答：
- 测量：用 Lighthouse 或 Performance 面板量化，看看首屏时间是多少。
- 网络层：减少请求数量、启用 CDN、配置缓存、开启 HTTP/2。
- 资源层：图片懒加载、路由级分包、按需加载第三方库、使用 webp/avif 格式。
- 渲染层：避免 CSS 阻塞、减少 JavaScript 执行时间、优化关键渲染路径。
- React/Vue 层：代码分割（import()）、React.memo / Vue computed 的合理使用、列表虚拟化。
5.3 模块化与组件设计
工程化面试常常会往“组件设计”方向延伸。比如“什么是受控组件和非受控组件”“组件通信的方式有哪些”“如何设计一个通用表单组件”。
组件设计的核心是抽象能力。回答时不要只罗列“props 传参、事件派发、provide/inject、状态管理”，而是要结合例子说明：如何确定组件的边界、如何控制 props 的粒度、如何做插槽/children 设计、如何考虑可扩展性和可测试性。
这里需要避开的坑是“过度设计”。面试时可以说：我会优先让组件足够简单、尽量保持数据的单向流向，只在确实需要复用的抽象时再做通用支持。
6. 三天速通计划：八股文复习怎么安排
前面讲了这么多考点，落地才是关键。针对标题里“3 天刷完”的目标，给你一套可执行的复习计划。整套计划的核心不是“背”，而是“建立知识图谱 + 高频题模拟 + 手写代码”。
6.1 第一天：JavaScript + 浏览器 + 网络
上午：JS 核心知识点快速过一遍，重点放在闭包、作用域、this 指向、原型链、事件循环、异步编程（Promise / async-await）。不要追求一次背完，每一块先看定义，再自己用自己的话说一遍，然后看一道经典输出题。
下午：浏览器渲染流程、缓存机制、HTTP 演进串起来看，结合一个具体项目问自己：我的页面里哪些资源可以缓存？哪些请求可以不阻塞渲染？
晚上：做两份 JS 手写题清单，至少覆盖防抖节流、深拷贝、Promise.all、instanceof、bind、数组去重。
// 手写防抖 function debounce(fn, delay = 300) { let timer = null; return function (...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(this, args); }, delay); }; }// 手写节流 function throttle(fn, interval = 300) { let last = 0; return function (...args) { const now = Date.now(); if (now - last >= interval) { last = now; fn.apply(this, args); } }; }代码不需要写得多惊艳，但要能解释每一行在做什么，以及两个工具在真实项目里分别用在什么场景。
6.2 第二天：Vue 与 React 框架原理
上午：把 Vue 3 的响应式原理、生命周期、组件通信、Diff 算法、Composition API 全部过一遍。每讲一个原理，都问自己一个“为什么”：Vue 3 为什么改成了 Composition API？为什么 Proxy 更好？
下午：重点过 React 的 Fiber 架构、Hooks 原理、状态管理、虚拟 DOM、HOC 与 render props。可以画一张对比表，把 Vue 和 React 的生命周期、状态管理方式和模板机制放在一起对比。
晚上：做框架手写题。最常考的包括：实现一个简单的 reactive 函数、实现 useState、实现一个简易的虚拟 DOM diff。哪怕只是能写出思路，也比完全不会强得多。
6.3 第三天：工程化 + 项目经验 + 综合模拟
上午：回顾 Vite / Webpack 配置、模块化、前端工程化规范、微前端、性能优化。不要只看概念，要找一两个自己项目里实际遇到的例子来支撑。
下午：把项目经历重新梳理一遍，重点准备这些能被追问的问题：
- 项目中最难的一个问题是什么？怎么解决的？
- 首屏加载慢是怎么优化的？
- 组件库是怎么设计的？
- 有没有做过权限控制？怎么做的？
晚上：做一次完整的模拟面试。可以录下自己的回答，回放时注意逻辑是否清晰、有没有口头禅、有没有在关键点停顿。
第三天晚上的复习原则是“从容”。把高频题列表拿过来，一道一道用自己的话解释，不用刻意背标准答案。如果一道题解释不清楚，就回到对应章节再读一遍，然后重新输出。
7. 项目经验怎么讲：把八股文变成面试加分项
面试中出现频率最高的一句话是：“你这个项目里，最有挑战的点是什么？”
很多候选人回答得比较干：用了 Vue 3 + Element Plus 做了个后台管理系统，数据是后端接口返回的。这种回答无论是技术含量还是记忆点都太弱了。
好的项目经验讲述方式，是把之前复习的八股文知识融进项目。举个例子：如果项目是后台管理系统，可以选择一个模块讲深讲透，比如“动态路由权限控制”。
你可以这样展开：
项目里有一个权限管理需求，不同角色的用户登录后，能看到不同的菜单和路由。我对比了几种实现方案，最终采用“前端根据角色动态注册路由”的方式。核心思路是：登录后从后端拿到角色标识，前端有一套路由表配置，其中每一个路由都带
meta.roles字段；在router.beforeEach中判断用户角色是否匹配，不匹配则跳转 403 页面。配合 Vuex/Pinia 存储用户信息，刷新页面后重新拉取用户信息和动态路由，从而避免页面刷新后权限丢失的问题。
这样一段话，包含了路由守卫、权限判断、状态管理、持久化、动态路由等多个知识点，每一个点都可以被面试官追问，也显示出你不是只会“调接口写页面”。
在讲项目时还有一个容易忽略的细节：要尽量使用“背景 → 方案 → 坑 → 效果”的结构。
说清楚业务背景是什么，你选择方案时考虑了哪些因素，实施过程中踩了哪些坑，最后效果如何（可以用 Lighthouse 分数、打包体积、接口耗时等量化数据，但必须是真实数据，不能编造）。
8. 2026 年面试风向变化：AI 辅助开发如何影响前端岗位
2026 年的前端面试，和三五年前有一个显著差异：越来越多面试官会关注候选人对 AI 编程工具的使用能力。
在热搜词中，“前端 AI 工具”“AI 出来后前端工程师是不是没了”“前端 AI 开发”都是高频搜索。面试官不会直接让你写“如何用 ChatGPT 开发”，但会从侧面考察：你是否了解 AI 辅助编程的边界、是否能在工作流中高效使用 AI、是否具备用 AI 辅助解决实际问题的判断力。
这部分常见问题包括：
- “你在项目里用过哪些 AI 工具？它帮你解决了什么问题？”
- “AI 写的代码你敢直接用吗？你会怎么验证？”
- “如何设计一个合理的 AI 辅助开发工作流？”
建议在面试前准备一两个真实的使用案例。比如：用 AI 辅助生成表单校验的正则表达式，或者让 AI 生成一个复杂表格组件的初始版本，再由自己 review 和调整。重点不是“工具多强”，而是“你知道工具生成的代码需要经过代码审查、测试和边界验证才能进生产环境”，这体现的是工程素养。
另外，不要因为“AI 能写代码”就放松基础。恰恰相反，AI 越强，面试对候选人的代码理解能力要求越高——因为 AI 可以帮你写，但你必须能看懂、能改、能 debug。这也是八股文不会被完全淘汰的原因。
9. 常见问题与综合排查：面试答题中的高频坑
在准备过程中，很多人会出现“看得懂、说不出来”的情况。这里整理一份面试答题中的常见问题与解决方法，方便你在模拟面时对照检查。
| 问题现象 | 可能原因 | 排查方式 | 解决方案 |
|---|---|---|---|
| 知识点知道但讲不清楚 | 缺少结构化表达 | 先用结论，再分点展开，最后举例 | 按“是什么 → 为什么 → 怎么用”框架组织语言 |
| 面试官追问就卡住 | 只背了标准答案，没有理解底层原理 | 自问“为什么”至少三次 | 每个知识点都自己画一遍逻辑链路 |
| 手写代码写不出来 | 平时只看不练 | 每天固定写 2 到 3 个手写题 | 用“先注释思路，再写代码”方法练习 |
| 项目讲得很平淡 | 没有提炼亮点和技术难点 | 复盘项目中的 bug、性能问题、方案选型 | 每个项目准备 3 个可以深挖的点 |
| 八股文和项目脱节 | 没有主动建立知识关联 | 每复习一个知识点，问“我的项目哪里用到过” | 准备一个“知识点 → 项目场景”映射表 |
| 回答太啰嗦没有重点 | 想覆盖所有内容反而失去结构 | 用总-分-总结构，先给结论 | 限时训练：考虑 30 秒，回答 90 秒 |
10. 核心题型快问快答：收藏备用
最后这一节，把 2026 年前端面试里出现频率最高的几类题目整理成一个速查清单。面试前花 20 分钟过一遍，能在路上快速建立心理框架。
JavaScript 类
- 闭包的定义、用途、风险
- 原型链与 instanceof 的底层原理
- 事件循环机制（宏任务、微任务）
- Promise 的三种状态、Promise.all / allSettled / race 区别
- async/await 原理与错误处理
- 深拷贝与浅拷贝
- 防抖、节流的实现与使用场景
浏览器与网络类
- 从输入 URL 到页面展示的完整过程
- 浏览器缓存机制
- 跨域解决方案（CORS、JSONP、代理）
- HTTP 1.1 / 2 / 3 的核心区别
- 重绘与回流
- WebSocket 与 HTTP 的差异
CSS 相关类
- Flex 布局与 Grid 布局的区别
- BFC 是什么、有什么用
- 层叠上下文
- 居中方案汇总
- 移动端适配方案
框架类
- Vue 3 响应式原理
- Vue 生命周期与 React 生命周期的对比
- Diff 算法优化
- React Hooks 原理与闭包陷阱
- Vuex / Pinia / Redux 状态管理差异
- 组件通信方式
- 虚拟 DOM 的价值与局限
工程化与性能优化类
- 谈谈前端工程化理解
- Webpack 与 Vite 的区别
- 首屏加载优化方案
- 前端监控怎么做
- 微前端方案对比
- 如何设计组件库
这份清单不是为了制造焦虑，而是让你在复习时有一个明确的“覆盖地图”。按第 6 节的三天计划，把每一类题目都过一遍，每道题都能用自己的话说出“是什么、为什么、在项目中怎么落地”，面试的基础盘就非常稳了。
前端面试的三个节奏把握：基础要牢固，项目要讲透，表达要清楚。八股文是打开面试的门，但门后面的路，要靠项目经验和解决问题的能力来走。文章里的知识点和计划只是一个起点，真的去复习、去手写、去模拟，比收藏任何一份“最新题库”都有用得多。
)
