面试中被问到过的前端八股四写这个系列写到第四篇了前几篇发出去之后后台私信问我“还有没有更多”的人不少。这期继续聊几个我在面试里被反复追问、而且追问深度一次比一次狠的题目——闭包、事件循环、浏览器缓存、Vue响应式原理。这几个题看似基础但每一个都能从“背定义”一直问到“看源码”最能拉开候选人层次。如果你正在准备前端面试建议把这几个点往深里过一遍尤其是源码层面的细节面试官很吃这一套。这篇和前面的系列一样重点不是我帮你复述答案而是拆解面试官为什么会这么问、他想听到什么样的回答、以及拿到题之后怎么组织语言才能显得你“真的懂”。我把每个题都按“常见问法 - 核心原理 - 连环追问 - 答题思路”的顺序写方便你直接对着练。1. 闭包第一个问题就决定面试走向闭包几乎是前端面试的“开场白”式题目出现频率极高。我面过的候选人里十有八九第一道基础题就是它。但说实话能把闭包讲清楚的候选人比例远没有想象中高。大部分人能说出“函数嵌套函数、内部函数能访问外部变量”这种定义但一旦被追问“闭包到底解决了什么问题”“闭包和内存泄漏是什么关系”就开始含糊了。1.1 闭包的本质与形成条件闭包的本质是函数声明时产生的词法作用域被保留了下来。JavaScript采用的是词法作用域也叫静态作用域也就是说函数的执行依赖的变量作用域在函数定义的时候就确定了而不是在调用的时候确定。举个例子function outer() { let count 0; function inner() { count; console.log(count); } return inner; } const fn outer(); fn(); // 1 fn(); // 2inner被返回并赋值给fn之后理论上outer已经执行完了局部变量count应该被垃圾回收。但因为inner还持有对count所在作用域的引用count就被保留了下来。这个“被保留的作用域”就是闭包。这里有个关键点闭包保存的是变量本身而不是变量当时的快照值。很多人以为闭包是把值拷贝了一份其实不是它保存的是变量的引用。这也是为什么循环里用var声明变量会踩坑——所有回调共享同一个变量。1.2 必问的经典场景题循环与闭包循环里面创建闭包是面试里最高频的变形题。最常见的版本for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }输出什么答案是 5 个 5。原因是var声明的i是函数级作用域所有setTimeout回调共享同一个i循环结束之后i已经是 5回调执行时拿到的当然全是 5。怎么改成输出 0 到 4有三种常见方案// 方案一用 let 声明 for (let i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); } // 方案二用 IIFE 包一层 for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); } // 方案三用 bind 传参 for (var i 0; i 5; i) { setTimeout(console.log.bind(null, i), 100); }三种方案里面let方案的原理很多人说不清楚。这里有个知识点let在for循环里每次迭代都会创建一个新的词法环境i是绑定在每次迭代的独立作用域里的所以闭包拿到的不是共享变量而是各自迭代的独立变量。这是let的循环语义和var最核心的区别。面试官如果继续往深里问有可能会问“let是不是简单的块级作用域就完事了”。答案是它比普通块级作用域多一个“每次迭代创建新绑定”的语义这是for循环语句本身在规范层面做的特殊处理。1.3 闭包与内存泄漏到底会不会泄漏闭包和内存泄漏这个问题很多候选人一上来就说“闭包会造成内存泄漏”这个回答其实不够准确。闭包本身不是内存泄漏它只是延长了变量的生命周期。真正的问题在于如果闭包被长期持有且闭包引用的作用域链里有大对象那这些大对象就没办法被垃圾回收这时候才产生了内存泄漏。举个例子function createBigData() { const bigData new Array(1000000).fill(x); return function() { console.log(hello); }; } const fn createBigData();fn虽然只打印了一句 hello但它引用了createBigData的整个作用域bigData就一直没法被回收。这就是实际开发中很典型的“我明明没用到那个变量内存却一直涨”的场景。面试里遇到这个问题我建议的回答思路是分两步先说明闭包本身是语言特性不是泄漏再说明什么情况下会造成泄漏闭包长期持有 作用域内有大量数据以及怎么排查和避免。这样答出来面试官会明显觉得你不只是背了定义。2. 事件循环看完输出顺序题就知道你基础扎不扎实事件循环题是面试里的“照妖镜”一道输出顺序题做完宏任务、微任务、异步回调、Promise 的掌握程度一目了然。我做面试官的时候几乎每次都会出一道这类题因为它是少数几个“背过就会、没背过就懵”的题型能有效筛选候选人简历中的水分。2.1 一道能劝退很多人的输出顺序题先看这道题很多人第一次做都会错console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);正确答案的顺序是script start、script end、promise1、promise2、setTimeout。原理是JavaScript 执行时有一个主线程调用栈同步代码先执行“宏任务”通过事件队列维护“微任务”通过微任务队列维护。每执行完一个宏任务会清空当前微任务队列然后再从宏任务队列取下一个任务。setTimeout的回调是宏任务Promise.then的回调是微任务。所以在同步代码执行完之后浏览器先清空微任务队列promise1、promise2然后再执行宏任务setTimeout。2.2 宏任务与微任务的完整分类面试里光答对上面这道题还不够面试官通常会追问“除了 Promise 和 setTimeout还有哪些是宏任务、哪些是微任务”宏任务包括setTimeout、setInterval、setImmediateNode 环境、I/O 操作、UI 渲染浏览器里、MessageChannel。微任务包括Promise.then / catch / finally、MutationObserver浏览器里监听 DOM 变化的、queueMicrotask新 API专门用来注册微任务、Node 里的 process.nextTick。这里有个容易忽略的点process.nextTick在 Node 里的优先级比其他微任务更高。它实际上是独立于微任务队列之外的“nextTick 队列”在执行微任务之前会先把这个队列清空。如果面试官问 Node 环境下的输出顺序nextTick的优先级一定要答出来。2.3 进阶版async/await 和 Promise 混在一起现在面试题很少出单纯的 Promise setTimeout 了更多的是把 async/await 混进来。这道题算是近两年的高频async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); async1(); new Promise(function(resolve) { console.log(promise1); resolve(); }).then(function() { console.log(promise2); }); console.log(script end);正确答案是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。关键在于await的行为await async2()会先同步执行async2然后await后面相当于挂了一个.then()所以async1 end被放进了微任务队列。很多人错在把这个位置搞错以为async1 end会先于promise1打印实际上async1 end是在await之后的微任务而new Promise里的同步代码promise1是当前宏任务内同步执行的自然更先输出。这道题能答对说明候选人确实理解了 async/await 只是 Promise 的语法糖而不是魔法。3. 浏览器缓存三个连环问测出水平浏览器缓存这道题我在面试里必问。因为它是实际开发中最常见、也最容易出问题的点问这个题能看出来候选人有没有真正调试过线上问题。这题通常有固定的“连环三问”强缓存和协商缓存的区别是什么、各自的响应头怎么配、如果同时存在优先级怎么算。3.1 强缓存和协商缓存的核心机制强缓存浏览器请求资源时如果命中强缓存直接从本地副本读取根本不会发请求给服务器。控制强缓存的响应头有两个——Expires和Cache-Control。Expires是 HTTP/1.0 时代的产物指定的是一个绝对时间Cache-Control是 HTTP/1.1 的更灵活。其中Cache-Control: max-age3600表示资源从请求时间起 3600 秒内都算新鲜。协商缓存当强缓存没有命中浏览器会发请求到服务器由服务器告诉浏览器“你可以用本地缓存”。协商缓存也有两种实现方式——Last-Modified/If-Modified-Since组合以及ETag/If-None-Match组合。前者比较的是修改时间粒度是秒级有局限后者比较的是资源内容的指纹更精确。3.2 缓存优先级这是最容易翻车的地方面试官问到优先级很多候选人会答“先强缓存再协商缓存”这个对但不完整。因为“强缓存”内部的优先级也有讲究。完整的优先级是Cache-Control的max-age优先于Expires也就是说两者同时存在时以Cache-Control为准。在协商缓存内部ETag优先于Last-Modified因为前者是精确指纹后者是秒级时间。整体流程是先判断强缓存是否命中命中就直接用本地缓存没命中就发请求走协商缓存服务端返回 304 则用本地缓存返回 200 则用新资源并更新缓存。还有一个容易被忽略的细节Cache-Control里的no-cache和no-store含义完全不同。no-cache不是“不缓存”而是“每次使用前都要去服务器验证一下”相当于每次都走协商缓存no-store才是真正的不缓存响应不写入本地任何存储。3.3 实际开发里缓存配置的坑这个题如果只是背面试答案价值有限。我一般会追问候选人“你实际项目里是怎么配缓存的有没有遇到过缓存没更新的问题”我自己的经验是HTML 文件通常用no-cache保证每次请求都去验证这样内容有更新时能及时拿到最新版而静态资源JS、CSS、图片用Cache-Control: max-age31536000 文件名带指纹hash的方式。因为文件名带 hash内容一变文件名就变可以放心地缓存一年永远不会出现“内容更新了但浏览器还用旧文件”的问题。常见的坑是文件名不带 hash却把缓存时间设得很长结果发布之后用户明明访问的是新页面加载的却是老的 JS功能全乱套。这种问题排查起来特别耗时间因为你刷新浏览器可能是新的但用户那边一直是旧缓存。遇到这种问题最快的方法是让用户在地址栏前加个?vxxx或者临时改Cache-Control: no-cache验证不过治本还是要靠指纹命名。4. Vue响应式原理从Vue2到Vue3问的是源码理解Vue 相关的问题在中小厂面试里出现频率非常高而响应式原理又是 Vue 面试中最核心的题。这道题的难度在于很多人看过原理文章能说出“Object.defineProperty”“Proxy”这些关键词但一到“依赖是怎么收集的”这种细节就说不清了。4.1 Vue2 的响应式defineProperty 的用法与限制Vue2 的响应式核心是Object.defineProperty它把对象每个属性变成 getter/setter。读取属性时触发 getter执行依赖收集修改属性时触发 setter通知依赖更新。这里有一个关键问题Object.defineProperty只能劫持已有的属性。所以 Vue2 里有$set和$delete这两个 API用来给对象新增/删除属性时也能触发响应式。如果直接this.obj.newProp 1数据虽然变了页面不会更新因为newProp根本不是响应式的。数组方面也有坑直接通过索引修改数组元素arr[0] xxx在 Vue2 里不会触发更新因为 defineProperty 难以劫持任意长度的数组索引。Vue2 的解决方案是重写数组的八个变更方法push、pop、shift、unshift、splice、sort、reverse、copyWithin实际是七个另一个是 fill让这些方法调用后手动通知视图更新。4.2 Vue3 的响应式Proxy 解决了什么Vue3 改用Proxy实现响应式这是面试里必考的对比点。Proxy可以直接代理整个对象不用像 defineProperty 那样逐个属性定义所以新增/删除属性天然就是响应式的不再需要$set。数组的索引修改也直接触发了因为Proxy的set拦截器能捕获到索引赋值操作。Vue3 的实现里还引入了Reflect原因有两个一是Proxy的拦截器方法里如果用this访问原始对象容易造成 this 指向混乱二是Reflect的方法返回值和Proxy拦截器的返回值规则一致方便在拦截器里直接返回Reflect调用的结果。源码里几乎所有拦截器实现都是return Reflect.xxx(...)这个模式。Vue3 还区分了ref和reactive。reactive是用Proxy代理整个对象ref则是把一个基本类型的值包装成一个对象通过 valueOf 之类的机制触发依赖。ref在模板里访问时会被自动解包但如果在 JS 逻辑里使用必须.value这是很多新人容易踩的坑。4.3 依赖收集和触发更新的完整流程这是最容易被追问的细节。Vue 的依赖收集核心是三个角色Dep依赖收集器、Watcher观察者、target当前正在计算的 Watcher。响应式数据的 getter 里会执行dep.depend()把这个属性对应的 Dep 和当前 Watcher 关联起来setter 里执行dep.notify()通知所有关联的 Watcher 去更新。整个流程是组件渲染时会创建一个 Watcher渲染 Watcher。渲染过程中读取模板里用到的响应式数据触发 getter。getter 里当前 Watcher 被收集到每个属性的 Dep 里。数据修改时触发 setterDep 通知所有收集到的 Watcher 重新执行。Vue3 里这套机制换成了effect替代 Watcher用track替代依赖收集、用trigger替代触发更新但核心思路是一脉相承的。面试中说清楚这个流程比单纯说“用 Proxy 拦截”要加分得多因为这说明你真去看过源码或者认真研究过原理而不只是刷了几篇面经。5. 高频衍生题微前端、SSE、组件库——面试官用来试探经验深度的题除了上面几个“基础必考题”现在前端面试里还会高频出现一些结合工程经验的衍生题。这一节聊几个我在面试中被问到、也作为面试官问过别人的点它们不算典型的八股但答好非常加分。5.1 微前端主应用和子应用怎么通信微前端在前两年火过一波现在虽然没那么热了但很多中大型项目还在用面试官也喜欢问。最常见的问题是“微前端的主应用和子应用之间怎么通信”。这个问题没有标准答案关键是你能不能说出几种方案的取舍。我项目的经验是最基础的方案是自定义事件window.dispatchEventwindow.addEventListener适合简单的通知场景复杂一点的用qiankun提供的全局状态GlobalState如果项目里已经上了状态管理库如 Vuex/Pinia也可以把它们挂在全局上共享。更重要的一个点是“样式隔离”。子应用加载到主应用里CSS 很容易互相污染。qiankun默认开启样式隔离但遇到子应用用了body或html这种全局选择器还是可能出问题。我的经验是让子应用尽量用带前缀的 class 名或者干脆用 CSS Modules不要依赖全局样式。5.2 SSE vs WebSocket数据库、后端场景下的技术选型这个题近几年出现频率在上升因为实时交互的需求越来越多。SSEServer-Sent Events是服务端单向推送的技术WebSocket 是双向全双工通信。面试官问这个题是想看候选人面对业务场景时有没有根据“单向还是双向”这个维度做合理的选型判断。我的判断标准比较直接如果只是服务端往客户端推数据比如消息通知、股票行情、日志流优先选 SSE。它的实现简单原生支持重连还能跑在普通 HTTP 协议上穿透代理方便。但如果业务是双向交互的比如聊天室、远程协作编辑那就必须上 WebSocket。一个容易被忽略的坑是SSE 的连接数是有限制的。HTTP/1.1 下浏览器对同一个域名的并发连接数通常限制为 6 个如果页面上同时开了好几个 SSE 连接很容易触顶。HTTP/2 也会有限制只是数量宽松一些。所以如果业务里需要开很多条推送通道要么复用连接要么考虑改用 WebSocket。5.3 前端组件库设计如果你来设计一个 Button你会怎么设计这个题不是给你一个现成的 Button 让你复述 API而是反过来让你设计。它能考察的内容很丰富props 设计、类型定义、样式方案、扩展性、按需加载、无障碍等。如果是我的话会先确定 API 设计原则——Button 的 props 应该分成几类类型default/primary/danger...、尺寸small/medium/large、状态loading/disabled、图标icon 前置/后置、事件click 的防抖。然后强调 TypeScript 类型推导的严谨性比如type: primary这种应该用联合类型而不是字符串让 IDE 能自动补全。再往深了说可以提一句“设计模式”层面的考虑——比如复合组件模式把Button.Group作为子组件方便统一管理按钮间距和样式。还有按需加载通过 ES Module 导出单个组件配合打包工具的 tree-shaking。这个题答得好不好其实不完全取决于你写过多少组件而是取决于你有没有一套“组件设计的通用方法论”。建议平时封装组件时多想想这几点API 是否自解释、类型是否安全、样式是否可定制、性能是否可控、可访问性是否达标。6. 面试答题技巧怎么把八股答出“实战感”这一节不讨论具体题目了聊点我在面试里观察到的“答题技巧”算是系列文章的一个小彩蛋。同一道八股题不同候选人答出来的效果差异很大差别往往不在知识量而在表达方式。6.1 先答结论再展开细节面试官一天面很多人听候选人长篇大论很消耗耐心。我的建议是每一道题先一句话给出核心结论再分点展开。比如被问到“Vue3 的响应式原理”第一句话先说“核心是用 Proxy 代理对象配合 track 和 trigger 做依赖收集和派发更新”然后再说“和 Vue2 的 defineProperty 相比主要有三个优势”。这种结构让面试官能快速抓到你的逻辑主线即使后面没细听也会觉得你思路清晰。6.2 主动说出“实际项目中遇到的坑”八股题本身是理论但如果有地方能跟实际项目挂上钩一定要主动挂。比如回答缓存时顺带说“我之前在项目里配反向代理时发现 HTML 做了强缓存导致发布后用户拿不到最新页面后来改成 no-cache 就好了”。这种细节听起来是真实的经验比背概念有说服力得多。说“坑”的时候有一个度的问题不要编故事不要说得太离谱最好是真实踩过的。面试官如果追问细节你能答得上来才算是加分项。6.3 遇到不会的题怎么处理才不扣分面试中一定会遇到不会的题。我的建议是先把自己理解的那部分说清楚然后明确说“这部分我没深入了解但通过 XXX 我能推测它大概是 YYY”。不要一个字不说也不要装懂硬编。举个例子面试官问“你知道 Angular 的变更检测机制吗”你如果没学过 Angular可以说“我主要做 Vue/React对 Angular 不太熟。但我知道变更检测的核心是数据变化后自动更新视图我猜测它和 Vue 的依赖收集机制有相似之处可能是在组件树里做 diff。如果面试需要的话我可以快速学一下。”这样诚实地表达劣势又会用已有知识做类比推理印象分会比直接说“不知道”好很多。6.4 收尾建议把八股当成“索引”而非“终点”我这几年面试和被面试的经验告诉我八股的价值不在于背诵本身而在于它是一条索引——每个八股题背后都指向一个更庞大、更深入的实践领域。你把闭包背得再熟不如自己在项目里实际封装过一个高阶函数你把事件循环背得再熟不如真的排查过一次接口请求乱序导致的数据错乱。我自己准备面试时的方法很简单先把高频八股题过一遍掌握基础概念然后针对每道题强迫自己写一个实际场景的例子想清楚“如果我在项目中遇到这个问题会怎么处理”。这样把八股“翻译”成实战经验面的时候就不会只是干巴巴地背而是能说出自己的思考过程分数明显不一样。这个系列还会继续更新下一篇预计会聊 Node.js 相关的面试题包括事件循环在服务端的差异、中间件模型、以及性能排查手段这些都是我实际面试中被问过的内容到时候再跟大家详细拆解。 
长河君 · 2026/8/29 21:55:59 · 阅读 1.2k 前端面试八股（四）：闭包、事件循环、浏览器缓存与Vue响应式
面试中被问到过的前端八股四写这个系列写到第四篇了前几篇发出去之后后台私信问我“还有没有更多”的人不少。这期继续聊几个我在面试里被反复追问、而且追问深度一次比一次狠的题目——闭包、事件循环、浏览器缓存、Vue响应式原理。这几个题看似基础但每一个都能从“背定义”一直问到“看源码”最能拉开候选人层次。如果你正在准备前端面试建议把这几个点往深里过一遍尤其是源码层面的细节面试官很吃这一套。这篇和前面的系列一样重点不是我帮你复述答案而是拆解面试官为什么会这么问、他想听到什么样的回答、以及拿到题之后怎么组织语言才能显得你“真的懂”。我把每个题都按“常见问法 - 核心原理 - 连环追问 - 答题思路”的顺序写方便你直接对着练。1. 闭包第一个问题就决定面试走向闭包几乎是前端面试的“开场白”式题目出现频率极高。我面过的候选人里十有八九第一道基础题就是它。但说实话能把闭包讲清楚的候选人比例远没有想象中高。大部分人能说出“函数嵌套函数、内部函数能访问外部变量”这种定义但一旦被追问“闭包到底解决了什么问题”“闭包和内存泄漏是什么关系”就开始含糊了。1.1 闭包的本质与形成条件闭包的本质是函数声明时产生的词法作用域被保留了下来。JavaScript采用的是词法作用域也叫静态作用域也就是说函数的执行依赖的变量作用域在函数定义的时候就确定了而不是在调用的时候确定。举个例子function outer() { let count 0; function inner() { count; console.log(count); } return inner; } const fn outer(); fn(); // 1 fn(); // 2inner被返回并赋值给fn之后理论上outer已经执行完了局部变量count应该被垃圾回收。但因为inner还持有对count所在作用域的引用count就被保留了下来。这个“被保留的作用域”就是闭包。这里有个关键点闭包保存的是变量本身而不是变量当时的快照值。很多人以为闭包是把值拷贝了一份其实不是它保存的是变量的引用。这也是为什么循环里用var声明变量会踩坑——所有回调共享同一个变量。1.2 必问的经典场景题循环与闭包循环里面创建闭包是面试里最高频的变形题。最常见的版本for (var i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); }输出什么答案是 5 个 5。原因是var声明的i是函数级作用域所有setTimeout回调共享同一个i循环结束之后i已经是 5回调执行时拿到的当然全是 5。怎么改成输出 0 到 4有三种常见方案// 方案一用 let 声明 for (let i 0; i 5; i) { setTimeout(function() { console.log(i); }, 100); } // 方案二用 IIFE 包一层 for (var i 0; i 5; i) { (function(j) { setTimeout(function() { console.log(j); }, 100); })(i); } // 方案三用 bind 传参 for (var i 0; i 5; i) { setTimeout(console.log.bind(null, i), 100); }三种方案里面let方案的原理很多人说不清楚。这里有个知识点let在for循环里每次迭代都会创建一个新的词法环境i是绑定在每次迭代的独立作用域里的所以闭包拿到的不是共享变量而是各自迭代的独立变量。这是let的循环语义和var最核心的区别。面试官如果继续往深里问有可能会问“let是不是简单的块级作用域就完事了”。答案是它比普通块级作用域多一个“每次迭代创建新绑定”的语义这是for循环语句本身在规范层面做的特殊处理。1.3 闭包与内存泄漏到底会不会泄漏闭包和内存泄漏这个问题很多候选人一上来就说“闭包会造成内存泄漏”这个回答其实不够准确。闭包本身不是内存泄漏它只是延长了变量的生命周期。真正的问题在于如果闭包被长期持有且闭包引用的作用域链里有大对象那这些大对象就没办法被垃圾回收这时候才产生了内存泄漏。举个例子function createBigData() { const bigData new Array(1000000).fill(x); return function() { console.log(hello); }; } const fn createBigData();fn虽然只打印了一句 hello但它引用了createBigData的整个作用域bigData就一直没法被回收。这就是实际开发中很典型的“我明明没用到那个变量内存却一直涨”的场景。面试里遇到这个问题我建议的回答思路是分两步先说明闭包本身是语言特性不是泄漏再说明什么情况下会造成泄漏闭包长期持有 作用域内有大量数据以及怎么排查和避免。这样答出来面试官会明显觉得你不只是背了定义。2. 事件循环看完输出顺序题就知道你基础扎不扎实事件循环题是面试里的“照妖镜”一道输出顺序题做完宏任务、微任务、异步回调、Promise 的掌握程度一目了然。我做面试官的时候几乎每次都会出一道这类题因为它是少数几个“背过就会、没背过就懵”的题型能有效筛选候选人简历中的水分。2.1 一道能劝退很多人的输出顺序题先看这道题很多人第一次做都会错console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); Promise.resolve() .then(function() { console.log(promise1); }) .then(function() { console.log(promise2); }); console.log(script end);正确答案的顺序是script start、script end、promise1、promise2、setTimeout。原理是JavaScript 执行时有一个主线程调用栈同步代码先执行“宏任务”通过事件队列维护“微任务”通过微任务队列维护。每执行完一个宏任务会清空当前微任务队列然后再从宏任务队列取下一个任务。setTimeout的回调是宏任务Promise.then的回调是微任务。所以在同步代码执行完之后浏览器先清空微任务队列promise1、promise2然后再执行宏任务setTimeout。2.2 宏任务与微任务的完整分类面试里光答对上面这道题还不够面试官通常会追问“除了 Promise 和 setTimeout还有哪些是宏任务、哪些是微任务”宏任务包括setTimeout、setInterval、setImmediateNode 环境、I/O 操作、UI 渲染浏览器里、MessageChannel。微任务包括Promise.then / catch / finally、MutationObserver浏览器里监听 DOM 变化的、queueMicrotask新 API专门用来注册微任务、Node 里的 process.nextTick。这里有个容易忽略的点process.nextTick在 Node 里的优先级比其他微任务更高。它实际上是独立于微任务队列之外的“nextTick 队列”在执行微任务之前会先把这个队列清空。如果面试官问 Node 环境下的输出顺序nextTick的优先级一定要答出来。2.3 进阶版async/await 和 Promise 混在一起现在面试题很少出单纯的 Promise setTimeout 了更多的是把 async/await 混进来。这道题算是近两年的高频async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(function() { console.log(setTimeout); }, 0); async1(); new Promise(function(resolve) { console.log(promise1); resolve(); }).then(function() { console.log(promise2); }); console.log(script end);正确答案是script start、async1 start、async2、promise1、script end、async1 end、promise2、setTimeout。关键在于await的行为await async2()会先同步执行async2然后await后面相当于挂了一个.then()所以async1 end被放进了微任务队列。很多人错在把这个位置搞错以为async1 end会先于promise1打印实际上async1 end是在await之后的微任务而new Promise里的同步代码promise1是当前宏任务内同步执行的自然更先输出。这道题能答对说明候选人确实理解了 async/await 只是 Promise 的语法糖而不是魔法。3. 浏览器缓存三个连环问测出水平浏览器缓存这道题我在面试里必问。因为它是实际开发中最常见、也最容易出问题的点问这个题能看出来候选人有没有真正调试过线上问题。这题通常有固定的“连环三问”强缓存和协商缓存的区别是什么、各自的响应头怎么配、如果同时存在优先级怎么算。3.1 强缓存和协商缓存的核心机制强缓存浏览器请求资源时如果命中强缓存直接从本地副本读取根本不会发请求给服务器。控制强缓存的响应头有两个——Expires和Cache-Control。Expires是 HTTP/1.0 时代的产物指定的是一个绝对时间Cache-Control是 HTTP/1.1 的更灵活。其中Cache-Control: max-age3600表示资源从请求时间起 3600 秒内都算新鲜。协商缓存当强缓存没有命中浏览器会发请求到服务器由服务器告诉浏览器“你可以用本地缓存”。协商缓存也有两种实现方式——Last-Modified/If-Modified-Since组合以及ETag/If-None-Match组合。前者比较的是修改时间粒度是秒级有局限后者比较的是资源内容的指纹更精确。3.2 缓存优先级这是最容易翻车的地方面试官问到优先级很多候选人会答“先强缓存再协商缓存”这个对但不完整。因为“强缓存”内部的优先级也有讲究。完整的优先级是Cache-Control的max-age优先于Expires也就是说两者同时存在时以Cache-Control为准。在协商缓存内部ETag优先于Last-Modified因为前者是精确指纹后者是秒级时间。整体流程是先判断强缓存是否命中命中就直接用本地缓存没命中就发请求走协商缓存服务端返回 304 则用本地缓存返回 200 则用新资源并更新缓存。还有一个容易被忽略的细节Cache-Control里的no-cache和no-store含义完全不同。no-cache不是“不缓存”而是“每次使用前都要去服务器验证一下”相当于每次都走协商缓存no-store才是真正的不缓存响应不写入本地任何存储。3.3 实际开发里缓存配置的坑这个题如果只是背面试答案价值有限。我一般会追问候选人“你实际项目里是怎么配缓存的有没有遇到过缓存没更新的问题”我自己的经验是HTML 文件通常用no-cache保证每次请求都去验证这样内容有更新时能及时拿到最新版而静态资源JS、CSS、图片用Cache-Control: max-age31536000 文件名带指纹hash的方式。因为文件名带 hash内容一变文件名就变可以放心地缓存一年永远不会出现“内容更新了但浏览器还用旧文件”的问题。常见的坑是文件名不带 hash却把缓存时间设得很长结果发布之后用户明明访问的是新页面加载的却是老的 JS功能全乱套。这种问题排查起来特别耗时间因为你刷新浏览器可能是新的但用户那边一直是旧缓存。遇到这种问题最快的方法是让用户在地址栏前加个?vxxx或者临时改Cache-Control: no-cache验证不过治本还是要靠指纹命名。4. Vue响应式原理从Vue2到Vue3问的是源码理解Vue 相关的问题在中小厂面试里出现频率非常高而响应式原理又是 Vue 面试中最核心的题。这道题的难度在于很多人看过原理文章能说出“Object.defineProperty”“Proxy”这些关键词但一到“依赖是怎么收集的”这种细节就说不清了。4.1 Vue2 的响应式defineProperty 的用法与限制Vue2 的响应式核心是Object.defineProperty它把对象每个属性变成 getter/setter。读取属性时触发 getter执行依赖收集修改属性时触发 setter通知依赖更新。这里有一个关键问题Object.defineProperty只能劫持已有的属性。所以 Vue2 里有$set和$delete这两个 API用来给对象新增/删除属性时也能触发响应式。如果直接this.obj.newProp 1数据虽然变了页面不会更新因为newProp根本不是响应式的。数组方面也有坑直接通过索引修改数组元素arr[0] xxx在 Vue2 里不会触发更新因为 defineProperty 难以劫持任意长度的数组索引。Vue2 的解决方案是重写数组的八个变更方法push、pop、shift、unshift、splice、sort、reverse、copyWithin实际是七个另一个是 fill让这些方法调用后手动通知视图更新。4.2 Vue3 的响应式Proxy 解决了什么Vue3 改用Proxy实现响应式这是面试里必考的对比点。Proxy可以直接代理整个对象不用像 defineProperty 那样逐个属性定义所以新增/删除属性天然就是响应式的不再需要$set。数组的索引修改也直接触发了因为Proxy的set拦截器能捕获到索引赋值操作。Vue3 的实现里还引入了Reflect原因有两个一是Proxy的拦截器方法里如果用this访问原始对象容易造成 this 指向混乱二是Reflect的方法返回值和Proxy拦截器的返回值规则一致方便在拦截器里直接返回Reflect调用的结果。源码里几乎所有拦截器实现都是return Reflect.xxx(...)这个模式。Vue3 还区分了ref和reactive。reactive是用Proxy代理整个对象ref则是把一个基本类型的值包装成一个对象通过 valueOf 之类的机制触发依赖。ref在模板里访问时会被自动解包但如果在 JS 逻辑里使用必须.value这是很多新人容易踩的坑。4.3 依赖收集和触发更新的完整流程这是最容易被追问的细节。Vue 的依赖收集核心是三个角色Dep依赖收集器、Watcher观察者、target当前正在计算的 Watcher。响应式数据的 getter 里会执行dep.depend()把这个属性对应的 Dep 和当前 Watcher 关联起来setter 里执行dep.notify()通知所有关联的 Watcher 去更新。整个流程是组件渲染时会创建一个 Watcher渲染 Watcher。渲染过程中读取模板里用到的响应式数据触发 getter。getter 里当前 Watcher 被收集到每个属性的 Dep 里。数据修改时触发 setterDep 通知所有收集到的 Watcher 重新执行。Vue3 里这套机制换成了effect替代 Watcher用track替代依赖收集、用trigger替代触发更新但核心思路是一脉相承的。面试中说清楚这个流程比单纯说“用 Proxy 拦截”要加分得多因为这说明你真去看过源码或者认真研究过原理而不只是刷了几篇面经。5. 高频衍生题微前端、SSE、组件库——面试官用来试探经验深度的题除了上面几个“基础必考题”现在前端面试里还会高频出现一些结合工程经验的衍生题。这一节聊几个我在面试中被问到、也作为面试官问过别人的点它们不算典型的八股但答好非常加分。5.1 微前端主应用和子应用怎么通信微前端在前两年火过一波现在虽然没那么热了但很多中大型项目还在用面试官也喜欢问。最常见的问题是“微前端的主应用和子应用之间怎么通信”。这个问题没有标准答案关键是你能不能说出几种方案的取舍。我项目的经验是最基础的方案是自定义事件window.dispatchEventwindow.addEventListener适合简单的通知场景复杂一点的用qiankun提供的全局状态GlobalState如果项目里已经上了状态管理库如 Vuex/Pinia也可以把它们挂在全局上共享。更重要的一个点是“样式隔离”。子应用加载到主应用里CSS 很容易互相污染。qiankun默认开启样式隔离但遇到子应用用了body或html这种全局选择器还是可能出问题。我的经验是让子应用尽量用带前缀的 class 名或者干脆用 CSS Modules不要依赖全局样式。5.2 SSE vs WebSocket数据库、后端场景下的技术选型这个题近几年出现频率在上升因为实时交互的需求越来越多。SSEServer-Sent Events是服务端单向推送的技术WebSocket 是双向全双工通信。面试官问这个题是想看候选人面对业务场景时有没有根据“单向还是双向”这个维度做合理的选型判断。我的判断标准比较直接如果只是服务端往客户端推数据比如消息通知、股票行情、日志流优先选 SSE。它的实现简单原生支持重连还能跑在普通 HTTP 协议上穿透代理方便。但如果业务是双向交互的比如聊天室、远程协作编辑那就必须上 WebSocket。一个容易被忽略的坑是SSE 的连接数是有限制的。HTTP/1.1 下浏览器对同一个域名的并发连接数通常限制为 6 个如果页面上同时开了好几个 SSE 连接很容易触顶。HTTP/2 也会有限制只是数量宽松一些。所以如果业务里需要开很多条推送通道要么复用连接要么考虑改用 WebSocket。5.3 前端组件库设计如果你来设计一个 Button你会怎么设计这个题不是给你一个现成的 Button 让你复述 API而是反过来让你设计。它能考察的内容很丰富props 设计、类型定义、样式方案、扩展性、按需加载、无障碍等。如果是我的话会先确定 API 设计原则——Button 的 props 应该分成几类类型default/primary/danger...、尺寸small/medium/large、状态loading/disabled、图标icon 前置/后置、事件click 的防抖。然后强调 TypeScript 类型推导的严谨性比如type: primary这种应该用联合类型而不是字符串让 IDE 能自动补全。再往深了说可以提一句“设计模式”层面的考虑——比如复合组件模式把Button.Group作为子组件方便统一管理按钮间距和样式。还有按需加载通过 ES Module 导出单个组件配合打包工具的 tree-shaking。这个题答得好不好其实不完全取决于你写过多少组件而是取决于你有没有一套“组件设计的通用方法论”。建议平时封装组件时多想想这几点API 是否自解释、类型是否安全、样式是否可定制、性能是否可控、可访问性是否达标。6. 面试答题技巧怎么把八股答出“实战感”这一节不讨论具体题目了聊点我在面试里观察到的“答题技巧”算是系列文章的一个小彩蛋。同一道八股题不同候选人答出来的效果差异很大差别往往不在知识量而在表达方式。6.1 先答结论再展开细节面试官一天面很多人听候选人长篇大论很消耗耐心。我的建议是每一道题先一句话给出核心结论再分点展开。比如被问到“Vue3 的响应式原理”第一句话先说“核心是用 Proxy 代理对象配合 track 和 trigger 做依赖收集和派发更新”然后再说“和 Vue2 的 defineProperty 相比主要有三个优势”。这种结构让面试官能快速抓到你的逻辑主线即使后面没细听也会觉得你思路清晰。6.2 主动说出“实际项目中遇到的坑”八股题本身是理论但如果有地方能跟实际项目挂上钩一定要主动挂。比如回答缓存时顺带说“我之前在项目里配反向代理时发现 HTML 做了强缓存导致发布后用户拿不到最新页面后来改成 no-cache 就好了”。这种细节听起来是真实的经验比背概念有说服力得多。说“坑”的时候有一个度的问题不要编故事不要说得太离谱最好是真实踩过的。面试官如果追问细节你能答得上来才算是加分项。6.3 遇到不会的题怎么处理才不扣分面试中一定会遇到不会的题。我的建议是先把自己理解的那部分说清楚然后明确说“这部分我没深入了解但通过 XXX 我能推测它大概是 YYY”。不要一个字不说也不要装懂硬编。举个例子面试官问“你知道 Angular 的变更检测机制吗”你如果没学过 Angular可以说“我主要做 Vue/React对 Angular 不太熟。但我知道变更检测的核心是数据变化后自动更新视图我猜测它和 Vue 的依赖收集机制有相似之处可能是在组件树里做 diff。如果面试需要的话我可以快速学一下。”这样诚实地表达劣势又会用已有知识做类比推理印象分会比直接说“不知道”好很多。6.4 收尾建议把八股当成“索引”而非“终点”我这几年面试和被面试的经验告诉我八股的价值不在于背诵本身而在于它是一条索引——每个八股题背后都指向一个更庞大、更深入的实践领域。你把闭包背得再熟不如自己在项目里实际封装过一个高阶函数你把事件循环背得再熟不如真的排查过一次接口请求乱序导致的数据错乱。我自己准备面试时的方法很简单先把高频八股题过一遍掌握基础概念然后针对每道题强迫自己写一个实际场景的例子想清楚“如果我在项目中遇到这个问题会怎么处理”。这样把八股“翻译”成实战经验面的时候就不会只是干巴巴地背而是能说出自己的思考过程分数明显不一样。这个系列还会继续更新下一篇预计会聊 Node.js 相关的面试题包括事件循环在服务端的差异、中间件模型、以及性能排查手段这些都是我实际面试中被问过的内容到时候再跟大家详细拆解。