三月份我集中投了一拨前端岗位过程并不算顺利但复盘之后收获非常大。这篇笔记不适合拿来做“标准答案”背更像我随手整理的一线面试实录被问到的高频问题、我当时的回答、事后翻书查资料重新梳理后的参考答案以及我在这个过程中踩过的坑。如果你也在准备前端中高阶面试或者工作三四年想跳槽去更核心的团队这篇内容可以当一份“对照清单”用。前端面试的考察面很广但核心逻辑始终是基础、框架、工程化、项目、算法和软技能六块内容绕不开。1. 本季面试整体复盘1.1 投递节奏和考察范围三月的招聘节奏比想象中更快很多团队走的是“简历初筛 - 笔试或技术面 - 主管面 - HR面”这条线。我把自己能投的岗位分为三批目标明确、要求偏硬核的团队放最后面因为需要充分准备业务匹配度高的岗位优先沟通面试时聊项目会比较顺还有少量平台一般但流程正规的岗位用来检验自己的临场状态。实际走完几轮之后我发现前端岗位的考察范围非常公式化JavaScript语言基础永远是重头戏Vue或者React总得有一个能深聊工程化相关内容基本是必问性能优化会结合项目盘问手写题代替了部分算法题最后还要经历主管面和HR面的软素质考验。有人说现在前端面试太卷我觉得与其说是卷不如说是岗位对候选人的要求从“会用”往“懂原理”方向迁移了。1.2 我的准备策略我准备了大约十天前后分了三轮。第一轮把所有核心知识点拉成图谱不追求背熟只求“看到问题能快速反应到对应模块”第二轮专门整理项目里可以讲的价值点每个项目都准备了三分钟版本和十五分钟深入版本第三轮集中刷手写题和LeetCode的Hot 100但没盲目追求题量更多是吃透分类解法。这个策略后来被证明有效面试官很少直接问“你知道什么是原型链”而是从一个具体场景切入比如“new一个函数时发生了什么”或者“这个demo里为什么每次打印结果不一样”。如果你的准备只停留在概念背诵现场很难接住这种变形追问。我建议所有准备前端面试的朋友把自己想象成面试官对你说的每一句话都问一句“为什么”。你项目的优势、某个方案的取舍、某段代码的异常行为大概率都会被深度追问到。2. 语言基础JS与浏览器2.1 原型链、继承与new有一场技术面面试官上来就问“new一个构造函数的时候JavaScript帮你做了几件事”这个题看着基础但回答粒度很容易暴露功底。常规回答是三步新建一个空对象把这个对象的原型指向构造函数的prototype然后以这个对象为this执行构造函数。但更好的回答要补上第四步——当构造函数显式返回对象时会覆盖第一步生成的对象否则返回新建对象。这个差异其实就是手写new的考点function _new(fn, ...args) { const obj Object.create(fn.prototype); const ret fn.apply(obj, args); return ret instanceof Object ? ret : obj; }我建议准备的时候把原型链整个链路在纸上画一遍每个函数都有prototype每个实例都有__proto__实例属性的查找沿__proto__向上找到Object.prototype终点是null。面试官有时会追问Class继承转译成ES5之后长什么样这时候你至少要知道寄生组合继承和普通组合继承的区别。两者的核心差异在于子类prototype是通过Object.create(Parent.prototype)创建而不是直接new Parent()这样不会导致子类的prototype上残留父类实例属性。2.2 闭包与作用域闭包几乎是必考题但问法很活。有一场面试面试官指着一行代码问“这个函数返回了一个引用内部变量的函数等外层函数执行完之后这个变量为什么没有被回收”这个问题回答的关键是“引用是否还存在”。闭包形成时内部函数保存了对外层作用域的引用只要内部函数还存在垃圾回收就不会把外层变量当作无引用对象清除。这听上去简单但很多人忽略了闭包和垃圾回收的关联。闭包的应用点也值得准备完整防抖节流、部分应用函数、模块化封装私有变量。面试中比较容易被深挖的是“闭包会不会导致内存泄漏”。我会这样答闭包本身不是内存泄漏只有你把一个长期不需要的内部函数一直挂在全局节点上或者让一个DOM元素的事件回调引用了携带大量数据的变量才会造成泄漏。同时要提一下解决方案及时解除引用、使用WeakMap或WeakSet保存弱引用。2.3 事件循环、Promise与async/await事件循环是前端面试的“题量担当”我遇到过的题目包括输出顺序、宏任务微任务混合、async函数里await之后执行的顺序等。这个模块准备起来其实有固定的分析套路先看同步代码再把微任务队列排在宏任务之前最后仔细处理Promise的状态变化。一个高频题是“async/await是Promise的语法糖吗”更准确的说法是async函数返回一个隐式Promiseawait会暂停当前异步函数的执行并将后续代码注册为微任务。遇到代码输出题时你需要区分await之后微任务注册的时机async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(0); test();输出顺序是0、1、2。这个结论很多同学都知道但追问“连续两个await会怎样”时容易写错。我自己的方法是把await后面所有代码看作一个整体then回调后续每个await都会产生新的微任务因此多个await之间会按微任务顺序依次执行。这个关键点一定要自己手动推演几遍不要只背结论。2.4 浏览器渲染与HTTP缓存浏览器相关的重头戏一个是渲染过程一个是缓存机制。渲染过程可以沿着“HTML解析 - 构建DOM和CSSOM - 合成渲染树 - 布局 - 绘制 - 合成”这条链路说。面试官比较在乎你对“重排”和“重绘”的理解改变几何属性会触发布局和绘制仅改变颜色或可见性通常只触发绘制或合成。性能优化的局部思路就藏在这几个环节里。HTTP缓存题我习惯用一张表来记住判断优先级Cache-Control的max-age、no-cache、no-storeExpiresETag/If-None-MatchLast-Modified/If-Modified-Since。尤其要注意的是Cache-Control: no-cache不是不缓存而是每次使用缓存前需要回源校验no-store才是禁止缓存。协商缓存字段中ETag的优先级高于Last-Modified因为ETag可以处理秒级内修改、内容没变但时间变了的情况。3. CSS与布局经常被忽略但容易卡住3.1 盒模型与垂直居中很多面试官喜欢用一道CSS题来探你的基本功深度比如“标准盒模型和怪异盒模型有什么区别”。这两个模型的核心区别在于width的计算范围标准盒模型width只是content怪异盒模型width包含content、padding和border。实际开发中通过box-sizing: border-box来切换。垂直居中这个问题我至少被问过三次。不同场景最优解不一样元素尺寸已知可以用margin负值不确定尺寸可以用flex或者绝对定位加transform单行文本直接line-height整个页面级别的居中可能要考虑撑满视口后的flex。我推荐优先使用flex的align-items和justify-content组合因为语义清晰且不需要额外的尺寸假设。但面试官追问“不用flex呢”时你得能答出绝对定位方案和table-cell方案。3.2 BFC与层叠上下文BFC块级格式化上下文是CSS里一个相对抽象的概念但面试官非常喜欢通过具体的现象问你比如“两个相邻div的margin为什么会合并”。BFC可以理解为一块独立的渲染区域它内部元素的布局不会影响外部内部与外部的margin也不会发生折叠。触发条件包括overflow不是visible、float不是none、position是absolute或fixed、display是inline-block或flex或grid等。我知道很多人背得出触发条件但不会用。建议多准备一个实际场景子元素float导致父元素高度塌陷时一种解法是给父元素创建BFC比如overflow:hidden这样父元素就会包含浮动的子元素。这比单纯使用clearfix更直观。层叠上下文则需要清楚z-index只作用于定位元素以及transform、opacity、filter等属性会创建新的层叠上下文这会影响z-index的比较范围。4. 框架与组件化Vue和React怎么聊4.1 虚拟DOM与diff算法无论你主用Vue还是React虚拟DOM和diff算法都是无法回避的题目。我通常这样回答虚拟DOM是一个描述真实DOM结构的JavaScript对象它的核心价值不是“比DOM快”而是提供可编程的UI描述能力让视图框架可以在内存中完成对比把最小更新集批量应用到真实DOM上。真实DOM的创建和样式计算开销相对较大但虚拟DOM的差异计算同样有成本所以很多场景下虚拟DOM并不比直接精准操作DOM快它换来的是开发效率和跨平台能力。diff算法的效率则是考察重点。经典的React diff有三个策略跨层级不移动、类型不同则重建、通过key复用节点。Vue的patch过程会做双端比较新旧节点列表的头和尾四个指针依次对比。我在面试中总结的一句话是“diff的核心是复用而不是算法炫技。”给列表每一项一个稳定唯一的key就是为了让diff阶段能够快速判断节点是否可复用。如果使用index当key在列表头部插入时key会让框架误以为后续所有节点都只是内容变化最终导致状态错乱。4.2 Vue响应式原理Vue系列的灵魂问题是“响应式原理”。Vue2和Vue3的差别非常大建议分开回答。Vue2使用Object.defineProperty拦截已有属性的get和set通过Dep收集依赖每个Watcher对应一个渲染或计算过程。对象新增或删除属性无法被拦截所以Vue2提供了Vue.set和Vue.delete。数组的push、pop等方法则是通过重写原型方法来实现响应式。Vue3选择了Proxy可以代理整个对象对新增属性和删除属性都能感知且不局限于对象本身。Proxy拦截的是所有基本操作配合Reflect使用可以修正this指向。不过Proxy也有兼容性问题并且代理对象在严格相等比较时可能表现异常。回答时可以补一句不管Vue2还是Vue3依赖收集的粒度都在变细Vue3通过effect和track/trigger机制实现并且依赖的是模块级的响应式系统可以脱离组件单独使用。4.3 React渲染机制与HooksReact侧的经典题是“为什么需要Fiber”。React的组件树递归渲染在更新复杂时容易阻塞主线程Fiber把更新过程拆成一个个小单元通过链表结构让渲染可中断、可恢复、可优先级调度。这个回答体现出的深度足够应对大部分问题。更细一点React的调和过程是会产生副作用的commit阶段才是真正把副作用提交到页面的阶段。Hooks相关的题我遇到过“为什么不能条件调用Hooks”和“useEffect闭包陷阱”两个高频点。前者是因为React按调用顺序保存Hook信息一旦顺序变化re-render时取到的状态会错位。后者则要举一个典型例子在useEffect里setInterval回调里读取state但state一直是最初的值因为回调闭包捕获了旧值。解决办法是使用useRef保存最新值或者把依赖项加全。回答时最好把思维上升到“Hooks就是让函数组件具有内部记忆能力”这个高度这样面试官能感受到你理解的是设计意图。4.4 框架对比和选型逻辑大厂前端一般不会只问一个框架。被问到“你怎么选型”时不能只说“Vue简单、React生态丰富”这种表面话。比较稳的回答角度是从响应式基础上看Vue是细粒度依赖更新React需要主动触发re-render从状态组织上看Vue的ref/reactive很直接React想做到类似效果需要外部状态库辅助从模板和组件边界上看Vue模板有静态标记优化React通过JSX获得更强的编程表达能力。选型逻辑一定要落到业务场景。比如中后台表单密集场景Vue的模板和响应式数据流可能让开发更顺滑大型跨端或复杂交互项目React的Hooks组合模式更自由。面试官真正想听的是你有自己的判断框架而不是站队。我一般还会补充一个点前端框架选型还要考虑团队技术积累和后续招人成本单一维度的技术优势在业务场景中并不决定一切。5. 工程化与构建流程5.1 Webpack核心链路工程化方面Webpack的构建原理是基础中的基础。我建议用一条时间线把流程穿起来配置entry/output - 解析模块依赖包括loader转换 - 生成模块记录module/chunk - chunk分包和代码生成 - plugin做输出前处理。面试官经常问“loader和plugin的区别”我的回答是loader被设计为模块处理函数输入文件内容输出转换后的内容plugin则是基于事件钩子的能力扩展能够触及构建生命周期中的任意阶段。Loader本身是纯函数属性顺序很重要。处理样式时use数组是倒序执行的sass-loader先编译scss然后css-loader处理CSS模块再通过style-loader或MiniCssExtractPlugin处理。这个问题曾经让我翻过车因为只看文档写法很容易忽略执行顺序。建议在准备时用一个最小demo验一次比死记结论强。5.2 Vite的快到底快在哪Vite是现在前端面试的高频概念。很多人都能回答“Vite基于原生ESM开发环境用esbuild预构建依赖”但这不是完整的答案。开发阶段Vite启动快是因为它不需要像Webpack那样先完整打包整个应用只是启动了一个按需编译的Dev Server浏览器请求哪个模块就转换哪个模块。通过esbuild预构建依赖则是把散落的CommonJS模块转成统一的ESM同时把大量请求合并成少数文件避免请求过多。HMR时Vite也是精确按模块更新比Webpack开发模式下的热更新体验更顺畅。但Vite在生产环境部分模块会有兼容性问题打包最终可能还是依赖Rollup。如果你在项目中实际搭建过Vite这些问题都可以聊。面试官更在意你有没有深入理解“按需”两个字的价值。5.3 微前端和模块联邦如果项目涉及中后台大规模协作微前端几乎必问。比较稳妥的回答框架是单体应用在大型团队里的痛点包括多团队独立发布、技术栈隔离、旧系统平滑迁移主流的实现方式包括路由级微服务、Web Components、Module Federation等。我面过一场对方直接问“qiankun的沙箱怎么做的”这个问题要能够答出JS隔离和CSS隔离的基本手段JS隔离通过Proxy快照或动态执行FunctionCSS隔离通过样式前缀或Shadow DOM。模块联邦Module Federation也是个值得说的点它允许不同构建产物之间共享模块和依赖可以实现运行时依赖加载。我不建议在不懂原理的情况下把概念背得很花哨面试官很容易追问“联邦模块和普通的npm包有什么区别”。核心区别是npm包是编译时依赖发布后更新版本需要重新构建依赖方模块联邦是运行时共享可以实现独立发布、独立构建。6. 性能优化与监控体系6.1 首屏优化思路性能优化是面试官检验项目真实性的最好试金石。我会按“前端资源链路”来答加载阶段 - 解析执行阶段 - 渲染阶段。加载阶段主要有减少HTTP请求、静态资源加CDN、图片格式选择、开启HTTP缓存、开启HTTP2/3解析执行阶段需要关注JS脚本的解析和执行时间所以有了代码分割、动态import、ES Module发布渲染阶段重点在CSS避免阻塞渲染、关键CSS内联、图片懒加载、骨架屏等。如果项目里做过具体优化一定要带数据。比如首屏时间从2.8s降到1.4s这背后做了哪些事情要有完整链路图片体积从多少MB降到多少KBLong Tasks从多少条降到多少条。面试官不会只看结果数据还会追问测量方式。回答测量方式时能提到PerformanceObserver和web-vitals就比只说“打开DevTools看”好很多。6.2 性能指标与线上监控线上监控是很多人容易忽略的点。面试官问“项目线上出问题怎么发现”时不能只回答有监控平台最好能说清三层前端性能数据上报、错误监控、告警机制。性能数据关注FCP、LCP、INP、CLS等Core Web Vitals指标错误监控需要拿sourceMap做错误堆栈还原区分语法错误、运行时错误和Promise异常。运行时错误可以通过window.onerror捕获Promise异常最好用unhandledrejection。数据上报需要注意采样率和批处理避免上报请求太多影响业务。监控平台要区分错误率和性能数据还需要做告警阈值设置。面试中我把这个讲清楚后面试官明显会更认可项目深度因为这展示了你对线上问题的全链路观察能力而不只是“我调过接口”。7. 手写题与算法题7.1 高频手写题及变体前端手写题基本集中在防抖、节流、深拷贝、Promise相关、apply/call/bind、数组去重、字符串转驼峰。手写题的坑不只是写不对而是要能应对追问。比如写防抖时面试官会问“如果用户在等待的时间里反复触发最后一次到底要不要执行你能控制吗”这时候要在防抖函数中加一个immediate参数以及取消操作。深拷贝更是一个大话题。基础版用JSON.parse(JSON.stringify())的坏处是什么丢失undefined、函数、Symbol、循环引用。手写版至少要处理循环引用我习惯用WeakMap保存已经拷贝过的目标对象。还要考虑拷贝Map、Set、日期、正则这类特殊情况。手写Promise.all时要注意传入空数组的返回值、Promise的then回调执行时机、以及错误处理逻辑。建议不要只背模板代码要理解每次测试用例的输出顺序。这里给一个手写深拷贝的可参考版本function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (map.has(target)) return map.get(target); const result Array.isArray(target) ? [] : target instanceof Date ? new Date(target) : target instanceof RegExp ? new RegExp(target.source, target.flags) : {}; map.set(target, result); for (const key of Reflect.ownKeys(target)) { result[key] deepClone(target[key], map); } return result; }7.2 算法题如何准备大厂前端不是每轮都出算法但一定会考至少一道中等难度的题。常见方向是数组去重、两数之和、三数之和、最长递增子序列、二叉树的层序遍历、链表的反转、以及“实现LRU缓存”。我的准备策略是分类刷题而不是按题号刷字符串处理、数组双指针、哈希表、二叉树遍历、动态规划入门、堆和栈。每种类型找三道典型题吃透比刷五十道但只看思路要可靠得多。LRU这道题很契合前端场景因为它和浏览器缓存淘汰策略有关。实现时用Map保存插入顺序get时先判断存在然后删除再重新插入set时处理容量超限时删除最久未用的Key。能做到O(1)的时间复杂度。算法题目不要只求跑对还要主动分析复杂度面试官非常看重这个。8. 项目问答与HR面8.1 项目描述与难点挖掘项目问题逃不开三个这个项目解决什么问题、你在项目中承担什么角色、过程中最大的难点是什么。我有一个很管用的方法是把项目描述分成三层。第一层用一两句话说清楚业务背景和用户价值第二层讲你负责的模块和技术架构不要覆盖全项目第三层是深度细节包括某个模块的组件设计、状态管理思路、接口性能优化、以及遇到的问题排查过程。难点一定要具体到“当时有几种方案、为什么选这个、放弃另一种方案的原因是什么”。我遇到过候选人包括我自己早期只会说“这个项目很复杂我做了很多优化”这种话没有任何信息量。比较稳的讲法是某个页面首屏加载慢排查发现是主包的第三方图表库太大然后通过按需加载和路由懒加载把包体从700多KB降到300多KB再配合骨架屏和接口优化把FCP从2.8s降到1.6s。量化数字和决策过程才能让面试官对你的能力有画面感。8.2 HR面常见问题与回答策略HR面不是走过场很多Offer最终卡在HR环节。常见问题包括为什么从上家公司离职、期望薪资、最近有没有看其他机会、如何看待压力和加班、职业规划是什么。回答离职原因时尽量不要说前东家的负面信息更不要说“太闲了”或“太卷了”最稳的是把离职原因往成长空间和业务方向上靠。职业规划建议别说得太虚可以这样讲未来一两年希望在某个技术方向上做深比如性能工程、跨端建设或者工程效能同时保持业务视角在合适的阶段可以承担技术owner的角色。HR在意的是稳定性和可预期性你给一个清晰但不过度激进的方向比喊一句“我要做架构师”要有说服力得多。9. 容易翻车的细节和避坑清单9.1 基础细节易错点我整理了一份容易翻车的细节清单分享出来。HTTP状态码里301是永久重定向302是临时重定向304是协商缓存命中401是未认证403是禁止访问502是网关错误503是服务不可用。CSS优先级是内联样式大于ID选择器大于类选择器大于标签选择器但计算时要注意层叠上下文会改变最终表现。JavaScript判断变量的类型时typeof null是objectArray.isArray([])为true这些都是简单但高频的陷阱。跨域问题也是必问点。JSONP只能支持GET请求CORS通过响应头实现代理适合开发环境postMessage适合跨域页面通信。线上项目中比较规范的方案是网关统一配置CORS或者反向代理。讲解跨域时要提“浏览器同源策略”是一种安全机制而不是接口是否真的能到达服务端不一定真的拒绝请求。9.2 心态与临场策略面试到后半程心态比知识更重要。我在三月份最大的一次教训是遇到不会的问题时急于编答案结果越描越黑。更专业的做法是明确说“这部分我在生产环境没有遇到过我基于以前的知识给一个推断”然后尽量把自己熟悉的关联技术说出来。面试官看重的是分析路径而不是正确答案。如果是手写题卡住一定要先写注释理清输入输出和边界条件哪怕最后没写完也会留下好印象。等面试全部结束我会把每个问题按“答得好、一般、没答上”三档标记没答上的全部回头查资料补上。这种复盘比多刷几套题更有价值。三月份面下来最大的体感是前端岗位的面试越来越像“开卷辩论”不是问你知不知道而是看你怎么思考、怎么权衡、怎么表达。把项目里每一个“当时为什么这么选”的决策想明白才是面对任何陌生问题的底气。如果你最近也在准备面试别只背答案拿一张纸把你做过的项目的技术决策都画出来这比什么都重要。
三月份我集中投了一拨前端岗位过程并不算顺利但复盘之后收获非常大。这篇笔记不适合拿来做“标准答案”背更像我随手整理的一线面试实录被问到的高频问题、我当时的回答、事后翻书查资料重新梳理后的参考答案以及我在这个过程中踩过的坑。如果你也在准备前端中高阶面试或者工作三四年想跳槽去更核心的团队这篇内容可以当一份“对照清单”用。前端面试的考察面很广但核心逻辑始终是基础、框架、工程化、项目、算法和软技能六块内容绕不开。1. 本季面试整体复盘1.1 投递节奏和考察范围三月的招聘节奏比想象中更快很多团队走的是“简历初筛 - 笔试或技术面 - 主管面 - HR面”这条线。我把自己能投的岗位分为三批目标明确、要求偏硬核的团队放最后面因为需要充分准备业务匹配度高的岗位优先沟通面试时聊项目会比较顺还有少量平台一般但流程正规的岗位用来检验自己的临场状态。实际走完几轮之后我发现前端岗位的考察范围非常公式化JavaScript语言基础永远是重头戏Vue或者React总得有一个能深聊工程化相关内容基本是必问性能优化会结合项目盘问手写题代替了部分算法题最后还要经历主管面和HR面的软素质考验。有人说现在前端面试太卷我觉得与其说是卷不如说是岗位对候选人的要求从“会用”往“懂原理”方向迁移了。1.2 我的准备策略我准备了大约十天前后分了三轮。第一轮把所有核心知识点拉成图谱不追求背熟只求“看到问题能快速反应到对应模块”第二轮专门整理项目里可以讲的价值点每个项目都准备了三分钟版本和十五分钟深入版本第三轮集中刷手写题和LeetCode的Hot 100但没盲目追求题量更多是吃透分类解法。这个策略后来被证明有效面试官很少直接问“你知道什么是原型链”而是从一个具体场景切入比如“new一个函数时发生了什么”或者“这个demo里为什么每次打印结果不一样”。如果你的准备只停留在概念背诵现场很难接住这种变形追问。我建议所有准备前端面试的朋友把自己想象成面试官对你说的每一句话都问一句“为什么”。你项目的优势、某个方案的取舍、某段代码的异常行为大概率都会被深度追问到。2. 语言基础JS与浏览器2.1 原型链、继承与new有一场技术面面试官上来就问“new一个构造函数的时候JavaScript帮你做了几件事”这个题看着基础但回答粒度很容易暴露功底。常规回答是三步新建一个空对象把这个对象的原型指向构造函数的prototype然后以这个对象为this执行构造函数。但更好的回答要补上第四步——当构造函数显式返回对象时会覆盖第一步生成的对象否则返回新建对象。这个差异其实就是手写new的考点function _new(fn, ...args) { const obj Object.create(fn.prototype); const ret fn.apply(obj, args); return ret instanceof Object ? ret : obj; }我建议准备的时候把原型链整个链路在纸上画一遍每个函数都有prototype每个实例都有__proto__实例属性的查找沿__proto__向上找到Object.prototype终点是null。面试官有时会追问Class继承转译成ES5之后长什么样这时候你至少要知道寄生组合继承和普通组合继承的区别。两者的核心差异在于子类prototype是通过Object.create(Parent.prototype)创建而不是直接new Parent()这样不会导致子类的prototype上残留父类实例属性。2.2 闭包与作用域闭包几乎是必考题但问法很活。有一场面试面试官指着一行代码问“这个函数返回了一个引用内部变量的函数等外层函数执行完之后这个变量为什么没有被回收”这个问题回答的关键是“引用是否还存在”。闭包形成时内部函数保存了对外层作用域的引用只要内部函数还存在垃圾回收就不会把外层变量当作无引用对象清除。这听上去简单但很多人忽略了闭包和垃圾回收的关联。闭包的应用点也值得准备完整防抖节流、部分应用函数、模块化封装私有变量。面试中比较容易被深挖的是“闭包会不会导致内存泄漏”。我会这样答闭包本身不是内存泄漏只有你把一个长期不需要的内部函数一直挂在全局节点上或者让一个DOM元素的事件回调引用了携带大量数据的变量才会造成泄漏。同时要提一下解决方案及时解除引用、使用WeakMap或WeakSet保存弱引用。2.3 事件循环、Promise与async/await事件循环是前端面试的“题量担当”我遇到过的题目包括输出顺序、宏任务微任务混合、async函数里await之后执行的顺序等。这个模块准备起来其实有固定的分析套路先看同步代码再把微任务队列排在宏任务之前最后仔细处理Promise的状态变化。一个高频题是“async/await是Promise的语法糖吗”更准确的说法是async函数返回一个隐式Promiseawait会暂停当前异步函数的执行并将后续代码注册为微任务。遇到代码输出题时你需要区分await之后微任务注册的时机async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(0); test();输出顺序是0、1、2。这个结论很多同学都知道但追问“连续两个await会怎样”时容易写错。我自己的方法是把await后面所有代码看作一个整体then回调后续每个await都会产生新的微任务因此多个await之间会按微任务顺序依次执行。这个关键点一定要自己手动推演几遍不要只背结论。2.4 浏览器渲染与HTTP缓存浏览器相关的重头戏一个是渲染过程一个是缓存机制。渲染过程可以沿着“HTML解析 - 构建DOM和CSSOM - 合成渲染树 - 布局 - 绘制 - 合成”这条链路说。面试官比较在乎你对“重排”和“重绘”的理解改变几何属性会触发布局和绘制仅改变颜色或可见性通常只触发绘制或合成。性能优化的局部思路就藏在这几个环节里。HTTP缓存题我习惯用一张表来记住判断优先级Cache-Control的max-age、no-cache、no-storeExpiresETag/If-None-MatchLast-Modified/If-Modified-Since。尤其要注意的是Cache-Control: no-cache不是不缓存而是每次使用缓存前需要回源校验no-store才是禁止缓存。协商缓存字段中ETag的优先级高于Last-Modified因为ETag可以处理秒级内修改、内容没变但时间变了的情况。3. CSS与布局经常被忽略但容易卡住3.1 盒模型与垂直居中很多面试官喜欢用一道CSS题来探你的基本功深度比如“标准盒模型和怪异盒模型有什么区别”。这两个模型的核心区别在于width的计算范围标准盒模型width只是content怪异盒模型width包含content、padding和border。实际开发中通过box-sizing: border-box来切换。垂直居中这个问题我至少被问过三次。不同场景最优解不一样元素尺寸已知可以用margin负值不确定尺寸可以用flex或者绝对定位加transform单行文本直接line-height整个页面级别的居中可能要考虑撑满视口后的flex。我推荐优先使用flex的align-items和justify-content组合因为语义清晰且不需要额外的尺寸假设。但面试官追问“不用flex呢”时你得能答出绝对定位方案和table-cell方案。3.2 BFC与层叠上下文BFC块级格式化上下文是CSS里一个相对抽象的概念但面试官非常喜欢通过具体的现象问你比如“两个相邻div的margin为什么会合并”。BFC可以理解为一块独立的渲染区域它内部元素的布局不会影响外部内部与外部的margin也不会发生折叠。触发条件包括overflow不是visible、float不是none、position是absolute或fixed、display是inline-block或flex或grid等。我知道很多人背得出触发条件但不会用。建议多准备一个实际场景子元素float导致父元素高度塌陷时一种解法是给父元素创建BFC比如overflow:hidden这样父元素就会包含浮动的子元素。这比单纯使用clearfix更直观。层叠上下文则需要清楚z-index只作用于定位元素以及transform、opacity、filter等属性会创建新的层叠上下文这会影响z-index的比较范围。4. 框架与组件化Vue和React怎么聊4.1 虚拟DOM与diff算法无论你主用Vue还是React虚拟DOM和diff算法都是无法回避的题目。我通常这样回答虚拟DOM是一个描述真实DOM结构的JavaScript对象它的核心价值不是“比DOM快”而是提供可编程的UI描述能力让视图框架可以在内存中完成对比把最小更新集批量应用到真实DOM上。真实DOM的创建和样式计算开销相对较大但虚拟DOM的差异计算同样有成本所以很多场景下虚拟DOM并不比直接精准操作DOM快它换来的是开发效率和跨平台能力。diff算法的效率则是考察重点。经典的React diff有三个策略跨层级不移动、类型不同则重建、通过key复用节点。Vue的patch过程会做双端比较新旧节点列表的头和尾四个指针依次对比。我在面试中总结的一句话是“diff的核心是复用而不是算法炫技。”给列表每一项一个稳定唯一的key就是为了让diff阶段能够快速判断节点是否可复用。如果使用index当key在列表头部插入时key会让框架误以为后续所有节点都只是内容变化最终导致状态错乱。4.2 Vue响应式原理Vue系列的灵魂问题是“响应式原理”。Vue2和Vue3的差别非常大建议分开回答。Vue2使用Object.defineProperty拦截已有属性的get和set通过Dep收集依赖每个Watcher对应一个渲染或计算过程。对象新增或删除属性无法被拦截所以Vue2提供了Vue.set和Vue.delete。数组的push、pop等方法则是通过重写原型方法来实现响应式。Vue3选择了Proxy可以代理整个对象对新增属性和删除属性都能感知且不局限于对象本身。Proxy拦截的是所有基本操作配合Reflect使用可以修正this指向。不过Proxy也有兼容性问题并且代理对象在严格相等比较时可能表现异常。回答时可以补一句不管Vue2还是Vue3依赖收集的粒度都在变细Vue3通过effect和track/trigger机制实现并且依赖的是模块级的响应式系统可以脱离组件单独使用。4.3 React渲染机制与HooksReact侧的经典题是“为什么需要Fiber”。React的组件树递归渲染在更新复杂时容易阻塞主线程Fiber把更新过程拆成一个个小单元通过链表结构让渲染可中断、可恢复、可优先级调度。这个回答体现出的深度足够应对大部分问题。更细一点React的调和过程是会产生副作用的commit阶段才是真正把副作用提交到页面的阶段。Hooks相关的题我遇到过“为什么不能条件调用Hooks”和“useEffect闭包陷阱”两个高频点。前者是因为React按调用顺序保存Hook信息一旦顺序变化re-render时取到的状态会错位。后者则要举一个典型例子在useEffect里setInterval回调里读取state但state一直是最初的值因为回调闭包捕获了旧值。解决办法是使用useRef保存最新值或者把依赖项加全。回答时最好把思维上升到“Hooks就是让函数组件具有内部记忆能力”这个高度这样面试官能感受到你理解的是设计意图。4.4 框架对比和选型逻辑大厂前端一般不会只问一个框架。被问到“你怎么选型”时不能只说“Vue简单、React生态丰富”这种表面话。比较稳的回答角度是从响应式基础上看Vue是细粒度依赖更新React需要主动触发re-render从状态组织上看Vue的ref/reactive很直接React想做到类似效果需要外部状态库辅助从模板和组件边界上看Vue模板有静态标记优化React通过JSX获得更强的编程表达能力。选型逻辑一定要落到业务场景。比如中后台表单密集场景Vue的模板和响应式数据流可能让开发更顺滑大型跨端或复杂交互项目React的Hooks组合模式更自由。面试官真正想听的是你有自己的判断框架而不是站队。我一般还会补充一个点前端框架选型还要考虑团队技术积累和后续招人成本单一维度的技术优势在业务场景中并不决定一切。5. 工程化与构建流程5.1 Webpack核心链路工程化方面Webpack的构建原理是基础中的基础。我建议用一条时间线把流程穿起来配置entry/output - 解析模块依赖包括loader转换 - 生成模块记录module/chunk - chunk分包和代码生成 - plugin做输出前处理。面试官经常问“loader和plugin的区别”我的回答是loader被设计为模块处理函数输入文件内容输出转换后的内容plugin则是基于事件钩子的能力扩展能够触及构建生命周期中的任意阶段。Loader本身是纯函数属性顺序很重要。处理样式时use数组是倒序执行的sass-loader先编译scss然后css-loader处理CSS模块再通过style-loader或MiniCssExtractPlugin处理。这个问题曾经让我翻过车因为只看文档写法很容易忽略执行顺序。建议在准备时用一个最小demo验一次比死记结论强。5.2 Vite的快到底快在哪Vite是现在前端面试的高频概念。很多人都能回答“Vite基于原生ESM开发环境用esbuild预构建依赖”但这不是完整的答案。开发阶段Vite启动快是因为它不需要像Webpack那样先完整打包整个应用只是启动了一个按需编译的Dev Server浏览器请求哪个模块就转换哪个模块。通过esbuild预构建依赖则是把散落的CommonJS模块转成统一的ESM同时把大量请求合并成少数文件避免请求过多。HMR时Vite也是精确按模块更新比Webpack开发模式下的热更新体验更顺畅。但Vite在生产环境部分模块会有兼容性问题打包最终可能还是依赖Rollup。如果你在项目中实际搭建过Vite这些问题都可以聊。面试官更在意你有没有深入理解“按需”两个字的价值。5.3 微前端和模块联邦如果项目涉及中后台大规模协作微前端几乎必问。比较稳妥的回答框架是单体应用在大型团队里的痛点包括多团队独立发布、技术栈隔离、旧系统平滑迁移主流的实现方式包括路由级微服务、Web Components、Module Federation等。我面过一场对方直接问“qiankun的沙箱怎么做的”这个问题要能够答出JS隔离和CSS隔离的基本手段JS隔离通过Proxy快照或动态执行FunctionCSS隔离通过样式前缀或Shadow DOM。模块联邦Module Federation也是个值得说的点它允许不同构建产物之间共享模块和依赖可以实现运行时依赖加载。我不建议在不懂原理的情况下把概念背得很花哨面试官很容易追问“联邦模块和普通的npm包有什么区别”。核心区别是npm包是编译时依赖发布后更新版本需要重新构建依赖方模块联邦是运行时共享可以实现独立发布、独立构建。6. 性能优化与监控体系6.1 首屏优化思路性能优化是面试官检验项目真实性的最好试金石。我会按“前端资源链路”来答加载阶段 - 解析执行阶段 - 渲染阶段。加载阶段主要有减少HTTP请求、静态资源加CDN、图片格式选择、开启HTTP缓存、开启HTTP2/3解析执行阶段需要关注JS脚本的解析和执行时间所以有了代码分割、动态import、ES Module发布渲染阶段重点在CSS避免阻塞渲染、关键CSS内联、图片懒加载、骨架屏等。如果项目里做过具体优化一定要带数据。比如首屏时间从2.8s降到1.4s这背后做了哪些事情要有完整链路图片体积从多少MB降到多少KBLong Tasks从多少条降到多少条。面试官不会只看结果数据还会追问测量方式。回答测量方式时能提到PerformanceObserver和web-vitals就比只说“打开DevTools看”好很多。6.2 性能指标与线上监控线上监控是很多人容易忽略的点。面试官问“项目线上出问题怎么发现”时不能只回答有监控平台最好能说清三层前端性能数据上报、错误监控、告警机制。性能数据关注FCP、LCP、INP、CLS等Core Web Vitals指标错误监控需要拿sourceMap做错误堆栈还原区分语法错误、运行时错误和Promise异常。运行时错误可以通过window.onerror捕获Promise异常最好用unhandledrejection。数据上报需要注意采样率和批处理避免上报请求太多影响业务。监控平台要区分错误率和性能数据还需要做告警阈值设置。面试中我把这个讲清楚后面试官明显会更认可项目深度因为这展示了你对线上问题的全链路观察能力而不只是“我调过接口”。7. 手写题与算法题7.1 高频手写题及变体前端手写题基本集中在防抖、节流、深拷贝、Promise相关、apply/call/bind、数组去重、字符串转驼峰。手写题的坑不只是写不对而是要能应对追问。比如写防抖时面试官会问“如果用户在等待的时间里反复触发最后一次到底要不要执行你能控制吗”这时候要在防抖函数中加一个immediate参数以及取消操作。深拷贝更是一个大话题。基础版用JSON.parse(JSON.stringify())的坏处是什么丢失undefined、函数、Symbol、循环引用。手写版至少要处理循环引用我习惯用WeakMap保存已经拷贝过的目标对象。还要考虑拷贝Map、Set、日期、正则这类特殊情况。手写Promise.all时要注意传入空数组的返回值、Promise的then回调执行时机、以及错误处理逻辑。建议不要只背模板代码要理解每次测试用例的输出顺序。这里给一个手写深拷贝的可参考版本function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (map.has(target)) return map.get(target); const result Array.isArray(target) ? [] : target instanceof Date ? new Date(target) : target instanceof RegExp ? new RegExp(target.source, target.flags) : {}; map.set(target, result); for (const key of Reflect.ownKeys(target)) { result[key] deepClone(target[key], map); } return result; }7.2 算法题如何准备大厂前端不是每轮都出算法但一定会考至少一道中等难度的题。常见方向是数组去重、两数之和、三数之和、最长递增子序列、二叉树的层序遍历、链表的反转、以及“实现LRU缓存”。我的准备策略是分类刷题而不是按题号刷字符串处理、数组双指针、哈希表、二叉树遍历、动态规划入门、堆和栈。每种类型找三道典型题吃透比刷五十道但只看思路要可靠得多。LRU这道题很契合前端场景因为它和浏览器缓存淘汰策略有关。实现时用Map保存插入顺序get时先判断存在然后删除再重新插入set时处理容量超限时删除最久未用的Key。能做到O(1)的时间复杂度。算法题目不要只求跑对还要主动分析复杂度面试官非常看重这个。8. 项目问答与HR面8.1 项目描述与难点挖掘项目问题逃不开三个这个项目解决什么问题、你在项目中承担什么角色、过程中最大的难点是什么。我有一个很管用的方法是把项目描述分成三层。第一层用一两句话说清楚业务背景和用户价值第二层讲你负责的模块和技术架构不要覆盖全项目第三层是深度细节包括某个模块的组件设计、状态管理思路、接口性能优化、以及遇到的问题排查过程。难点一定要具体到“当时有几种方案、为什么选这个、放弃另一种方案的原因是什么”。我遇到过候选人包括我自己早期只会说“这个项目很复杂我做了很多优化”这种话没有任何信息量。比较稳的讲法是某个页面首屏加载慢排查发现是主包的第三方图表库太大然后通过按需加载和路由懒加载把包体从700多KB降到300多KB再配合骨架屏和接口优化把FCP从2.8s降到1.6s。量化数字和决策过程才能让面试官对你的能力有画面感。8.2 HR面常见问题与回答策略HR面不是走过场很多Offer最终卡在HR环节。常见问题包括为什么从上家公司离职、期望薪资、最近有没有看其他机会、如何看待压力和加班、职业规划是什么。回答离职原因时尽量不要说前东家的负面信息更不要说“太闲了”或“太卷了”最稳的是把离职原因往成长空间和业务方向上靠。职业规划建议别说得太虚可以这样讲未来一两年希望在某个技术方向上做深比如性能工程、跨端建设或者工程效能同时保持业务视角在合适的阶段可以承担技术owner的角色。HR在意的是稳定性和可预期性你给一个清晰但不过度激进的方向比喊一句“我要做架构师”要有说服力得多。9. 容易翻车的细节和避坑清单9.1 基础细节易错点我整理了一份容易翻车的细节清单分享出来。HTTP状态码里301是永久重定向302是临时重定向304是协商缓存命中401是未认证403是禁止访问502是网关错误503是服务不可用。CSS优先级是内联样式大于ID选择器大于类选择器大于标签选择器但计算时要注意层叠上下文会改变最终表现。JavaScript判断变量的类型时typeof null是objectArray.isArray([])为true这些都是简单但高频的陷阱。跨域问题也是必问点。JSONP只能支持GET请求CORS通过响应头实现代理适合开发环境postMessage适合跨域页面通信。线上项目中比较规范的方案是网关统一配置CORS或者反向代理。讲解跨域时要提“浏览器同源策略”是一种安全机制而不是接口是否真的能到达服务端不一定真的拒绝请求。9.2 心态与临场策略面试到后半程心态比知识更重要。我在三月份最大的一次教训是遇到不会的问题时急于编答案结果越描越黑。更专业的做法是明确说“这部分我在生产环境没有遇到过我基于以前的知识给一个推断”然后尽量把自己熟悉的关联技术说出来。面试官看重的是分析路径而不是正确答案。如果是手写题卡住一定要先写注释理清输入输出和边界条件哪怕最后没写完也会留下好印象。等面试全部结束我会把每个问题按“答得好、一般、没答上”三档标记没答上的全部回头查资料补上。这种复盘比多刷几套题更有价值。三月份面下来最大的体感是前端岗位的面试越来越像“开卷辩论”不是问你知不知道而是看你怎么思考、怎么权衡、怎么表达。把项目里每一个“当时为什么这么选”的决策想明白才是面对任何陌生问题的底气。如果你最近也在准备面试别只背答案拿一张纸把你做过的项目的技术决策都画出来这比什么都重要。
