最近把这一年多带人、内推、当面试官攒下来的Web前端面试题重新筛了一遍结合2026年市场上真正在问的高频题整理出这份带答案和解析的版本。说真的前端面试题更新速度比我想象中快很多三年前背的那套“八股文”已经不够用了2026年的考察点明显更重视框架底层理解、工程化实战、性能优化意识还有AI辅助开发在真实项目里的落地能力。这篇文章不是简单堆题我尽量把每道题背后的出题意图讲清楚适合准备跳槽的前端、带新人的组长、以及想自测基础水平的刚入门同学。1. 先把2026年前端面试的重点看明白1.1 面试风向基本功之外更看重什么这两年我面试过很多人一个非常强烈的感受是单纯背答案的人越来越难蒙混过关了。很多公司会把面试题设计成“开放追问式”你答出一个点面试官会继续往下挖三层。比如问你Vue的响应式不是听到Proxy就结束而是继续问“依赖收集具体怎么实现的”“嵌套对象的响应式怎么处理”“为什么不用defineProperty”。2026年的面试重点可以分成四块语言基础JavaScript核心机制包括事件循环、闭包、this、原型链、异步编程。框架原理Vue3和React的底层设计响应式、diff、渲染流程、Hooks机制。工程化与网络构建工具、HTTP、浏览器缓存、模块化这是被很多人忽略但面试爱考的板块。前沿应用AI辅助开发、微前端、跨端方案、性能优化这些题开始大量出现在高级岗位和一部分中低级岗位。还有一个趋势值得注意面试题越来越贴近真实业务场景。以前爱问“数组去重有几种写法”现在会换成“页面渲染一万条数据怎么优化”这种能看出工程思维的问题。后面我会专门把这种业务向的题目并列出来。1.2 什么样的题值得花时间准备我整理这份题目清单时定了三条筛选标准出现频率高十场面试里至少能遇到两三场的题才会收进来。有区分度能有效区分“背过”和“真懂”的题。有标准答案但需要展开答案不能只是一个名词必须能讲清楚“为什么”。按这个标准我把很多偏门冷题砍掉了比如问“CSS选择器优先级怎么计算”有意义但问“IE6的hasLayout是什么”就没必要了。下面这份题目建议你当成自测表来用看到题目先暂停自己在脑子里回答一遍再看解析这样效果最好。1.3 看到一道题时先想面试官在考什么这点很关键。我当面试官的时候每道题背后其实都有明确的考察目标。就拿“输入URL到页面渲染”来说这道题表面考HTTP和浏览器原理实际是想看你有没有分层抽象能力——能不能把网络、渲染、JS执行、资源加载串成一条线。所以后面每道题的解析里我都会多写一段“追问方向”。你在准备的时候别只背答案主干顺着追问方向多准备两三个分支面试的时候会从容很多。2. JavaScript与浏览器基础题2.1 高频基本面从输入URL到页面渲染完整过程题目在浏览器地址栏输入一个网址并回车到页面完全显示中间发生了什么参考答案输入URL并回车浏览器先检查URL格式然后进行DNS解析把域名解析成IP地址。浏览器发起TCP连接请求经过三次握手建立连接如果是HTTPS还要进行TLS握手协商加密密钥。浏览器发送HTTP请求包括请求行、请求头、请求体服务器处理请求并返回响应。浏览器接收到HTML内容后开始解析HTML构建DOM树解析CSS构建CSSOM树。DOM树和CSSOM树合成渲染树Render Tree排除不可见节点。根据渲染树进行布局计算Layout/Reflow确定每个节点的几何位置。进行绘制Paint把像素绘制到屏幕上部分情况下还会经过合成Composite阶段。解析这道题是浏览器原理类的“母题”。面试官真正想看的是你能不能把“网络过程”和“渲染过程”分清楚。我建议回答时把步骤拆成两大块先讲网络请求再讲渲染管线。网络部分重点提“三次握手”“HTTP缓存”的影子渲染部分重点提“DOM树、CSSOM、渲染树”的先后顺序。追问方向“DOM解析过程中遇到script标签会怎样”——会阻塞解析需要等待脚本执行完所以才有defer和async。“什么操作会触发Reflow”——改变元素尺寸、增删DOM、改变窗口大小等。“CSS会阻塞DOM解析吗”——不会阻塞DOM构建但会阻塞渲染树的构建所以CSS要尽早加载JS要滞后执行。2.2 事件循环同步、微任务与宏任务的执行顺序题目下面代码的输出顺序是什么console.log(1); setTimeout(() { console.log(2); }, 0); Promise.resolve().then(() { console.log(3); }); console.log(4);参考答案依次输出 1、4、3、2。解析这是最经典的事件循环题考察对“执行栈、微任务队列、宏任务队列”三层结构的理解。顺序逻辑是当前宏任务整体脚本中的同步代码先执行所以先输出1和4当前宏任务执行完后清空微任务队列所以Promise的then输出3最后才执行下一个宏任务setTimeout输出2。熟练玩家会在回答里主动补充这些细节await后面的代码等价于Promise.then回调属于微任务。requestAnimationFrame既不是宏任务也不是微任务它在渲染之前执行。宏任务包括setTimeout、setInterval、setImmediate、I/O、UI交互事件。微任务包括Promise.then/catch/finally、queueMicrotask、MutationObserver。追问方向如果把setTimeout的延迟时间设为0它会在微任务之前执行吗——不会永远是同步代码和微任务在前。Vue的nextTick基于什么实现——优先使用Promise降级方案包括MutationObserver和setTimeout。2.3 闭包与作用域链不只是“函数内嵌函数”题目什么是闭包闭包会造成内存泄漏吗参考答案闭包是指函数能够访问其外部作用域变量的能力。JavaScript引擎通过作用域链让内部函数可以访问外部函数的变量。常见的闭包形式是“函数返回一个函数”返回的函数保持对外部函数变量的引用即使外部函数已经执行完毕。解析只回答“函数嵌套函数”是及格线想拿高分要讲出三层词法作用域闭包的引用是在定义时确定的不是在调用时确定的。引用关系闭包不是复制变量的值而是保持对变量所在作用域的引用。内存影响闭包确实会让外部函数的变量无法被垃圾回收但如果这个闭包本身不再被引用GC会回收整条作用域链。经典考法还有一个循环中使用var和let打印索引。for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); } // 输出 5、5、5、5、5 for (let i 0; i 5; i) { setTimeout(() console.log(i), 100); } // 输出 0、1、2、3、4解析var没有块级作用域所有延迟回调共享同一个i循环结束后i是5。let每次迭代创建独立的块级作用域闭包捕获的是当前迭代的i。2.4 防抖与节流高频场景和手写代码题目手写一个防抖函数和一个节流函数并说明使用场景。参考答案function debounce(fn, delay 300) { let timer null; return function (...args) { 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); } }; }解析防抖是“最后一次触发后等待delay再执行”适合输入框实时搜索、按钮防止重复提交。节流是“固定时间间隔内最多执行一次”适合滚动监听、resize、拖拽场景。注意这个手写题特别容易忽略两个点。一是this的透传二是事件对象event的透传。如果写成箭头函数或者错误地使用fn()面试官马上能看出你对“执行上下文”理解不够。另外不推荐直接用lodash里的实现死记硬背理解“定时器清除”和“时间戳比较”这两种思路就够了。2.5 原型链与继承从__proto__到class题目解释原型链并说明class继承和构造函数继承的区别。参考答案每个对象都有一个隐式原型[[Prototype]]浏览器中通过__proto__访问每个函数都有prototype属性。访问对象的属性时如果对象本身没有会顺着原型链向上查找直到找到或到达null。class本质是语法糖底层仍然是基于原型链的继承。解析推荐用一段代码把关系图示化function Animal(name) { this.name name; } Animal.prototype.say function () { console.log(this.name); }; class Dog extends Animal { constructor(name) { super(name); this.type dog; } bark() { this.say(); } }Dog.prototype.__proto__ Animal.prototypeDog.__proto__ Animal。注意extends之后必须调用super否则this无法初始化。追问方向Object.create和new的区别是什么Map和Object相比有什么优势如何实现一个私有变量可以用闭包、WeakMap、Symbol等3. CSS进阶题能写还要能讲原理3.1 盒模型与BFC题目说说box-sizing的作用以及什么是BFC怎么触发BFC参考答案content-box是标准盒模型width只包含内容区。border-box是IE盒模型width包含内容、内边距和边框。BFC块级格式化上下文是一个独立的渲染区域内部元素的布局不会影响外部。BFC常见触发方式float不为none、overflow不为visible、display为inline-block/table-cell/flex/grid、position为absolute或fixed。BFC的作用清除浮动造成的高度塌陷。避免margin合并父子外边距重叠。隔离元素防止被外部元素影响布局。解析这道题的价值在于它把CSS的“渲染规则”讲清楚了。我见过太多人只知道“用overflow:hidden清浮动”但说不清为什么。优先用flex/grid布局的inline-block能避免很多BFC触发和margin合并的坑。3.2 垂直居中方案题目已知父子元素尺寸不定请写出尽可能多的水平垂直居中方案。参考答案方案核心代码适用场景Flexdisplay:flex; align-items:center; justify-content:center;现代布局首选Griddisplay:grid; place-items:center;二维居中更简洁绝对定位transformposition:absolute; left:50%; top:50%; transform:translate(-50%,-50%);兼容性好margin auto子元素设置margin:auto配合flex块级元素居中table-celldisplay:table-cell; vertical-align:middle; text-align:center;老项目兜底解析说出两三种就够了重点是明白不同方案的取舍。flex方案会改变父元素的布局方式绝对定位会把元素移出文档流table-cell对子元素宽度有隐形限制。实际项目里我90%的情况用flex或grid很少再用absolute做居中。3.3 Flex与Grid怎么选题目Flex和Grid有什么区别什么场景用哪个参考答案Flex是一维布局主轴交叉轴适合沿一个方向排列元素Grid是二维布局行列适合整体网格结构。解析很多同学把这两个并列看待其实它们针对的是不同问题。导航栏、按钮组、卡片内容对齐用flex整个页面的大框架、复杂宫格、表单区域用grid更清晰。还有一点值得提flex下的子项尺寸分配依赖flex-grow/flex-shrink/flex-basisgrid下用grid-template-columns可以直接定义列宽比例二者思路完全不同。3.4 移动端适配题目移动端页面怎么适配不同屏幕尺寸说下rem和vw的原理。参考答案rem是相对根元素html的字体大小的单位通过JS动态调整根字体大小来适配不同宽度。vw是相对视口宽度的单位100vw等于视口宽度可以直接用vw做尺寸比例。建议viewportmeta设置widthdevice-width, initial-scale1.0。解析2026年很多项目已经直接用vw甚至全面转向flexible布局但rem的兼容性思路还是要懂。我实习时曾遇到一个经典的坑在未设置viewport的页面里用rem写死字体大小结果在高分屏上字体大得离谱。移动端适配不光是单位问题还要注意1px边框、安全区适配env(safe-area-inset-bottom)这些细节。4. Vue3与React框架题4.1 Vue3响应式原理Proxy怎么工作题目Vue3的响应式是基于Proxy实现的请说明依赖收集和派发更新的过程。参考答案reactive通过Proxy包装目标对象在get拦截器里收集依赖把当前正在执行的副作用函数存入依赖集合。在set拦截器里触发依赖执行该属性的所有副作用函数。每个对象在WeakMap里管理属性对应Set类型的依赖集合。ref处理基本类型内部通过{ value: ... }包装读取.value时走同样的get拦截逻辑。解析要答到“副作用函数”这个层面。可以补一句Vue3使用effect函数记录当前活跃的副作用track和trigger分别对应收集和触发。这和Vue2的defineProperty相比解决了数组索引修改、属性动态新增无法监听的问题性能也更优。追问方向reactive能代理Map、Set吗——可以Proxy的get拦截会返回经过包装的集合方法。watch和computed底层区别是什么——都是基于effect但computed会缓存并且懒执行。4.2 diff算法为什么不直接用innerHTML题目讲解虚拟DOM和diff算法Vue3的diff做了哪些优化参考答案虚拟DOM是用JavaScript对象模拟真实DOM结构通过对比新旧虚拟DOM的差异最小化真实DOM操作。Vue2使用双端比较Vue3在双端比较的基础上增加了“最长递增子序列”算法处理相同key元素的复用减少移动操作。React的diff偏向从左往右逐个比较key存在时尽量复用节点。解析如果有精力把“diff是O(n)级别”的原因讲出来只在同一层级比较不跨层同一层通过key判断是否可复用不同类型元素直接替换。面试官听到“同层比较”就会知道你读过源码。4.3 key的作用一个常被忽略的隐藏考点题目列表渲染时为什么要加key用index作为key会有什么问题参考答案key是虚拟节点的唯一标识diff算法通过key判断节点是否复用。用index作为key时如果数组插入或删除元素index会整体变化导致组件状态错乱比如输入框内容串行。解析最典型的例子是列表头部插入一条数据原本index为0的组件状态会被错误地复用给新元素。解决办法是使用业务唯一id没有id时再考虑用内容哈希或index兜底。4.4 React Hooks闭包陷阱与依赖数组题目useEffect的依赖数组是干什么的为什么有时setInterval拿不到最新state参考答案useEffect在依赖项变化时才重新执行副作用。setInterval拿不到最新state是经典的闭包陷阱interval回调捕获了首次渲染时的state快照后续更新state不会改变回调里的引用。解决方法包括在依赖数组中传入state、使用setState(prev ...)函数式更新或用useRef保存最新值。解析Hooks题现在几乎是React必考。建议再准备一个自定义Hooks的例子比如useDebouncefunction useDebounce(value, delay 300) { const [debounced, setDebounced] useState(value); useEffect(() { const timer setTimeout(() setDebounced(value), delay); return () clearTimeout(timer); }, [value, delay]); return debounced; }这段代码能同时体现“Hooks复用”“清理副作用”“闭包”三个考点。4.5 组件通信方案盘点题目Vue父子组件通信有哪些方式跨层级组件通信你怎么做参考答案propsemit父子通信。v-model/defineModel子组件修改父组件数据。provide/inject祖先组件向任意后代注入数据。ref/expose父组件直接访问子组件实例。状态管理库Pinia/Vuex/Redux/Zustand。全局事件总线适合简单跨模块通信不推荐大型项目使用。解析在React里对应的是props、Context、状态管理库、ref转发。面试时主动加一句“会根据耦合度选择方案”会显得有工程判断力。4.6 状态管理怎么选题目Pinia和Vuex相比有什么优势React的状态管理你选哪个参考答案Pinia更轻量去掉了mutation直接在action里修改state天然支持TSstore之间可以互相引用。React项目如果是中小型推荐ZustandAPI简单且没有额外的Provider包裹大型项目用Redux Toolkit配合immer处理不可变更新。解析面试官问状态管理往往是想知道你有没有“为什么不用全局state”的判断。补充说明“不是所有数据都放store服务端数据优先放请求缓存如React Query”会直接上加分。5. 网络与工程化题5.1 HTTP缓存机制题目浏览器HTTP缓存有哪些类型强缓存和协商缓存如何配合参考答案强缓存请求不会到达服务器直接从本地缓存读取。相关响应头是Cache-Control如max-age和Expires。协商缓存请求会到达服务器服务器判断资源是否变化返回304或无变化状态码让浏览器使用本地缓存。相关头是Last-Modified/If-Modified-Since和ETag/If-None-Match。解析优先级上Cache-Control优先于ExpiresETag优先于Last-Modified。放静态资源的实践做法HTML不缓存或短缓存JS/CSS文件名带hash长缓存。这样代码升级时文件名变化会强制拉新资源。5.2 HTTPS的加密过程题目HTTPS为什么安全简述TLS握手流程。参考答案HTTPS在HTTP和TCP之间加了TLS层通过混合加密保障安全握手阶段用非对称加密协商出对称密钥后续数据用对称加密传输配合数字证书验证服务器身份。解析理解“混合加密”是关键。对称加密快但密钥分发不安全非对称加密安全但慢两者结合是性能与安全的平衡点。回答时提到CA证书的作用——防止中间人伪造身份——就能把这道题答完整。5.3 模块化规范对比题目CommonJS、AMD、ESM有什么区别参考答案CommonJSNode环境使用同步加载module.exports导出require导入。ESM浏览器和Node都支持静态分析import/export支持tree-shaking。AMD/CMD老一代浏览器模块方案异步加载现在很少新用。ESM的import是编译时静态导入CommonJS的require是运行时动态导入。解析这个题现在问得越来越多背后是“打包优化”意识。能说出“ESM是静态的所以打包器可以做tree-shakingCommonJS是动态的很难做”就是满分答案。5.4 webpack和vite到底怎么选题目webpack和vite的核心区别为什么vite开发环境快参考答案webpack启动时会把所有模块打包成bundle模块越多启动越慢。vite利用浏览器原生ESM开发环境启动一个轻量的静态服务器按需编译加载依赖预构建用esbuildGo编写比webpack的JS打包快得多。生产环境vite默认用Rollup打包webpack生态更成熟。解析这个题需要区分“开发环境”和“生产环境”两个口径。答出“vite快在开发时按需编译而不是把上千个模块全部转译”就是核心。顺带提tree shaking和source map也是加分项。6. 性能优化与安全6.1 首屏加载优化清单题目页面首屏加载慢你会从哪些方向排查和优化参考答案体积维度压缩图片、Code Splitting拆包、tree-shaking、开启gzip/br压缩。请求维度减少请求数量、HTTP缓存、CDN、合并接口。渲染维度SSR/SSG、骨架屏、避免主线程长任务阻塞。资源加载策略路由懒加载、组件异步加载、图片懒加载、preload/prefetch。解析回答顺序最好从“用户感知”反推DNS解析慢就是CDN和预解析请求慢就是缓存和合并渲染慢就是SSR和懒加载。实际项目里我常用的指标是LCP最大内容绘制和FCP首次内容绘制排查时先锁定指标再动手。6.2 defer和async到底有什么区别题目script标签的defer和async有何区别参考答案没有属性脚本下载和执行都会阻塞HTML解析。async脚本异步下载下载完成后立即执行执行阶段会阻塞HTML解析多个async脚本执行顺序不确定。defer脚本异步下载等HTML解析完之后按书写顺序执行。解析一句话记忆async是下载异步、执行阻塞defer是下载和执行都尽量不阻塞解析。要加载第三方统计脚本用async要保证执行顺序的依赖脚本用defer。6.3 XSS和CSRF怎么防御题目说说XSS和CSRF的原理和常见防御方案。参考答案XSS恶意脚本通过输入输出被注入并执行。防御手段对用户输入做转义、使用CSP限制脚本来源、Cookie设置HttpOnly、对DOM操作使用textContent而不是innerHTML。CSRF利用用户已登录的身份发起跨站请求。防御手段校验Origin/Referer、使用CSRF Token、Cookie设置SameSite、关键操作二次验证。解析安全题考察的是“边界意识”。面试时我不要求背出所有OWASP条目但能说出“前端能做的是转义和CSP后端必须做Token校验”就说明有实战经验了。7. 手写代码题7.1 实现一个简版Promise / Promise.all题目请用代码实现一个Promise.all。参考答案function myPromiseAll(promises) { return new Promise((resolve, reject) { const results []; let count 0; if (promises.length 0) { resolve(results); return; } promises.forEach((p, index) { Promise.resolve(p).then((value) { results[index] value; count; if (count promises.length) { resolve(results); } }, reject); }); }); }解析关键点是结果顺序和输入顺序一一对应而不是按完成时间排序。另一个易漏点是每个值先用Promise.resolve包一层保证参数不是Promise时也能正常处理。面试官如果问“其中一个reject了怎么办”就能顺势讲出allSettled和race的区别。7.2 深拷贝别只写JSON题目如何实现一个深拷贝JSON.parse(JSON.stringify(obj))有什么缺陷参考答案function deepClone(value, cache new WeakMap()) { if (value null || typeof value ! object) return value; if (cache.has(value)) return cache.get(value); if (value instanceof Date) return new Date(value); if (value instanceof RegExp) return new RegExp(value); const result Array.isArray(value) ? [] : {}; cache.set(value, result); for (const key of Object.keys(value)) { result[key] deepClone(value[key], cache); } return result; }解析JSON方案缺陷无法处理undefined、函数、Symbol、循环引用、Date会变成字符串。原生方案2026年直接用structuredClone可以做浏览器环境的深拷贝但面试题考的是底层的递归思路。手写版本务必处理循环引用否则遇到自引用对象会死循环。7.3 数组去重和扁平化的常规考法题目数组去重有哪些方式flat和手写扁平化有什么区别参考答案new Set(array)简单去重但不能去重对象。filter indexOf/reduce includes适合保留顺序的场景。扁平化arr.flat(Infinity)是最简做法手写则用递归或栈。function flatten(arr) { return arr.reduce((acc, item) { if (Array.isArray(item)) { return acc.concat(flatten(item)); } return acc.concat(item); }, []); }解析去重的隐藏考点是“如何区分NaN”和“如何对对象按属性去重”。用Set只能去重引用相同的对象如果按id去重就要Map或自定义比较器。这类题答出两种姿势并说清不同场景就够了。7.4 发布订阅模式题目实现一个简单的EventEmitter。参考答案class EventEmitter { constructor() { this.events new Map(); } on(event, handler) { if (!this.events.has(event)) this.events.set(event, []); this.events.get(event).push(handler); } off(event, handler) { if (!this.events.has(event)) return; const handlers this.events.get(event); const index handlers.indexOf(handler); if (index -1) handlers.splice(index, 1); } emit(event, ...args) { if (!this.events.has(event)) return; this.events.get(event).forEach((handler) handler(...args)); } once(event, handler) { const wrap (...args) { this.off(event, wrap); handler(...args); }; this.on(event, wrap); } }解析这类题考察的是设计模式落地能力。发布订阅和观察者模式的区别也被常问发布订阅有事件通道发布者和订阅者不直接感知对方观察者模式中观察者直接被通知。EventEmitter这题还可以和Vue的事件总线、mitt库做类比。8. 2026年新增的高频考察点8.1 AI辅助开发相关面试题题目你在项目中如何利用AI辅助开发怎样才能写出可靠的AI生成代码参考答案我主要把AI用于这些场景生成重复性业务代码、编写单元测试、分析报错信息、代码评审建议。关键点是要把需求拆成足够小的输入片段给AI然后人工review每一行代码尤其是安全性、异常处理和依赖版本。解析2026年面试官问这个不是想听你吹“AI能写全部代码”而是想看你的工程判断力。加分回答包括让AI生成代码后自己手动补边界条件让AI重构后跑一遍完整测试把AI当作结对编程的助手而不是决策者。真实项目经验在这里特别值钱。8.2 微前端方案对比题目你了解微前端吗iframe、qiankun、Webpack Module Federation各有什么优缺点参考答案iframe隔离性强、实现简单但资源加载成本高、通信麻烦、体验差。qiankun基于single-spa通过代理HTML入口加载子应用JS沙箱和样式隔离较完善。Module FederationWebpack5的原生模块共享方案子应用独立构建可以运行时共享依赖。解析微前端是高级岗位的常客。回答时别只讲名词给出选型逻辑老项目异构集成看重隔离选qiankun团队共同维护主应用依赖共享多选Module Federation只是嵌入第三方页面iframe足够。沟通成本、构建复杂度、灰度发布这些也要考虑进去。8.3 语音处理与PC前端一个正在出现的冷门考法题目在Web端做语音转换或音频处理你了解onuserprocessing旧接口和AudioWorklet吗参考答案Web Audio API提供音频处理能力早期开发者通过ScriptProcessorNode的onaudioprocess事件获取音频数据但因运行在主线程且容易卡顿现代标准推荐使用AudioWorklet它可以在独立线程中运行音频处理脚本。解析这个考点在2026年开始出现在部分简历写了“音视频处理”“AI语音交互”的项目里。如果你没有相关经验可以坦诚说“没在生产环境做过但了解Web Audio API的架构”然后主动问面试官项目背景。硬编造反而会露馅。9. 面试现场经验与避坑技巧9.1 答题框架用小标题结构化表达面试答题最怕“答成一团”。我总结了一个好用的框架先贴结论先说结果比如“输出顺序是1、4、3、2”。再拆过程分步骤说明连接词用“首先、然后、最后”。最后补边界主动提“还有几个注意点”。这个框架放在任何手写题和原理题都通用。面试官一天面七八个人能听出你结构清晰就已经赢了一半。9.2 面试常见错误根据我当面试官看到的真实案例列几个高频扣分点只背名词不给过程。比如回答“这是什么”很顺口一问“为什么这么做”就卡壳。过度追求“正确答案数量”。题目问居中方案答出5种但每种都说不清适用场景反而暴露了知识体系是散的。不主动澄清需求。比如手写防抖时没说清是否要处理this和参数就直接写。先问一句“需要支持取消和立即执行吗”会显得很专业。遇到不会的题直接沉默。更好的做法是说出“这个我不太确定但我猜可能和XXX有关”展示推理过程。9.3 面试官最后问“你还有什么问题”时怎么问这是个几乎必考的加分项。我建议准备三个方向问团队技术栈和代码评审流程体现工程化意识。问当前项目最大的技术挑战判断团队水平。问新人入职后的培养路径展示长期规划。避免问“工资多少”“加班多不多”这类问题。虽然是真实需求但这个阶段问出来容易减分留到HR面更合适。说实话备考前端面试最重要的不是把这份题背下来而是把每道题背后的“为什么”想通。我带人的时候常讲面试题是一面镜子照出来的是你平时写代码时有没有多想一步。如果你在准备2026年的面试建议按这份清单先把薄弱点找出来再逐个击破。最后再分享一个小技巧把这些题讲给身边同事听一遍能流畅讲出来的才是真会了讲不顺的地方就是你下一轮要补的功课。祝各位早日上岸。