每年一到七八月前端社区就会出现两类声音一类是“岗位变少了简历投出去石沉大海”另一类是“面试题越来越怪不看源码连面试机会都拿不到”。如果你正在准备 2026 年秋招或者社招跳槽大概率已经感受到这种割裂感——技术更新快面试要求高但很多人还停留在背旧题、看老教程的阶段。这篇文章不是让你“背答案”而是帮你建立一套更高效的前端面试准备框架。我会从 2026 年面试题的变化趋势出发把高频考点拆成可以推进的模块JavaScript 原理、Vue/React 框架、浏览器与性能优化、工程化与手写题再到项目深挖和话术准备。每一部分都会给出具体的题目方向、答题思路和容易踩的坑。不管你是在校生找实习还是工作一两年想跳槽只要按这个节奏规划 3 天时间每天集中解决一个模块很多看似零散的知识点会连成网。面试官问你 A 的时候你能主动关联到 B 和 C这才是“速通”的真正含义——不是投机取巧而是高效覆盖。1. 2026 年前端面试到底在考什么先说判断2026 年的前端面试正在从“考你用过什么”变成“考你理解到什么程度”。前几年面试常问“Vue 里 v-if 和 v-show 的区别”“闭包是什么”背熟就能过。现在这些题依然会出现但后面往往跟着一个追问“那 Vue 的 diff 算法为什么是 O(n) 复杂度的你知道它对比的是虚拟 DOM 的什么结构吗”或者“闭包会造成内存泄漏你在项目里是怎么发现和解决的”这类题没有标准答案但考察的是你是否真正理解底层机制。从近期前端面试题的热搜词里也能看出变化前端性能优化、微前端沙箱机制、前端 AI 工具、Worker 上传大文件、RXDB、BPMN 自定义流程——这些已经不是“加分项”而是很多岗位的“默认要求”。尤其是 AI 辅助开发工具的普及面试官越来越关注你是否能高效使用工具同时仍然具备扎实的代码功底。还有一个明显的趋势是场景题比重上升。比如线上页面首屏加载 3 秒你怎么定位和优化后端返回的 token 失效了前端如何统一处理 401用户上传大文件经常失败你会怎么设计上传方案多个业务线都要复用同一个组件你是抽公共包还是做微前端这些题目没有唯一答案但能反映出你有没有做过真实项目、有没有独立解决过线上问题。2026 年备战前端面试重点其实是从“刷题求心理安慰”转向“按主题建立知识体系”。不用去追求冷门偏题怪题——面试官自己大概率也不会问——把高频模块吃透做到能聊、能画、能写、能扩展比什么都强。2. JavaScript 高频八股与底层原理JavaScript 是前端面试的必考模块而且通常放在第一轮氛围也是从这一轮开始升温的。2.1 事件循环Event Loop为什么年年必考事件循环考察的不是死记宏任务微任务顺序而是你是否清楚浏览器里的任务调度全流程。面试官常见问法一段 setTimeout、Promise、async/await 混在一起问你输出顺序。浏览器标签页之间如何通信和事件循环有什么关系。Node.js 环境下的事件循环和浏览器有哪些不同。答题思路建议按这个顺序组织一次事件循环从宏任务队列取一个任务执行执行过程中产生的微任务会进入微任务队列宏任务结束之后会清空所有微任务。然后进入渲染阶段浏览器决定是否重绘接着取下一个宏任务。console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);上面这段代码的输出顺序是script start script end promise1 promise2 setTimeout关键点在于Promise.then 属于微任务会在当前宏任务结束后立即执行setTimeout 是宏任务需要等当前宏任务、微任务队列都清空之后才会从宏任务队列中取出执行。很多人在面试时能答对顺序但被追问“为什么微任务优先级高于宏任务”就卡住了。解释时可以提到微任务通常由同一个脚本内的异步操作产生比如 Promise 回调、MutationObserver浏览器需要保证这些回调尽快执行且之间不插入渲染而宏任务则是独立任务比如定时器、消息事件、I/O执行时机可以延后。2.2 闭包与内存泄漏从概念到场景闭包的经典定义是函数与其词法作用域的组合但面试官现在更喜欢听真实场景。最好用的一个例子是防抖函数function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) { clearTimeout(timer); } timer setTimeout(() { fn.apply(this, args); }, delay); }; }return 出来的闭包函数持有 timer 变量每次调用时可以访问上一次的定时器状态。这里如果 timer 一直得不到释放比如在组件卸载后仍然被引用就可能造成内存泄漏。答题加分点是主动说出来Vue 或 React 项目中如果用户在组件卸载前没有清除定时器、事件监听器或全局状态很容易出现内存问题。2.3 原型链与 this 指向答对不算完还要答出设计意图原型链题目一般比较直接比如function Person(name) { this.name name; } Person.prototype.sayHello function () { console.log(Hello, this.name); }; const p new Person(Alice); p.sayHello();但面试官往往会在你答完之后追问用new创建对象时内部到底发生了什么如果我把Person.prototype.sayHello赋值给一个变量再调用会怎样原型链设计的核心思想是“共享属性”。同类实例都共享同一个 prototype而不是各自复制一份方法这样更节省内存。理解这一点之后你再回答“为什么对象方法写在 prototype 上而不是写在构造函数里”就有底层逻辑支撑了。this 指向口算规则也很实用独立调用严格模式下是 undefined非严格模式指向全局对象。作为对象属性调用指向该对象。call、apply、bind 手动指定。new 绑定优先级最高。箭头函数没有自己的 this沿词法作用域向上找。2.4 ES6 高频考点不是会用而是讲清楚原理面试中常见的 ES6 考点包括 Promise、async/await、解构、扩展运算符、Map/Set、Proxy/Reflect、可选链和空值合并。这里最值得深入准备的是 Promise。至少要能手写一个简化版 Promise.all不仅要写对还要能解释错误处理逻辑function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve([]); return; } promises.forEach((promise, index) { Promise.resolve(promise).then((value) { results[index] value; count; if (count promises.length) { resolve(results); } }).catch((error) { reject(error); }); }); }); }让数组按索引对应结果是一个容易被忽略的细节很多考生写成 push 顺序结果当异步任务完成顺序不一致时就会出 bug。面试官观察到这一点会好感度大增。另一个很常见的追问是 async/await 到底做了什么事。简单理解就是 Generator Promise 的语法糖它让异步代码看起来像同步代码但底层依然是 Promise 的 then 回调链条。3. Vue 与 React 框架的核心追问框架题是面试的重头戏但也是很多人的翻车点。原因很简单会用不等于理解理解不等于能清晰表达。3.1 Vue 响应式原理从 Object.defineProperty 到 ProxyVue 2 的响应式依赖 Object.definePropertyVue 3 改用 Proxy。面试官很喜欢问“为什么要换技术方案”。答题框架可以从三个维度展开性能、能力、维护性。Object.defineProperty 需要遍历对象的每个属性进行劫持对象层级很深时初始化开销大新增或删除对象属性时无法自动触发响应式需要调用 Vue.set 或 Vue.delete。Proxy 则可以直接代理整个对象通过 get、set、deleteProperty 等陷阱函数拦截操作性能更好能力更完整。const target { name: Vue }; const proxy new Proxy(target, { get(obj, key) { console.log(读取, key); return obj[key]; }, set(obj, key, value) { console.log(修改, key, value); obj[key] value; return true; } }); proxy.name React;Vue 3 的 Compiler 还会对模板做静态标记把静态节点提升等优化结合起来运行时 diff 需要处理的节点就大大减少了。这也是 2026 年面试里可以从基础知识自然过渡到性能优化的话题。3.2 虚拟 DOM 与 diff 算法问到什么程度算合格面试官遇到虚拟 DOM 话题时多数会按以下节奏问为什么需要虚拟 DOMdiff 算法的核心思路是什么Vue 3 的 diff 相比 Vue 2 优化了什么直接操作真实 DOM 成本很高虚拟 DOM 是 JavaScript 对象的轻量表示用计算代价换取更少的页面重排和重绘同时为跨端渲染提供了基础。Vue 2 的 diff 针对同层节点比较利用 key 进行复用判断Vue 3 在此基础上增加了静态标记和动态节点追踪只会比较带有 patchFlag 的动态节点性能进一步提升。回答时如果能主动提到“diff 不是一味减少对比而是通过标记分支缩小对比范围”会显得你对前端运行时优化有系统认知。3.3 React 的 Hooks 闭包陷阱如果面试 Vue 岗响应式是必考如果面试 React 岗Hooks 就是重灾区。最常见的题是 useEffect 的依赖数组、useCallback/useMemo 的使用场景以及闭包陷阱。比如function Counter() { const [count, setCount] useState(0); useEffect(() { const timer setInterval(() { setCount(count 1); }, 1000); return () clearInterval(timer); }, []); }这段代码看起来是每秒加一但实际上因为空依赖数组闭包捕获的永远是初始 count0每次都 setCount(1)界面只会从 0 变到 1 然后停止。正确写法是使用函数式更新setCount(prev prev 1);或者依赖数组加上 count。讲解清楚这个细节面试官会认为你不是只会看官方文档而是踩过真实的坑。3.4 Vue3 和 React 微前端沙箱机制从热搜词就能看出来微前端已经是中级前端绕不开的话题。面试官很少直接让你手写沙箱但会问“React 和 Vue 如何同时跑在一个页面上样式、全局变量会不会冲突”。这里的核心答案是 JavaScript 沙箱设计和样式隔离。JavaScript 方面运行时创建代理 window 对象拦截全局变量读写子应用模块内部的所有 window.xxx 都打到代理对象上应用卸载时自动销毁不污染全局环境。CSS 隔离常见方式有 CSS Module、命名空间、动态样式挂载和卸载或者运行时给选择器加统一前缀。答题时可以延伸到 Module Federation现在很多团队用它做微前端和代码共享比 iframe 方案更优雅比 qiankun 方案更灵活。4. 浏览器、网络与前端性能优化这一部分属于“看似会一细问就露馅”的模块。建议重点准备三类问题。4.1 从输入 URL 到页面展示发生了什么这是经典复合题。按阶段拆开回答DNS 解析域名拿到 IP建立 TCP 连接发送 HTTP 请求服务器返回 HTML。浏览器解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树两者合成渲染树执行 JavaScript 脚本最终布局绘制。面试官喜欢在现场追问网站在广州用户在杭州怎样让用户访问更快——CDN。一个页面同时有 20 个图片资源怎么加载更快——懒加载、HTTP/2 多路复用、CDN、压缩格式。脚本放在 head 里会怎样——阻塞解析所以现代站点多用 defer 或 async 加载脚本。4.2 浏览器缓存的完整答题链从强缓存到协商缓存的完整过程浏览器发送请求前检查本地缓存。如果没有发出请求服务器返回资源时带 Cache-Control 和 ETag。浏览器下次请求时如果缓存未过期直接用内存或磁盘缓存如果过期了带上 If-None-Match 或 If-Modified-Since 向服务器询问服务器返回 304 或者 200。这里有一个容易混淆的点Expires 是 HTTP/1.0 的头Cache-Control 是 HTTP/1.1 的头现在以 Cache-Control 为主Expires 作为降级兼容。4.3 性能优化一定要结合自己的项目案例很多候选人在简历上写“使用懒加载技术优化首屏加载”但问一句“怎么看优化效果”就沉默。建议准备一两个真实案例按“现状 - 分析 - 改动 - 结果”的结构讲。可以参考微信大 V 常用的叙事结构先说明业务痛点再讲自己如何定位然后给出具体改动最后放优化后的数据。例如项目里首屏多张大图改造思路可以逐步推进使用 WebP 图片格式和响应式尺寸。滚动到视口附近时再加载图片使用 IntersectionObserver。打包时对首屏路由做代码分割。开启 gzip 或 Brotli 压缩。如果项目没有收集性能数据可以补充说明使用 Performance 面板和 Lighthouse 做基线测量用首屏时间、FCP、LCP 等指标量化。5. 工程化、手写题与综合能力手写题是很多人的心理阴影。其实面试官真正想看的不是你能不能精准写出源码而是代码组织能力、边界处理能力和测试意识。5.1 高频手写题清单建议准备以下题目每道都写到能闭眼复现的程度手写 call、apply、bind。手写防抖、节流。手写深拷贝处理循环引用和 Date、RegExp。手写 Promise.all、Promise.race。手写 instanceof。手写防抖与节流。手写大文件分片上传的小型示例这是面试官越来越爱考的实战题。大文件分片上传是一个非常好的综合题它包含了文件读取、并发控制、进度上报、失败重试等知识点。写一个最小版本const fileInput document.querySelector(#file); const CHUNK_SIZE 1024 * 1024; // 1MB fileInput.addEventListener(change, async (event) { const file event.target.files[0]; const chunks []; let start 0; while (start file.size) { const end Math.min(start CHUNK_SIZE, file.size); chunks.push(file.slice(start, end)); start end; } for (let index 0; index chunks.length; index) { const formData new FormData(); formData.append(chunk, chunks[index]); formData.append(index, index); formData.append(total, chunks.length); formData.append(filename, file.name); // 这里发起上传请求例如 fetch(/upload, { method: POST, body: formData }) } });这样的代码不需要真的跑通后端也能体现工程思维。如果能顺带提到 Worker 里用 FileReader 或 Stream 处理大文件避免主线程卡顿印象分会再上一档。5.2 代码题答错后怎么补救这句话值得反复提醒面试不是考试遇到不会的题可以停下来想而不是急着乱写。讲思路、问边界条件、和面试官确认输入输出任何一步都能体现协作能力。即使最终没写出来面试官也会记得你“思路清晰知道该问什么”。真实场景通常是面试官给一道题不会直接让你写而是说“你先讲讲思路”。这时候不要直接沉默也不要把思路压在脑内可以按以下节奏展开先说明输入输出是什么。再说明核心数据结构或算法复杂度。提出一种简单可行的方案。再提出优化方案。比如“实现一个 LRU 缓存”第一反应是 Map 能维护插入顺序但答案核心是 get 时要把访问过的 key 重新放入末尾set 时如果超过容量要删除最早的元素。先把最简单的 Map 版本写出来再考虑用双向链表加哈希表优化面试官会认为你是可培养的。5.3 TypeScript 与代码质量现在很多前端岗位明确要求 TypeScript。如果简历上写了熟悉 TS至少要能回答这些基础题interface 和 type 有什么区别泛型约束有哪些写法什么是类型收窄如何把一个联合类型转成交叉类型实际项目里的经验可以讲如何使用类型体操减少重复类型声明、如何用 enum/const 枚举管理常量状态、如何让后端返回的数据在前端有强类型约束。这些都会让面试官把你和“只会写业务代码”的候选人区分开。6. 项目深挖与简历准备技巧八股文问题可以靠背但项目深挖是装不出来的。6.1 技术选型背后的为什么面试官问“你们项目为什么用 Vue 不用 React”标准回答是“团队熟悉”或者“业务需要”往往拿不到高分。更好的回答框架是从业务形态、团队技能、生态成熟度、维护成本几个维度回答。这时候即使当时是“跟风选了 Vue”也要反思这个选择在项目中的实际收益从业务出发讲“为什么合适”比“谁更好”更有说服力。6.2 项目里的难点和思考过程准备两到三个真实难点按 STAR 法则组织背景这个功能要给谁用。任务我要解决什么问题。行动我查了哪些替代方案为什么选这个。结果量化效果比如耗时减少、报错率下降、用户完成率提升。很多候选人讲的“难点”实际上只是“没想清楚就动手后来修了 bug”这不算真正的工程难点。真正能打动面试官的是做决定前的分析和备选方案对比。6.3 现在开始把项目文档整理成面试弹药建议在刷题同时做一份自己的面试项目文档。不用写成博客而是把这些问题列出来用自己的话回答一遍并尽量写得具体我负责的模块在系统里的定位我做的这个需求解决了哪些用户痛点我为什么选择这个技术方案线上有问题时我是怎么排查的这是训练表达力的极佳方式也是查漏补缺最快的方法。7. 3 天刷题计划与考前避坑指南7.1 3 天时间表如果时间特别紧张可以采用三天计划每个整天集中一个方向。第一天JavaScript 核心 浏览器网络上午扫一遍事件循环、闭包、this、原型链、Promise。下午过浏览器缓存、渲染流程、输入 URL 到展示的过程。晚上集中做题目比如写防抖、节流、Promise.all并口头复述一遍核心原理。第二天框架专项上午过 Vue 响应式原理、虚拟 DOM、diff 对比、computed 和 watch 区别、组件通信方式。下午过 React Hooks、生命周期、状态管理、HOC 与 Render Props。晚上各花半小时手写一个小 Demo巩固知识点。第三天工程化、项目深挖和模拟面试上午看工程化配置梳理一个真实项目的完整构建流程。下午准备项目里的难点、技术选型、性能优化案例。临考前做一次完整的模拟面试可以请朋友帮忙或自己录屏。7.2 面试过程中的避坑清单不要不懂装懂。可以说“这块我在生产环境没有遇到我的理解是……如果有偏差请您指正”比硬编靠谱一百倍。遇到不会的题不要马上放弃。先跟面试官确认需求再拆小问题哪怕只能说出一个思路也好过直接沉默。主动展示思考过程尤其是在手写题时一边写一边说思路面试官才能评价你的思维过程。主动关联知识点。比如面试官问如何在项目中做防抖你可以从他问到的问题出发自然延伸到闭包、内存清理、事件循环展示知识的系统化。7.3 关于 AI 工具和“前端还有没有出路”从热搜关键词“AI 出来后 前端工程师是不是没了”能看出来最近很多做前端的人都在焦虑。但你认真观察各种招聘需求就会发现市场需要的不是“能仿页面的切图仔”而是“能整合前后端、能利用 AI 工具提升交付效率、能深入理解框架原理的软件工程师”。AI 能辅助写业务代码却很难替代你去做技术选型、界面架构设计、性能调优、异常排查和跨端方案权衡这些能力恰恰是需要你把底层原理吃透才能练出来的。与其焦虑不如把时间用来补齐这些硬核能力。面试确实是高压场景但换个角度想它也是很好的自我检查机会。准备了一堆题没有用真正高效的方式是理解原理结合项目经历形成自己的表达体系。能做到这一点你就不怕面试官怎么换了。3 天时间不多但只要每天都按主题推进不去纠结冷门偏题大概率能在短时间内把状态调到比较好的水平。祝面试顺利Offer 到手。 2026前端面试备战：原理、框架、优化与项目深挖
每年一到七八月前端社区就会出现两类声音一类是“岗位变少了简历投出去石沉大海”另一类是“面试题越来越怪不看源码连面试机会都拿不到”。如果你正在准备 2026 年秋招或者社招跳槽大概率已经感受到这种割裂感——技术更新快面试要求高但很多人还停留在背旧题、看老教程的阶段。这篇文章不是让你“背答案”而是帮你建立一套更高效的前端面试准备框架。我会从 2026 年面试题的变化趋势出发把高频考点拆成可以推进的模块JavaScript 原理、Vue/React 框架、浏览器与性能优化、工程化与手写题再到项目深挖和话术准备。每一部分都会给出具体的题目方向、答题思路和容易踩的坑。不管你是在校生找实习还是工作一两年想跳槽只要按这个节奏规划 3 天时间每天集中解决一个模块很多看似零散的知识点会连成网。面试官问你 A 的时候你能主动关联到 B 和 C这才是“速通”的真正含义——不是投机取巧而是高效覆盖。1. 2026 年前端面试到底在考什么先说判断2026 年的前端面试正在从“考你用过什么”变成“考你理解到什么程度”。前几年面试常问“Vue 里 v-if 和 v-show 的区别”“闭包是什么”背熟就能过。现在这些题依然会出现但后面往往跟着一个追问“那 Vue 的 diff 算法为什么是 O(n) 复杂度的你知道它对比的是虚拟 DOM 的什么结构吗”或者“闭包会造成内存泄漏你在项目里是怎么发现和解决的”这类题没有标准答案但考察的是你是否真正理解底层机制。从近期前端面试题的热搜词里也能看出变化前端性能优化、微前端沙箱机制、前端 AI 工具、Worker 上传大文件、RXDB、BPMN 自定义流程——这些已经不是“加分项”而是很多岗位的“默认要求”。尤其是 AI 辅助开发工具的普及面试官越来越关注你是否能高效使用工具同时仍然具备扎实的代码功底。还有一个明显的趋势是场景题比重上升。比如线上页面首屏加载 3 秒你怎么定位和优化后端返回的 token 失效了前端如何统一处理 401用户上传大文件经常失败你会怎么设计上传方案多个业务线都要复用同一个组件你是抽公共包还是做微前端这些题目没有唯一答案但能反映出你有没有做过真实项目、有没有独立解决过线上问题。2026 年备战前端面试重点其实是从“刷题求心理安慰”转向“按主题建立知识体系”。不用去追求冷门偏题怪题——面试官自己大概率也不会问——把高频模块吃透做到能聊、能画、能写、能扩展比什么都强。2. JavaScript 高频八股与底层原理JavaScript 是前端面试的必考模块而且通常放在第一轮氛围也是从这一轮开始升温的。2.1 事件循环Event Loop为什么年年必考事件循环考察的不是死记宏任务微任务顺序而是你是否清楚浏览器里的任务调度全流程。面试官常见问法一段 setTimeout、Promise、async/await 混在一起问你输出顺序。浏览器标签页之间如何通信和事件循环有什么关系。Node.js 环境下的事件循环和浏览器有哪些不同。答题思路建议按这个顺序组织一次事件循环从宏任务队列取一个任务执行执行过程中产生的微任务会进入微任务队列宏任务结束之后会清空所有微任务。然后进入渲染阶段浏览器决定是否重绘接着取下一个宏任务。console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise1); }).then(() { console.log(promise2); }); console.log(script end);上面这段代码的输出顺序是script start script end promise1 promise2 setTimeout关键点在于Promise.then 属于微任务会在当前宏任务结束后立即执行setTimeout 是宏任务需要等当前宏任务、微任务队列都清空之后才会从宏任务队列中取出执行。很多人在面试时能答对顺序但被追问“为什么微任务优先级高于宏任务”就卡住了。解释时可以提到微任务通常由同一个脚本内的异步操作产生比如 Promise 回调、MutationObserver浏览器需要保证这些回调尽快执行且之间不插入渲染而宏任务则是独立任务比如定时器、消息事件、I/O执行时机可以延后。2.2 闭包与内存泄漏从概念到场景闭包的经典定义是函数与其词法作用域的组合但面试官现在更喜欢听真实场景。最好用的一个例子是防抖函数function debounce(fn, delay 300) { let timer null; return function (...args) { if (timer) { clearTimeout(timer); } timer setTimeout(() { fn.apply(this, args); }, delay); }; }return 出来的闭包函数持有 timer 变量每次调用时可以访问上一次的定时器状态。这里如果 timer 一直得不到释放比如在组件卸载后仍然被引用就可能造成内存泄漏。答题加分点是主动说出来Vue 或 React 项目中如果用户在组件卸载前没有清除定时器、事件监听器或全局状态很容易出现内存问题。2.3 原型链与 this 指向答对不算完还要答出设计意图原型链题目一般比较直接比如function Person(name) { this.name name; } Person.prototype.sayHello function () { console.log(Hello, this.name); }; const p new Person(Alice); p.sayHello();但面试官往往会在你答完之后追问用new创建对象时内部到底发生了什么如果我把Person.prototype.sayHello赋值给一个变量再调用会怎样原型链设计的核心思想是“共享属性”。同类实例都共享同一个 prototype而不是各自复制一份方法这样更节省内存。理解这一点之后你再回答“为什么对象方法写在 prototype 上而不是写在构造函数里”就有底层逻辑支撑了。this 指向口算规则也很实用独立调用严格模式下是 undefined非严格模式指向全局对象。作为对象属性调用指向该对象。call、apply、bind 手动指定。new 绑定优先级最高。箭头函数没有自己的 this沿词法作用域向上找。2.4 ES6 高频考点不是会用而是讲清楚原理面试中常见的 ES6 考点包括 Promise、async/await、解构、扩展运算符、Map/Set、Proxy/Reflect、可选链和空值合并。这里最值得深入准备的是 Promise。至少要能手写一个简化版 Promise.all不仅要写对还要能解释错误处理逻辑function promiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve([]); return; } promises.forEach((promise, index) { Promise.resolve(promise).then((value) { results[index] value; count; if (count promises.length) { resolve(results); } }).catch((error) { reject(error); }); }); }); }让数组按索引对应结果是一个容易被忽略的细节很多考生写成 push 顺序结果当异步任务完成顺序不一致时就会出 bug。面试官观察到这一点会好感度大增。另一个很常见的追问是 async/await 到底做了什么事。简单理解就是 Generator Promise 的语法糖它让异步代码看起来像同步代码但底层依然是 Promise 的 then 回调链条。3. Vue 与 React 框架的核心追问框架题是面试的重头戏但也是很多人的翻车点。原因很简单会用不等于理解理解不等于能清晰表达。3.1 Vue 响应式原理从 Object.defineProperty 到 ProxyVue 2 的响应式依赖 Object.definePropertyVue 3 改用 Proxy。面试官很喜欢问“为什么要换技术方案”。答题框架可以从三个维度展开性能、能力、维护性。Object.defineProperty 需要遍历对象的每个属性进行劫持对象层级很深时初始化开销大新增或删除对象属性时无法自动触发响应式需要调用 Vue.set 或 Vue.delete。Proxy 则可以直接代理整个对象通过 get、set、deleteProperty 等陷阱函数拦截操作性能更好能力更完整。const target { name: Vue }; const proxy new Proxy(target, { get(obj, key) { console.log(读取, key); return obj[key]; }, set(obj, key, value) { console.log(修改, key, value); obj[key] value; return true; } }); proxy.name React;Vue 3 的 Compiler 还会对模板做静态标记把静态节点提升等优化结合起来运行时 diff 需要处理的节点就大大减少了。这也是 2026 年面试里可以从基础知识自然过渡到性能优化的话题。3.2 虚拟 DOM 与 diff 算法问到什么程度算合格面试官遇到虚拟 DOM 话题时多数会按以下节奏问为什么需要虚拟 DOMdiff 算法的核心思路是什么Vue 3 的 diff 相比 Vue 2 优化了什么直接操作真实 DOM 成本很高虚拟 DOM 是 JavaScript 对象的轻量表示用计算代价换取更少的页面重排和重绘同时为跨端渲染提供了基础。Vue 2 的 diff 针对同层节点比较利用 key 进行复用判断Vue 3 在此基础上增加了静态标记和动态节点追踪只会比较带有 patchFlag 的动态节点性能进一步提升。回答时如果能主动提到“diff 不是一味减少对比而是通过标记分支缩小对比范围”会显得你对前端运行时优化有系统认知。3.3 React 的 Hooks 闭包陷阱如果面试 Vue 岗响应式是必考如果面试 React 岗Hooks 就是重灾区。最常见的题是 useEffect 的依赖数组、useCallback/useMemo 的使用场景以及闭包陷阱。比如function Counter() { const [count, setCount] useState(0); useEffect(() { const timer setInterval(() { setCount(count 1); }, 1000); return () clearInterval(timer); }, []); }这段代码看起来是每秒加一但实际上因为空依赖数组闭包捕获的永远是初始 count0每次都 setCount(1)界面只会从 0 变到 1 然后停止。正确写法是使用函数式更新setCount(prev prev 1);或者依赖数组加上 count。讲解清楚这个细节面试官会认为你不是只会看官方文档而是踩过真实的坑。3.4 Vue3 和 React 微前端沙箱机制从热搜词就能看出来微前端已经是中级前端绕不开的话题。面试官很少直接让你手写沙箱但会问“React 和 Vue 如何同时跑在一个页面上样式、全局变量会不会冲突”。这里的核心答案是 JavaScript 沙箱设计和样式隔离。JavaScript 方面运行时创建代理 window 对象拦截全局变量读写子应用模块内部的所有 window.xxx 都打到代理对象上应用卸载时自动销毁不污染全局环境。CSS 隔离常见方式有 CSS Module、命名空间、动态样式挂载和卸载或者运行时给选择器加统一前缀。答题时可以延伸到 Module Federation现在很多团队用它做微前端和代码共享比 iframe 方案更优雅比 qiankun 方案更灵活。4. 浏览器、网络与前端性能优化这一部分属于“看似会一细问就露馅”的模块。建议重点准备三类问题。4.1 从输入 URL 到页面展示发生了什么这是经典复合题。按阶段拆开回答DNS 解析域名拿到 IP建立 TCP 连接发送 HTTP 请求服务器返回 HTML。浏览器解析 HTML 生成 DOM 树解析 CSS 生成 CSSOM 树两者合成渲染树执行 JavaScript 脚本最终布局绘制。面试官喜欢在现场追问网站在广州用户在杭州怎样让用户访问更快——CDN。一个页面同时有 20 个图片资源怎么加载更快——懒加载、HTTP/2 多路复用、CDN、压缩格式。脚本放在 head 里会怎样——阻塞解析所以现代站点多用 defer 或 async 加载脚本。4.2 浏览器缓存的完整答题链从强缓存到协商缓存的完整过程浏览器发送请求前检查本地缓存。如果没有发出请求服务器返回资源时带 Cache-Control 和 ETag。浏览器下次请求时如果缓存未过期直接用内存或磁盘缓存如果过期了带上 If-None-Match 或 If-Modified-Since 向服务器询问服务器返回 304 或者 200。这里有一个容易混淆的点Expires 是 HTTP/1.0 的头Cache-Control 是 HTTP/1.1 的头现在以 Cache-Control 为主Expires 作为降级兼容。4.3 性能优化一定要结合自己的项目案例很多候选人在简历上写“使用懒加载技术优化首屏加载”但问一句“怎么看优化效果”就沉默。建议准备一两个真实案例按“现状 - 分析 - 改动 - 结果”的结构讲。可以参考微信大 V 常用的叙事结构先说明业务痛点再讲自己如何定位然后给出具体改动最后放优化后的数据。例如项目里首屏多张大图改造思路可以逐步推进使用 WebP 图片格式和响应式尺寸。滚动到视口附近时再加载图片使用 IntersectionObserver。打包时对首屏路由做代码分割。开启 gzip 或 Brotli 压缩。如果项目没有收集性能数据可以补充说明使用 Performance 面板和 Lighthouse 做基线测量用首屏时间、FCP、LCP 等指标量化。5. 工程化、手写题与综合能力手写题是很多人的心理阴影。其实面试官真正想看的不是你能不能精准写出源码而是代码组织能力、边界处理能力和测试意识。5.1 高频手写题清单建议准备以下题目每道都写到能闭眼复现的程度手写 call、apply、bind。手写防抖、节流。手写深拷贝处理循环引用和 Date、RegExp。手写 Promise.all、Promise.race。手写 instanceof。手写防抖与节流。手写大文件分片上传的小型示例这是面试官越来越爱考的实战题。大文件分片上传是一个非常好的综合题它包含了文件读取、并发控制、进度上报、失败重试等知识点。写一个最小版本const fileInput document.querySelector(#file); const CHUNK_SIZE 1024 * 1024; // 1MB fileInput.addEventListener(change, async (event) { const file event.target.files[0]; const chunks []; let start 0; while (start file.size) { const end Math.min(start CHUNK_SIZE, file.size); chunks.push(file.slice(start, end)); start end; } for (let index 0; index chunks.length; index) { const formData new FormData(); formData.append(chunk, chunks[index]); formData.append(index, index); formData.append(total, chunks.length); formData.append(filename, file.name); // 这里发起上传请求例如 fetch(/upload, { method: POST, body: formData }) } });这样的代码不需要真的跑通后端也能体现工程思维。如果能顺带提到 Worker 里用 FileReader 或 Stream 处理大文件避免主线程卡顿印象分会再上一档。5.2 代码题答错后怎么补救这句话值得反复提醒面试不是考试遇到不会的题可以停下来想而不是急着乱写。讲思路、问边界条件、和面试官确认输入输出任何一步都能体现协作能力。即使最终没写出来面试官也会记得你“思路清晰知道该问什么”。真实场景通常是面试官给一道题不会直接让你写而是说“你先讲讲思路”。这时候不要直接沉默也不要把思路压在脑内可以按以下节奏展开先说明输入输出是什么。再说明核心数据结构或算法复杂度。提出一种简单可行的方案。再提出优化方案。比如“实现一个 LRU 缓存”第一反应是 Map 能维护插入顺序但答案核心是 get 时要把访问过的 key 重新放入末尾set 时如果超过容量要删除最早的元素。先把最简单的 Map 版本写出来再考虑用双向链表加哈希表优化面试官会认为你是可培养的。5.3 TypeScript 与代码质量现在很多前端岗位明确要求 TypeScript。如果简历上写了熟悉 TS至少要能回答这些基础题interface 和 type 有什么区别泛型约束有哪些写法什么是类型收窄如何把一个联合类型转成交叉类型实际项目里的经验可以讲如何使用类型体操减少重复类型声明、如何用 enum/const 枚举管理常量状态、如何让后端返回的数据在前端有强类型约束。这些都会让面试官把你和“只会写业务代码”的候选人区分开。6. 项目深挖与简历准备技巧八股文问题可以靠背但项目深挖是装不出来的。6.1 技术选型背后的为什么面试官问“你们项目为什么用 Vue 不用 React”标准回答是“团队熟悉”或者“业务需要”往往拿不到高分。更好的回答框架是从业务形态、团队技能、生态成熟度、维护成本几个维度回答。这时候即使当时是“跟风选了 Vue”也要反思这个选择在项目中的实际收益从业务出发讲“为什么合适”比“谁更好”更有说服力。6.2 项目里的难点和思考过程准备两到三个真实难点按 STAR 法则组织背景这个功能要给谁用。任务我要解决什么问题。行动我查了哪些替代方案为什么选这个。结果量化效果比如耗时减少、报错率下降、用户完成率提升。很多候选人讲的“难点”实际上只是“没想清楚就动手后来修了 bug”这不算真正的工程难点。真正能打动面试官的是做决定前的分析和备选方案对比。6.3 现在开始把项目文档整理成面试弹药建议在刷题同时做一份自己的面试项目文档。不用写成博客而是把这些问题列出来用自己的话回答一遍并尽量写得具体我负责的模块在系统里的定位我做的这个需求解决了哪些用户痛点我为什么选择这个技术方案线上有问题时我是怎么排查的这是训练表达力的极佳方式也是查漏补缺最快的方法。7. 3 天刷题计划与考前避坑指南7.1 3 天时间表如果时间特别紧张可以采用三天计划每个整天集中一个方向。第一天JavaScript 核心 浏览器网络上午扫一遍事件循环、闭包、this、原型链、Promise。下午过浏览器缓存、渲染流程、输入 URL 到展示的过程。晚上集中做题目比如写防抖、节流、Promise.all并口头复述一遍核心原理。第二天框架专项上午过 Vue 响应式原理、虚拟 DOM、diff 对比、computed 和 watch 区别、组件通信方式。下午过 React Hooks、生命周期、状态管理、HOC 与 Render Props。晚上各花半小时手写一个小 Demo巩固知识点。第三天工程化、项目深挖和模拟面试上午看工程化配置梳理一个真实项目的完整构建流程。下午准备项目里的难点、技术选型、性能优化案例。临考前做一次完整的模拟面试可以请朋友帮忙或自己录屏。7.2 面试过程中的避坑清单不要不懂装懂。可以说“这块我在生产环境没有遇到我的理解是……如果有偏差请您指正”比硬编靠谱一百倍。遇到不会的题不要马上放弃。先跟面试官确认需求再拆小问题哪怕只能说出一个思路也好过直接沉默。主动展示思考过程尤其是在手写题时一边写一边说思路面试官才能评价你的思维过程。主动关联知识点。比如面试官问如何在项目中做防抖你可以从他问到的问题出发自然延伸到闭包、内存清理、事件循环展示知识的系统化。7.3 关于 AI 工具和“前端还有没有出路”从热搜关键词“AI 出来后 前端工程师是不是没了”能看出来最近很多做前端的人都在焦虑。但你认真观察各种招聘需求就会发现市场需要的不是“能仿页面的切图仔”而是“能整合前后端、能利用 AI 工具提升交付效率、能深入理解框架原理的软件工程师”。AI 能辅助写业务代码却很难替代你去做技术选型、界面架构设计、性能调优、异常排查和跨端方案权衡这些能力恰恰是需要你把底层原理吃透才能练出来的。与其焦虑不如把时间用来补齐这些硬核能力。面试确实是高压场景但换个角度想它也是很好的自我检查机会。准备了一堆题没有用真正高效的方式是理解原理结合项目经历形成自己的表达体系。能做到这一点你就不怕面试官怎么换了。3 天时间不多但只要每天都按主题推进不去纠结冷门偏题大概率能在短时间内把状态调到比较好的水平。祝面试顺利Offer 到手。