作为一个刚满三年经验的前端我去年下半年集中面了六七家还算知名的互联网公司拿到的结果还算能看。这篇文章本来早该写但一直拖到现在主要是想把一手信息沉淀得认真一点面了什么、被追问得最狠的是哪里、哪些准备是真有用的哪些纯属浪费感情。既然是上篇就先把最核心的基础八股、框架原理、手写题和浏览器网络这些内容梳理完。关于项目深挖、工程化、算法和软技能的部分我放到下篇里单独讲因为那部分展开来篇幅实在收不住。我得先说清楚一个认知问题三年经验的面试和校招应届生面试考察逻辑完全不是一回事。应届生看潜力看基础扎不扎实三年经验看的是你有没有在真实业务里被打磨过是不是一个能用、好用的劳动力。面试官不会问你闭包是什么这种背诵题而是会问这个场景为什么用闭包如果不用会怎么样底层是怎么实现的。所以如果你现在还停留在背八股文的阶段那真的是在给面试官递刀。1. 三年经验面试面试官到底想看什么三年这个节点很微妙。往小了说你已经不再是刚毕业的新人起码完整经历过一两个项目的上线、迭代、踩坑、重构往大了说你也没到资深专家的级别距离独立带方向、做技术决策还有一段路。所以面试官对你的预期大概落在能独立负责模块、有技术追求、遇到问题能自己搞定这个区间。1.1 为什么三年经验的人反而容易在基础题上翻车很多三年经验的前端都有个通病平时业务写得多基础反而生疏了。因为日常开发中你很少会手动继承一个类、手写一个节流函数、或者去思考浏览器缓存的具体字段。但面试就是要把这些平时不用的东西翻出来考。我见过不少候选人项目讲得头头是道一到new 一个对象的过程是怎样的就卡壳。这种反差是最劝退面试官的。面试官的潜台词是你的项目经验再丰富如果底层原理是空的那说明你只是赶上了好业务不是真本事。尤其在大厂业务迭代快今天让你做 A 业务明天可能就调去 B 业务如果你没有可迁移的底层能力那对团队来说就是个定时炸弹。1.2 中大厂面试流程的基本盘一般会面四到五轮不同公司略有差异但主流的结构大概是一轮电话初筛也有的省了、两到三轮技术面、一轮Leader面或交叉面、一轮HR面。技术面里一定有至少一轮是重点考察基础原理的一轮是重点考察项目深度的还有一轮可能会挂靠在系统设计或场景题上。我自己的经验是第一轮技术面往往是最硬核的问得最细、最八股。因为第一轮面试官的职责就是把你这个人过滤到一个及格线以上。后面几轮反而更偏综合会给你更多表达空间。所以不要把精力平均分配要预留出专门的精力把第一轮基础面可能涉及的所有知识点过一遍确保万无一失。1.3 三年经验面试的核心竞争策略基于上面的分析我的准备策略可以总结为三个关键词体系化、场景化、底层化。体系化不零散地背知识点而是把每个领域的知识串成一张网从原理出发推导出结论。场景化对每个知识点都准备一个对应的真实业务场景说明为什么需要它。底层化至少往深处追问两层比如知道HTTP缓存还不够还要知道Cache-Control字段下的no-cache和no-store的区别。这套策略帮我避开了很多坑。后面所有章节的内容本质上都是围绕这三个词展开的。2. JavaScript基础从背题到会讲题JavaScript基础是前端面试的内功也是三年经验面试绝对绕不开的重头戏。但同样一个知识点会背和会讲是两码事。面试官不是要你背定义而是要看你能不能把一个概念拆开、揉碎再结合例子讲清楚。2.1 原型与原型链不要去背去画一条查找链关于原型链凡是前端面试几乎必考。但我建议你不要去背实例的__proto__指向构造函数的prototype这种拗口的句子而是真的去画一张图。function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); }; const p new Person(Tom);当你执行p.sayName()时JS引擎做的事情是先在p自身找属性没找到就通过p.__proto__找到Person.prototype再找不到就继续往上找Object.prototype最后到null为止。这条链就是面试官想听的东西。被追问最多的点有两个p.constructor到底指向谁为什么有的时候constructor会丢instanceof的底层判断逻辑是啥能不能手写一个instanceof我的建议是把new操作符的手写实现和原型链放在一起复习因为它们本来就是一体两面。2.2 闭包和作用域从什么是闭包到闭包解决了什么问题三年经验的面试里几乎不会有人直接问闭包是什么。更常见的问法是这个场景有哪些解法为什要用闭包闭包的缺点是什么如何规避所谓闭包本质上是函数和其词法作用域的组合。它的核心能力是让一个函数继续访问其定义时的外部变量即使外部已经执行完毕。实际中最典型的应用有防抖节流、柯里化、单例模式、模块化封装。面试官比较在意的点是闭包会造成内存泄漏吗什么情况下会怎么解决闭包带来的内存占用问题我的回答思路是闭包本身不会必然导致内存泄漏真正的问题在于你持有了不该持有的引用。比如在全局变量上挂了一个巨大的闭包函数那它的整个作用域链都不会被释放。解决方案也很简单用完置为null或者尽量缩小闭包的引用范围。2.3 异步编程事件循环和Promise是重灾区三年经验的前端没写过Promise几乎是不可能的事。但面试时翻车最多的地方往往也在这setTimeout、Promise、async/await的执行顺序题Promise.all和Promise.allSettled的区别及实现微任务和宏任务的执行时机要想把这些题做对关键是要理解事件循环Event Loop。JS是单线程的所以遇到异步任务时不会一直等而是把任务放进对应的队列等主线程空了再取出来执行。宏任务像setTimeout放在宏任务队列微任务像Promise.then放在微任务队列每一轮事件循环会先把微任务队列清空再去取下一个宏任务。我遇到的高频题是console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4);答案是1、4、3、2。原因就是同步代码先执行完然后微任务Promise.then先于宏任务setTimeout执行。好那如果面试官再追问一层为什么微任务要先执行你怎么答我的理解是微任务和宏任务是两种不同优先级的任务队列微任务通常是由当前任务运行期间产生的轻量级后续操作比如Promise回调、queueMicrotask。这些操作应该在当前JS执行栈结束后、浏览器准备渲染或处理下一个宏任务之前尽快执行完。而宏任务往往是一些事件性或计时性的任务比如用户交互回调、网络请求回调、定时器它们的执行时机可以稍微靠后。既然微任务是为尽快而生的那自然要插在每一个宏任务结束后优先清空。这种理解比死记微任务先执行要有说服力得多。2.4 this指向问题从四个绑定到为什么箭头函数不能变thisthis的指向问题在面试中往往结合着call、apply、bind一起考。核心就四个绑定规则默认绑定、隐式绑定、显式绑定、new绑定。我复习的时候总结了几个最容易被问到的场景const obj { name: obj, fn: function() { console.log(this.name); } }; const fn obj.fn; fn(); // 这里this指向哪里输出什么答案是undefined严格模式或者window.name非严格模式因为fn()是裸调用丢失了obj上下文。还有一个经典追问箭头函数的this为什么不能通过call改变因为箭头函数根本没有自己的this它是在定义的时候就捕获了外层词法环境中的this。所以arrow.call(obj)是不起作用的你传的thisArg会被忽略。手写call、apply、bind也是大厂高频题。我建议每个都自己写一遍而且是完全脱离笔记地写。写完之后再对比优化版看看自己的边界处理是不是到位了。2.5 深拷贝和浅拷贝别只会JSON.stringify这个问题几乎必考。因为业务里用得太频繁了。基础版回答是区分浅拷贝只复制一层和深拷贝递归复制所有层级。但三年经验只回答到这个程度是不够的面试官会追问JSON.parse(JSON.stringify(obj))有什么缺陷如何处理循环引用如何处理Symbol、Function、Date、RegExp这些特殊类型我推荐的复习路径是这样的先写一个基础的递归深拷贝然后逐步增加处理Date、RegExp、Map、Set、Symbol的分支最后用WeakMap解决循环引用。这样整个过程走下来你会对类型判断、递归、引用传递理解得非常深。如果你能顺手讲讲structuredClone这个API在什么场景下可用那基本就是加分项了。3. 浏览器与网络大厂面试必问的底层逻辑前端写的代码最终都要跑在浏览器里所以浏览器工作原理和网络协议是三年经验面试的另一个重头戏。这部分的考察重点不在记忆而在理解与串联。比如输入一个URL到页面显示中间发生了什么这道题可以衍生出一套完整的知识体系。3.1 URL输入后发生了什么一条线串起所有考点面试官如果问你从输入URL到页面显示发生了什么他不是在考验你的记忆力而是想看看你能把这条链路讲得多深、多准确。标准回答链条是浏览器解析URL判断协议和资源类型DNS解析将域名映射成IP地址建立TCP连接三次握手发送HTTP请求服务器处理请求并返回响应浏览器解析HTML构建DOM树解析CSS构建CSSOM树DOM和CSSOM合并生成渲染树布局Layout计算每个节点的位置和大小绘制Paint将内容画到屏幕上这条链路里的每一步面试官都能展开追问。比如DNS解析是递归还是迭代的本地有没有缓存三次握手为什么不是两次HTTP/1.1和HTTP/2有什么区别渲染过程中遇到script标签会怎样async和defer有什么区别我个人的建议是不要试着背这条链路而是把它当成一个故事用讲故事的方式去复述。当你熟悉到能流畅地把每个环节像放电影一样讲出来的时候这道题你就不会慌了。3.2 HTTP缓存机制强缓存和协商缓存必须能画出流程图HTTP缓存是一个非常高频的考点因为它直接影响页面性能。面试官喜欢用场景来问如果用户第二次访问一个页面哪些资源是直接走缓存的哪些需要向服务器确认核心知识点是两对字段强缓存Expires绝对时间和Cache-Control相对时间。当资源命中强缓存时浏览器直接使用本地缓存不向服务器发送请求。协商缓存Last-Modified/If-Modified-Since和ETag/If-None-Match。协商缓存需要向服务器问一下服务器说没变就返回304然后浏览器用本地缓存。面试中常被追问的点Cache-Control有哪些常用指令no-cache和no-store有什么区别如果Expires和Cache-Control同时存在谁优先ETag比Last-Modified更精准的原因是什么最后的结论是Cache-Control优先no-cache是要用缓存但必须先验证no-store是完全不用缓存。ETag能解决Last-Modified的粒度问题因为后者只能精确到秒如果同一秒内文件被修改了两次Last-Modified就无法感知。3.3 跨域问题不只是JSONP和CORS跨域是面试必考的场景题。因为只要你做前端就一定会碰到跨域。三年经验如果你还说跨域解决方式就是JSONP和CORS那就太浅了。面试官想听的深度是这样的什么是同源策略为什么要有它CORS的简单请求和预检请求preflight怎么区分什么时候会触发预检请求postMessage、document.domain、location.hash这些方案各自适用什么场景开发环境常用的proxy配置和devServer跨域的底层原理是啥尤其是最后一点很多候选人开发时天天用webpack-dev-server的proxy但问他原理就懵了。其实原理很简单开发时前端跑在localhost:8080后端的接口在localhost:3000直连就跨域了。devServer的proxy会启动一个本地服务把前端的请求先打到自己这个服务上再由这个服务转发到后端。因为服务端到服务端之间没有浏览器的同源策略限制所以可以正常通行。同时响应头里会带上Access-Control-Allow-Origin浏览器校验通过后页面就能正常拿到数据了。一句话总结开发环境的跨域方案本质是让同源策略管不到的服务端去帮你转发请求。3.4 安全相关XSS和CSRF必答题安全问题在大厂面试中也是高频考点。因为大厂业务体量大只要出现安全漏洞影响就是巨大的。XSS跨站脚本攻击核心是注入脚本。防御方案有对用户输入做转义过滤、使用CSP内容安全策略、对Cookie设置HttpOnly。CSRF跨站请求伪造核心是诱导用户发起非预期请求。防御方案有校验Referer、使用Token、设置SameSite属性。面试官特别爱问这两种攻击有什么区别。我的回答思路是XSS是利用用户对网站的信任往页面里注入脚本CSRF是利用网站对用户浏览器的信任伪造用户的请求。角度不一样防御思路自然也就不一样。3.5 浏览器渲染过程中的性能关键点除了基础链路浏览器渲染性能也是三年经验面试绕不开的点。面试官会问到回流Reflow和重绘Repaint是什么为什么回流代价更高哪些操作会触发回流requestAnimationFrame有什么作用为什么说transform和opacity做动画更流畅这里的关键是理解渲染的流水线布局Layout和绘制Paint是两个不同的阶段。当你改一个元素的几何属性比如宽度、位置浏览器要重新做布局代价很高当你只改颜色、背景等外观属性只需要重绘。而transform和opacity会创建一个新的合成层浏览器可以在合成阶段做动画完全避开布局和绘制这就是为什么它们更流畅的底层原因。4. 框架原理跨过会用这道坎三年经验的前端如果简历上写了精通React或Vue面试官基本默认你已经看过核心源码。这不是高要求而是一个三年经验候选人应该具备的竞争力。框架原理这块的准备方式我总结了一句话不要背源码要去理解设计者的每个选择。4.1 ReactFiber架构和Hooks原理是两大追问区如果你是React技术栈面试官大概率会问这几个方向Fiber架构是为了解决什么问题老版React的Reconciliation过程是同步递归的一旦开始就不能中断如果组件树很深会阻塞主线程导致页面卡顿。Fiber把这个过程拆成一个个小单元每个小单元可以中断、可以恢复、可以分配优先级。这就是Concurrent Mode的基础。面试时你不用把Fiber的源码细节讲出来但要能说清楚为什么需要Fiber、Fiber节点大概长什么样、它和vdom的区别是什么、工作循环workLoop是怎么做到有时间就继续干活没时间就把控制权还给浏览器的。为什么Hooks不能写在条件语句里这个问题几乎是必考的。原因在于Hooks是基于链表的。React在每次渲染时按照调用顺序依次读取next指针如果在条件语句中使用了Hooks那么某次渲染时的Hook数量可能会和上次不同导致React拿到的Hooks顺序错位数据就会张冠李戴。所以React规定Hooks必须在组件顶层调用。useEffect和useLayoutEffect的区别这也是高频题核心是执行时机不同useEffect是异步执行的它会在渲染完成后、浏览器绘制之前被调度但很多场景下实际是在绘制后执行的useLayoutEffect是同步执行的在DOM变更之后、浏览器绘制之前执行。如果你需要在DOM变更后同步读取布局信息并做修改用useLayoutEffect可以避免闪烁。React.memo、useMemo、useCallback的使用边界很多人以为这三个东西是性能优化的银弹但面试官想听的恰恰是它们的使用边界和注意事项。比如useMemo和useCallback本质上都是用空间换时间如果你不结合React.memo使用往往没有意义甚至可能因为依赖数组的引用变化导致性能更差。Fiber架构、Hooks 的运行机制、合成事件、优先级调度、并发特性这些内容我已经单独整理过不少笔记面试前会集中过一遍。三年经验的候选人最好选择自己最熟悉的技术栈进行深入不要贪多React和Vue都精通的人反而容易被问到底细。4.2 Vue响应式原理是灵魂问题如果你是Vue技术栈或者简历中写了Vue那响应式原理的问题是怎么都躲不开的。面试官的追问链条通常是这样的Vue2的响应式是怎么实现的通过Object.defineProperty劫持对象的属性读写重写getter和setter在getter中收集依赖在setter中触发依赖更新。Vue3为什么改用Proxy因为Object.defineProperty有几个硬伤无法监听新增属性和删除属性无法监听数组的索引变化和长度变化所以Vue2才要重写数组方法需要对对象进行递归遍历一次性性能开销大而Proxy可以直接代理整个对象天然支持新增属性和数组特性而且是懒收集的初始性能更好。Vue3的组合式API是取代选项式API吗面试官问这个问题想考察的是你对Vue3设计理念的理解。组合式API是为了解决选项式API在复杂组件中逻辑碎片化的问题它让同一逻辑的代码可以聚合在一起提升了代码的可维护性和复用性。但它不是完全取代在简单组件中选项式API反而更直观。能讲出这种取舍感回答会比单纯背书好很多。Computed和Watch的区别这是一个看似简单、实则很能拉开差距的送分题。computed是依赖响应式数据自动缓存计算结果依赖不变就不重新计算它适合用在模板中派生数据的场景watch是监听某个数据源变化然后执行副作用逻辑适合用在异步操作、路由变化等非纯计算场景。关键是你能说出computed关注计算watch关注副作用这个本质区别。4.3 虚拟DOM和Diff算法一套思路吃透两家框架虚拟DOM和Diff算法在React和Vue面试中都会出现只是侧重点略有不同。掌握了核心思路两家居可以融会贯通。虚拟DOM的本质是什么是一个用JS对象来描述真实DOM结构的轻量级副本。因为直接操作真实DOM代价高所以先在虚拟DOM层面做比较最后只把差异部分一次性更新到真实DOM上。Diff算法的核心策略我总结为三个同层比较不跨层移动节点。不同类型节点直接重建不尝试复用。通过key来识别可复用的节点减少移动次数。面试官常追问的包括为什么要有key用数组索引做key有什么风险如果Diff算法是O(n)的复杂度它是怎么做到的回答这些问题的关键都在于理解以空间换时间、以约束换效率的设计思路。5. 手写题和高频代码输出题最好拿分也最容易失分手写题这块我总结了一个规律大厂难度并不是要你写出最优雅的实现而是要看你在边界情况下的处理能力。所以练习时不要只追求能跑通主流程一定要多想一步如果这里传进来一个null怎么办如果回调里抛异常怎么办。5.1 高频手写题的完整清单我把自己和同事们面试中遇到的手写题整理了一下下面这些几乎属于必练范畴防抖debounce和节流throttle深拷贝处理多种类型和循环引用手写Promise至少写Promise.resolve、Promise.all、Promise.race手写call、apply、bind手写new手写instanceof手写EventEmitter发布订阅手写reduce、map、filter手写compose函数组合手写LRU缓存这些题目看着不多但每道题都值得花二十分钟到半小时去精写一遍然后优化一遍最后再默写一遍。我的经验是只有默写过关才算真的掌握了凡是需要想一下的题在面试高压环境下基本都会卡壳。5.2 防抖和节流一道能拉开差距的题目防抖和节流看着简单实际上很多人在实现细节上都有漏洞。我先把基础版写出来function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } function throttle(fn, interval) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }面试官会追问的点一般是this绑定问题为什么内部要用fn.apply(this, args)因为返回的包装函数在调用时this可能已经变化了需要透传给原函数。立即执行版本防抖的第一次点击要不要立刻执行实现上有哪些变化取消操作如果组件卸载了怎么取消还没执行的防抖所以有些实现会返回一个带有cancel方法的函数。如果你能把上面这些问题都答出来这道题基本就是稳的。5.3 Promise.all 和 Promise.race 手写思路手写Promise.all的考点在于所有Promise都成功才返回成功数组任何一个失败立即失败。另外还要处理传入的数组里可能有普通值的情况以及返回的数组顺序要和输入顺序一致。我用Promise.all举例一个适合面试的写法是这样的Promise.myAll function(promises) { return new Promise((resolve, reject) { const results []; let count 0; const len promises.length; if (len 0) { resolve(results); return; } promises.forEach((promise, index) { Promise.resolve(promise).then( value { results[index] value; count; if (count len) resolve(results); }, reason { reject(reason); } ); }); }); };这里的关键细节是用index来保持结果顺序而不是用push的顺序用count来计数而不是直接判断results.length因为数组空位不会影响length。Promise.race的思路就简单多了谁先完成就采纳谁的结果。面试官往往会在这个基础上追问Promise.any你如果能把allSettled和any的差异也讲清楚那就是妥妥的加分项。5.4 代码输出题的应试技巧代码输出题基本是送分题但很多人在微任务宏任务和this指向这两类上丢分。做代码输出题我有一个习惯动作先不管输出结果先把代码的执行阶段画出来。同步代码、微任务、宏任务分三栏按时间顺序往里填然后再读结果。比如这段高频题async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() console.log(setTimeout), 0); async1(); Promise.resolve().then(() console.log(promise1)); console.log(script end);我先把同步代码标出来script start、async1 start、async2、script end。然后处理微任务async1 end和promise1的先后顺序要特别注意。await后面的代码等价于微任务注册它是在await行同步执行完后立刻注册的。而Promise.resolve().then是在async1()调用结束之后再注册的所以微任务队列里async1 end排在promise1前面。最后宏任务setTimeout排在最后。所以整体输出是script start、async1 start、async2、script end、async1 end、promise1、setTimeout。这种画表格的方式虽然笨但准确率极高。面试时哪怕没有笔也可以在脑子里按这个流程走一遍。6. 面试中那些答得好和答得差的差别基础题、手写题、框架题都只是知识储备。但如果你仔细观察那些拿到高评价的候选人就会发现他们有个共同特点回答问题有结构。同样一个知识点讲得有没有结构听感差异巨大。6.1 一个靠谱的回答结构结论-原因-例子-扩展我自己总结了一个四步回答法面试中屡试不爽结论用一到两句话直接回答问题是什么。原因解释这样设计或实现的底层原因。例子用一个具体、简短的代码或场景去佐证。扩展聊聊相关的知识点或潜在的优化空间。举个例子如果面试官问为什么const声明的对象还可以修改属性很多人的回答是因为const只锁定了引用地址没有锁定对象本身。这个结论没错但很单薄。用四步法扩展一下结论const锁定的是变量的绑定关系而不是对象内部的可变性。原因JS的变量实际上保存的是内存地址的引用const保证这个地址不能被重新赋值但并没有对对象内部的属性做冻结。例子const obj { a: 1 }; obj.a 2;是合法的但obj {}会报错。扩展如果真的想锁住对象内部可以用Object.freeze()但它是浅冻结深层属性还需要递归处理。这样回答面试官会觉得你不仅知道所以然还能举一反三。6.2 遇到不会的问题怎么处理才不扣分说实话三年经验的面试基本不可能每个问题都会。遇到不会的题很正常关键看你怎么应对。我的个人经验是以下三个原则不要急着说我不会先尝试拆解问题把自己能想到的部分说出来。如果确实毫无头绪就坦诚说这个细节我之前没有深入了解过然后补一句但根据我的经验它可能和xx有关。主动引导到自己的强项上比如这个话题我没法深入但如果你对xx感兴趣我可以详细讲讲。最忌讳的行为是不懂装懂、胡编乱造。面试官基本都是行家你编一个答案他一眼就能看穿这比你说不会败好感得多。6.3 关于反问环节不要只问加班多吗面试最后的反问环节很多人不重视觉得反正不影响结果。但实际上面试官会通过你的反问来判断你对这次机会的热情、思考深度和职业规划。我自己的经验是建议问这几类问题关于技术栈的咱们团队目前前端在重点投入的技术方向有哪些关于团队和业务的目前团队的规模大概是怎样的前端在这个业务里扮演的角色是什么关于成长的对于三年经验的候选人团队有什么样的培养路径不太建议一上来就问薪资福利和工作强度至少在技术面环节不要优先问。把这些留给HR面会更合适。你可能觉得反问环节无关痛痒但面试官私下交流时真的会因为一个高质量的反问而对候选人印象更好。我亲耳听过一个面试官说过那人技术一般但问的问题很有水平说明他真的有认真想过来之后怎么干活。你看一个好的反问能拉高一个人的整体评价。7. 准备策略和踩坑实录让你少走三个月的弯路分享完了知识点的部分最后想聊聊面试准备这件事本身。我准备面试那段时间其实走了不少弯路也总结出了一些特别值得说的体会希望你能避开。7.1 不要零散刷题要建立自己的面试知识地图很多人备战面试的时候今天看一道题明天看一道题最后发现知识还是零散的。我的做法是在正式开始复习前先拿出一张纸把前端基础知识分成几个大块JS语言基础、浏览器与网络、框架原理、工程化与性能优化、数据结构与算法、项目经历。然后在每个大块下面继续细分小项这个就是你的面试知识地图。后续每复习一个知识点就把它填充到地图的对应位置同时尽可能把不同分块的关联也标记出来。比如复习HTTP缓存顺手就把浏览器加载流程复习一遍复习React渲染流程顺手对照一下Vue的更新机制。这样坚持两周你的知识就不再是一堆孤立的点了而是一张真正互联的网。7.2 面试准备的三个重点角色录音复盘、输出驱动、限时训练这里分享三个让我受益非常明显的习惯录音复盘。我每次模拟面试都会录音。复盘的时候你会发现自己讲话时然后那个之类的口头禅特别多而且很多结论没有支撑就跳过去了。把这些都纠正过来真实面试时你的表达水准会上一个台阶。输出驱动。与其不停地看文章、看视频不如尝试把自己学过的每个知识点写成文章或口述出来。能讲给别人听才代表你真的懂了。我在准备过程中把很多知识点都用大白话讲给非前端的朋友听讲不明白的地方就是自己的薄弱点然后再回去补。限时训练。手写题的练习一定要限制时间。面试现场一个手写题通常只有五到十分钟你要是平时慢悠悠地写二十分钟面试时就会非常赶。给自己设一个倒计时模拟面试的紧张感适应这种节奏后真实面试的心理压力会小很多。7.3 我的简历踩坑和避坑建议简历这块我踩过的坑太多了说几个最值得注意的。第一个坑是名词堆砌。我第一版简历上写了十几项技术栈比如熟悉Webpack、Vite、Rollup、ESBuild、Babel、TypeScript、React、Vue、小程序等等。看着很丰富但面试官一眼就觉得全是了解级别。后来我砍掉了一大半最后只保留三项主技术栈每一项都有对应的项目成果背书效果反而好很多。第二个坑是只写做了什么不写带来了什么。正确的写法是不只是负责xx模块的开发而是负责xx模块的开发通过xx优化页面首屏时间从xx秒降低到xx秒。用具体的量化结果说话会比任何形容词都更有说服力。第三个坑是项目数量太多。三年经验的项目经历最多挑三到四个最出彩的写就足够了把每个项目都写细比把七八个项目都罗列一遍强得多。面试官面你的时候基本会从你简历里挑一两个项目深挖到底。而你准备得最细的那一两个项目如果恰好被问到整个面试的走向就会特别顺。7.4 关于面试节奏和时间安排的体会三个月左右是准备面试比较理想的时间周期。前一个月专心补基础、刷手写题中间三周到四周集中做模拟面试和项目深挖的准备最后留两周左右投递和实战。不要拖太久时间太长容易疲惫状态反而会下滑。我在面试那段时间每周最多排两到三场面试每场面试隔开一到两天给自己留出复盘和查缺补漏的时间。面完一场当场记录下面试官问到的所有问题回家整理答案第二天再看一遍。这样一个循环下来你会发现自己的状态一场比一场好越面越稳。面的公司多了之后很多题目都是重复的你甚至会开始期待面试官问到某些你有把握的问题。最后我想说的是三年经验是一个很微妙的阶段面试准备的过程其实是一次重新梳理自己知识体系的机会。就算你暂时没有跳槽的打算这一套准备下来你在日常开发中的效率和判断力也会提升一个层次。这篇上篇先把前端底层的部分聊完了下一篇会接着聊项目深挖和工程化性能优化这是三年经验面试里最能拉开差距的部分也是很多人最容易轻敌的地方。等我把笔记再整理得细一些尽量早点发出来。 三年经验前端面试核心考点与备战策略
作为一个刚满三年经验的前端我去年下半年集中面了六七家还算知名的互联网公司拿到的结果还算能看。这篇文章本来早该写但一直拖到现在主要是想把一手信息沉淀得认真一点面了什么、被追问得最狠的是哪里、哪些准备是真有用的哪些纯属浪费感情。既然是上篇就先把最核心的基础八股、框架原理、手写题和浏览器网络这些内容梳理完。关于项目深挖、工程化、算法和软技能的部分我放到下篇里单独讲因为那部分展开来篇幅实在收不住。我得先说清楚一个认知问题三年经验的面试和校招应届生面试考察逻辑完全不是一回事。应届生看潜力看基础扎不扎实三年经验看的是你有没有在真实业务里被打磨过是不是一个能用、好用的劳动力。面试官不会问你闭包是什么这种背诵题而是会问这个场景为什么用闭包如果不用会怎么样底层是怎么实现的。所以如果你现在还停留在背八股文的阶段那真的是在给面试官递刀。1. 三年经验面试面试官到底想看什么三年这个节点很微妙。往小了说你已经不再是刚毕业的新人起码完整经历过一两个项目的上线、迭代、踩坑、重构往大了说你也没到资深专家的级别距离独立带方向、做技术决策还有一段路。所以面试官对你的预期大概落在能独立负责模块、有技术追求、遇到问题能自己搞定这个区间。1.1 为什么三年经验的人反而容易在基础题上翻车很多三年经验的前端都有个通病平时业务写得多基础反而生疏了。因为日常开发中你很少会手动继承一个类、手写一个节流函数、或者去思考浏览器缓存的具体字段。但面试就是要把这些平时不用的东西翻出来考。我见过不少候选人项目讲得头头是道一到new 一个对象的过程是怎样的就卡壳。这种反差是最劝退面试官的。面试官的潜台词是你的项目经验再丰富如果底层原理是空的那说明你只是赶上了好业务不是真本事。尤其在大厂业务迭代快今天让你做 A 业务明天可能就调去 B 业务如果你没有可迁移的底层能力那对团队来说就是个定时炸弹。1.2 中大厂面试流程的基本盘一般会面四到五轮不同公司略有差异但主流的结构大概是一轮电话初筛也有的省了、两到三轮技术面、一轮Leader面或交叉面、一轮HR面。技术面里一定有至少一轮是重点考察基础原理的一轮是重点考察项目深度的还有一轮可能会挂靠在系统设计或场景题上。我自己的经验是第一轮技术面往往是最硬核的问得最细、最八股。因为第一轮面试官的职责就是把你这个人过滤到一个及格线以上。后面几轮反而更偏综合会给你更多表达空间。所以不要把精力平均分配要预留出专门的精力把第一轮基础面可能涉及的所有知识点过一遍确保万无一失。1.3 三年经验面试的核心竞争策略基于上面的分析我的准备策略可以总结为三个关键词体系化、场景化、底层化。体系化不零散地背知识点而是把每个领域的知识串成一张网从原理出发推导出结论。场景化对每个知识点都准备一个对应的真实业务场景说明为什么需要它。底层化至少往深处追问两层比如知道HTTP缓存还不够还要知道Cache-Control字段下的no-cache和no-store的区别。这套策略帮我避开了很多坑。后面所有章节的内容本质上都是围绕这三个词展开的。2. JavaScript基础从背题到会讲题JavaScript基础是前端面试的内功也是三年经验面试绝对绕不开的重头戏。但同样一个知识点会背和会讲是两码事。面试官不是要你背定义而是要看你能不能把一个概念拆开、揉碎再结合例子讲清楚。2.1 原型与原型链不要去背去画一条查找链关于原型链凡是前端面试几乎必考。但我建议你不要去背实例的__proto__指向构造函数的prototype这种拗口的句子而是真的去画一张图。function Person(name) { this.name name; } Person.prototype.sayName function() { console.log(this.name); }; const p new Person(Tom);当你执行p.sayName()时JS引擎做的事情是先在p自身找属性没找到就通过p.__proto__找到Person.prototype再找不到就继续往上找Object.prototype最后到null为止。这条链就是面试官想听的东西。被追问最多的点有两个p.constructor到底指向谁为什么有的时候constructor会丢instanceof的底层判断逻辑是啥能不能手写一个instanceof我的建议是把new操作符的手写实现和原型链放在一起复习因为它们本来就是一体两面。2.2 闭包和作用域从什么是闭包到闭包解决了什么问题三年经验的面试里几乎不会有人直接问闭包是什么。更常见的问法是这个场景有哪些解法为什要用闭包闭包的缺点是什么如何规避所谓闭包本质上是函数和其词法作用域的组合。它的核心能力是让一个函数继续访问其定义时的外部变量即使外部已经执行完毕。实际中最典型的应用有防抖节流、柯里化、单例模式、模块化封装。面试官比较在意的点是闭包会造成内存泄漏吗什么情况下会怎么解决闭包带来的内存占用问题我的回答思路是闭包本身不会必然导致内存泄漏真正的问题在于你持有了不该持有的引用。比如在全局变量上挂了一个巨大的闭包函数那它的整个作用域链都不会被释放。解决方案也很简单用完置为null或者尽量缩小闭包的引用范围。2.3 异步编程事件循环和Promise是重灾区三年经验的前端没写过Promise几乎是不可能的事。但面试时翻车最多的地方往往也在这setTimeout、Promise、async/await的执行顺序题Promise.all和Promise.allSettled的区别及实现微任务和宏任务的执行时机要想把这些题做对关键是要理解事件循环Event Loop。JS是单线程的所以遇到异步任务时不会一直等而是把任务放进对应的队列等主线程空了再取出来执行。宏任务像setTimeout放在宏任务队列微任务像Promise.then放在微任务队列每一轮事件循环会先把微任务队列清空再去取下一个宏任务。我遇到的高频题是console.log(1); setTimeout(() console.log(2), 0); Promise.resolve().then(() console.log(3)); console.log(4);答案是1、4、3、2。原因就是同步代码先执行完然后微任务Promise.then先于宏任务setTimeout执行。好那如果面试官再追问一层为什么微任务要先执行你怎么答我的理解是微任务和宏任务是两种不同优先级的任务队列微任务通常是由当前任务运行期间产生的轻量级后续操作比如Promise回调、queueMicrotask。这些操作应该在当前JS执行栈结束后、浏览器准备渲染或处理下一个宏任务之前尽快执行完。而宏任务往往是一些事件性或计时性的任务比如用户交互回调、网络请求回调、定时器它们的执行时机可以稍微靠后。既然微任务是为尽快而生的那自然要插在每一个宏任务结束后优先清空。这种理解比死记微任务先执行要有说服力得多。2.4 this指向问题从四个绑定到为什么箭头函数不能变thisthis的指向问题在面试中往往结合着call、apply、bind一起考。核心就四个绑定规则默认绑定、隐式绑定、显式绑定、new绑定。我复习的时候总结了几个最容易被问到的场景const obj { name: obj, fn: function() { console.log(this.name); } }; const fn obj.fn; fn(); // 这里this指向哪里输出什么答案是undefined严格模式或者window.name非严格模式因为fn()是裸调用丢失了obj上下文。还有一个经典追问箭头函数的this为什么不能通过call改变因为箭头函数根本没有自己的this它是在定义的时候就捕获了外层词法环境中的this。所以arrow.call(obj)是不起作用的你传的thisArg会被忽略。手写call、apply、bind也是大厂高频题。我建议每个都自己写一遍而且是完全脱离笔记地写。写完之后再对比优化版看看自己的边界处理是不是到位了。2.5 深拷贝和浅拷贝别只会JSON.stringify这个问题几乎必考。因为业务里用得太频繁了。基础版回答是区分浅拷贝只复制一层和深拷贝递归复制所有层级。但三年经验只回答到这个程度是不够的面试官会追问JSON.parse(JSON.stringify(obj))有什么缺陷如何处理循环引用如何处理Symbol、Function、Date、RegExp这些特殊类型我推荐的复习路径是这样的先写一个基础的递归深拷贝然后逐步增加处理Date、RegExp、Map、Set、Symbol的分支最后用WeakMap解决循环引用。这样整个过程走下来你会对类型判断、递归、引用传递理解得非常深。如果你能顺手讲讲structuredClone这个API在什么场景下可用那基本就是加分项了。3. 浏览器与网络大厂面试必问的底层逻辑前端写的代码最终都要跑在浏览器里所以浏览器工作原理和网络协议是三年经验面试的另一个重头戏。这部分的考察重点不在记忆而在理解与串联。比如输入一个URL到页面显示中间发生了什么这道题可以衍生出一套完整的知识体系。3.1 URL输入后发生了什么一条线串起所有考点面试官如果问你从输入URL到页面显示发生了什么他不是在考验你的记忆力而是想看看你能把这条链路讲得多深、多准确。标准回答链条是浏览器解析URL判断协议和资源类型DNS解析将域名映射成IP地址建立TCP连接三次握手发送HTTP请求服务器处理请求并返回响应浏览器解析HTML构建DOM树解析CSS构建CSSOM树DOM和CSSOM合并生成渲染树布局Layout计算每个节点的位置和大小绘制Paint将内容画到屏幕上这条链路里的每一步面试官都能展开追问。比如DNS解析是递归还是迭代的本地有没有缓存三次握手为什么不是两次HTTP/1.1和HTTP/2有什么区别渲染过程中遇到script标签会怎样async和defer有什么区别我个人的建议是不要试着背这条链路而是把它当成一个故事用讲故事的方式去复述。当你熟悉到能流畅地把每个环节像放电影一样讲出来的时候这道题你就不会慌了。3.2 HTTP缓存机制强缓存和协商缓存必须能画出流程图HTTP缓存是一个非常高频的考点因为它直接影响页面性能。面试官喜欢用场景来问如果用户第二次访问一个页面哪些资源是直接走缓存的哪些需要向服务器确认核心知识点是两对字段强缓存Expires绝对时间和Cache-Control相对时间。当资源命中强缓存时浏览器直接使用本地缓存不向服务器发送请求。协商缓存Last-Modified/If-Modified-Since和ETag/If-None-Match。协商缓存需要向服务器问一下服务器说没变就返回304然后浏览器用本地缓存。面试中常被追问的点Cache-Control有哪些常用指令no-cache和no-store有什么区别如果Expires和Cache-Control同时存在谁优先ETag比Last-Modified更精准的原因是什么最后的结论是Cache-Control优先no-cache是要用缓存但必须先验证no-store是完全不用缓存。ETag能解决Last-Modified的粒度问题因为后者只能精确到秒如果同一秒内文件被修改了两次Last-Modified就无法感知。3.3 跨域问题不只是JSONP和CORS跨域是面试必考的场景题。因为只要你做前端就一定会碰到跨域。三年经验如果你还说跨域解决方式就是JSONP和CORS那就太浅了。面试官想听的深度是这样的什么是同源策略为什么要有它CORS的简单请求和预检请求preflight怎么区分什么时候会触发预检请求postMessage、document.domain、location.hash这些方案各自适用什么场景开发环境常用的proxy配置和devServer跨域的底层原理是啥尤其是最后一点很多候选人开发时天天用webpack-dev-server的proxy但问他原理就懵了。其实原理很简单开发时前端跑在localhost:8080后端的接口在localhost:3000直连就跨域了。devServer的proxy会启动一个本地服务把前端的请求先打到自己这个服务上再由这个服务转发到后端。因为服务端到服务端之间没有浏览器的同源策略限制所以可以正常通行。同时响应头里会带上Access-Control-Allow-Origin浏览器校验通过后页面就能正常拿到数据了。一句话总结开发环境的跨域方案本质是让同源策略管不到的服务端去帮你转发请求。3.4 安全相关XSS和CSRF必答题安全问题在大厂面试中也是高频考点。因为大厂业务体量大只要出现安全漏洞影响就是巨大的。XSS跨站脚本攻击核心是注入脚本。防御方案有对用户输入做转义过滤、使用CSP内容安全策略、对Cookie设置HttpOnly。CSRF跨站请求伪造核心是诱导用户发起非预期请求。防御方案有校验Referer、使用Token、设置SameSite属性。面试官特别爱问这两种攻击有什么区别。我的回答思路是XSS是利用用户对网站的信任往页面里注入脚本CSRF是利用网站对用户浏览器的信任伪造用户的请求。角度不一样防御思路自然也就不一样。3.5 浏览器渲染过程中的性能关键点除了基础链路浏览器渲染性能也是三年经验面试绕不开的点。面试官会问到回流Reflow和重绘Repaint是什么为什么回流代价更高哪些操作会触发回流requestAnimationFrame有什么作用为什么说transform和opacity做动画更流畅这里的关键是理解渲染的流水线布局Layout和绘制Paint是两个不同的阶段。当你改一个元素的几何属性比如宽度、位置浏览器要重新做布局代价很高当你只改颜色、背景等外观属性只需要重绘。而transform和opacity会创建一个新的合成层浏览器可以在合成阶段做动画完全避开布局和绘制这就是为什么它们更流畅的底层原因。4. 框架原理跨过会用这道坎三年经验的前端如果简历上写了精通React或Vue面试官基本默认你已经看过核心源码。这不是高要求而是一个三年经验候选人应该具备的竞争力。框架原理这块的准备方式我总结了一句话不要背源码要去理解设计者的每个选择。4.1 ReactFiber架构和Hooks原理是两大追问区如果你是React技术栈面试官大概率会问这几个方向Fiber架构是为了解决什么问题老版React的Reconciliation过程是同步递归的一旦开始就不能中断如果组件树很深会阻塞主线程导致页面卡顿。Fiber把这个过程拆成一个个小单元每个小单元可以中断、可以恢复、可以分配优先级。这就是Concurrent Mode的基础。面试时你不用把Fiber的源码细节讲出来但要能说清楚为什么需要Fiber、Fiber节点大概长什么样、它和vdom的区别是什么、工作循环workLoop是怎么做到有时间就继续干活没时间就把控制权还给浏览器的。为什么Hooks不能写在条件语句里这个问题几乎是必考的。原因在于Hooks是基于链表的。React在每次渲染时按照调用顺序依次读取next指针如果在条件语句中使用了Hooks那么某次渲染时的Hook数量可能会和上次不同导致React拿到的Hooks顺序错位数据就会张冠李戴。所以React规定Hooks必须在组件顶层调用。useEffect和useLayoutEffect的区别这也是高频题核心是执行时机不同useEffect是异步执行的它会在渲染完成后、浏览器绘制之前被调度但很多场景下实际是在绘制后执行的useLayoutEffect是同步执行的在DOM变更之后、浏览器绘制之前执行。如果你需要在DOM变更后同步读取布局信息并做修改用useLayoutEffect可以避免闪烁。React.memo、useMemo、useCallback的使用边界很多人以为这三个东西是性能优化的银弹但面试官想听的恰恰是它们的使用边界和注意事项。比如useMemo和useCallback本质上都是用空间换时间如果你不结合React.memo使用往往没有意义甚至可能因为依赖数组的引用变化导致性能更差。Fiber架构、Hooks 的运行机制、合成事件、优先级调度、并发特性这些内容我已经单独整理过不少笔记面试前会集中过一遍。三年经验的候选人最好选择自己最熟悉的技术栈进行深入不要贪多React和Vue都精通的人反而容易被问到底细。4.2 Vue响应式原理是灵魂问题如果你是Vue技术栈或者简历中写了Vue那响应式原理的问题是怎么都躲不开的。面试官的追问链条通常是这样的Vue2的响应式是怎么实现的通过Object.defineProperty劫持对象的属性读写重写getter和setter在getter中收集依赖在setter中触发依赖更新。Vue3为什么改用Proxy因为Object.defineProperty有几个硬伤无法监听新增属性和删除属性无法监听数组的索引变化和长度变化所以Vue2才要重写数组方法需要对对象进行递归遍历一次性性能开销大而Proxy可以直接代理整个对象天然支持新增属性和数组特性而且是懒收集的初始性能更好。Vue3的组合式API是取代选项式API吗面试官问这个问题想考察的是你对Vue3设计理念的理解。组合式API是为了解决选项式API在复杂组件中逻辑碎片化的问题它让同一逻辑的代码可以聚合在一起提升了代码的可维护性和复用性。但它不是完全取代在简单组件中选项式API反而更直观。能讲出这种取舍感回答会比单纯背书好很多。Computed和Watch的区别这是一个看似简单、实则很能拉开差距的送分题。computed是依赖响应式数据自动缓存计算结果依赖不变就不重新计算它适合用在模板中派生数据的场景watch是监听某个数据源变化然后执行副作用逻辑适合用在异步操作、路由变化等非纯计算场景。关键是你能说出computed关注计算watch关注副作用这个本质区别。4.3 虚拟DOM和Diff算法一套思路吃透两家框架虚拟DOM和Diff算法在React和Vue面试中都会出现只是侧重点略有不同。掌握了核心思路两家居可以融会贯通。虚拟DOM的本质是什么是一个用JS对象来描述真实DOM结构的轻量级副本。因为直接操作真实DOM代价高所以先在虚拟DOM层面做比较最后只把差异部分一次性更新到真实DOM上。Diff算法的核心策略我总结为三个同层比较不跨层移动节点。不同类型节点直接重建不尝试复用。通过key来识别可复用的节点减少移动次数。面试官常追问的包括为什么要有key用数组索引做key有什么风险如果Diff算法是O(n)的复杂度它是怎么做到的回答这些问题的关键都在于理解以空间换时间、以约束换效率的设计思路。5. 手写题和高频代码输出题最好拿分也最容易失分手写题这块我总结了一个规律大厂难度并不是要你写出最优雅的实现而是要看你在边界情况下的处理能力。所以练习时不要只追求能跑通主流程一定要多想一步如果这里传进来一个null怎么办如果回调里抛异常怎么办。5.1 高频手写题的完整清单我把自己和同事们面试中遇到的手写题整理了一下下面这些几乎属于必练范畴防抖debounce和节流throttle深拷贝处理多种类型和循环引用手写Promise至少写Promise.resolve、Promise.all、Promise.race手写call、apply、bind手写new手写instanceof手写EventEmitter发布订阅手写reduce、map、filter手写compose函数组合手写LRU缓存这些题目看着不多但每道题都值得花二十分钟到半小时去精写一遍然后优化一遍最后再默写一遍。我的经验是只有默写过关才算真的掌握了凡是需要想一下的题在面试高压环境下基本都会卡壳。5.2 防抖和节流一道能拉开差距的题目防抖和节流看着简单实际上很多人在实现细节上都有漏洞。我先把基础版写出来function debounce(fn, delay) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } function throttle(fn, interval) { let last 0; return function(...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }面试官会追问的点一般是this绑定问题为什么内部要用fn.apply(this, args)因为返回的包装函数在调用时this可能已经变化了需要透传给原函数。立即执行版本防抖的第一次点击要不要立刻执行实现上有哪些变化取消操作如果组件卸载了怎么取消还没执行的防抖所以有些实现会返回一个带有cancel方法的函数。如果你能把上面这些问题都答出来这道题基本就是稳的。5.3 Promise.all 和 Promise.race 手写思路手写Promise.all的考点在于所有Promise都成功才返回成功数组任何一个失败立即失败。另外还要处理传入的数组里可能有普通值的情况以及返回的数组顺序要和输入顺序一致。我用Promise.all举例一个适合面试的写法是这样的Promise.myAll function(promises) { return new Promise((resolve, reject) { const results []; let count 0; const len promises.length; if (len 0) { resolve(results); return; } promises.forEach((promise, index) { Promise.resolve(promise).then( value { results[index] value; count; if (count len) resolve(results); }, reason { reject(reason); } ); }); }); };这里的关键细节是用index来保持结果顺序而不是用push的顺序用count来计数而不是直接判断results.length因为数组空位不会影响length。Promise.race的思路就简单多了谁先完成就采纳谁的结果。面试官往往会在这个基础上追问Promise.any你如果能把allSettled和any的差异也讲清楚那就是妥妥的加分项。5.4 代码输出题的应试技巧代码输出题基本是送分题但很多人在微任务宏任务和this指向这两类上丢分。做代码输出题我有一个习惯动作先不管输出结果先把代码的执行阶段画出来。同步代码、微任务、宏任务分三栏按时间顺序往里填然后再读结果。比如这段高频题async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() console.log(setTimeout), 0); async1(); Promise.resolve().then(() console.log(promise1)); console.log(script end);我先把同步代码标出来script start、async1 start、async2、script end。然后处理微任务async1 end和promise1的先后顺序要特别注意。await后面的代码等价于微任务注册它是在await行同步执行完后立刻注册的。而Promise.resolve().then是在async1()调用结束之后再注册的所以微任务队列里async1 end排在promise1前面。最后宏任务setTimeout排在最后。所以整体输出是script start、async1 start、async2、script end、async1 end、promise1、setTimeout。这种画表格的方式虽然笨但准确率极高。面试时哪怕没有笔也可以在脑子里按这个流程走一遍。6. 面试中那些答得好和答得差的差别基础题、手写题、框架题都只是知识储备。但如果你仔细观察那些拿到高评价的候选人就会发现他们有个共同特点回答问题有结构。同样一个知识点讲得有没有结构听感差异巨大。6.1 一个靠谱的回答结构结论-原因-例子-扩展我自己总结了一个四步回答法面试中屡试不爽结论用一到两句话直接回答问题是什么。原因解释这样设计或实现的底层原因。例子用一个具体、简短的代码或场景去佐证。扩展聊聊相关的知识点或潜在的优化空间。举个例子如果面试官问为什么const声明的对象还可以修改属性很多人的回答是因为const只锁定了引用地址没有锁定对象本身。这个结论没错但很单薄。用四步法扩展一下结论const锁定的是变量的绑定关系而不是对象内部的可变性。原因JS的变量实际上保存的是内存地址的引用const保证这个地址不能被重新赋值但并没有对对象内部的属性做冻结。例子const obj { a: 1 }; obj.a 2;是合法的但obj {}会报错。扩展如果真的想锁住对象内部可以用Object.freeze()但它是浅冻结深层属性还需要递归处理。这样回答面试官会觉得你不仅知道所以然还能举一反三。6.2 遇到不会的问题怎么处理才不扣分说实话三年经验的面试基本不可能每个问题都会。遇到不会的题很正常关键看你怎么应对。我的个人经验是以下三个原则不要急着说我不会先尝试拆解问题把自己能想到的部分说出来。如果确实毫无头绪就坦诚说这个细节我之前没有深入了解过然后补一句但根据我的经验它可能和xx有关。主动引导到自己的强项上比如这个话题我没法深入但如果你对xx感兴趣我可以详细讲讲。最忌讳的行为是不懂装懂、胡编乱造。面试官基本都是行家你编一个答案他一眼就能看穿这比你说不会败好感得多。6.3 关于反问环节不要只问加班多吗面试最后的反问环节很多人不重视觉得反正不影响结果。但实际上面试官会通过你的反问来判断你对这次机会的热情、思考深度和职业规划。我自己的经验是建议问这几类问题关于技术栈的咱们团队目前前端在重点投入的技术方向有哪些关于团队和业务的目前团队的规模大概是怎样的前端在这个业务里扮演的角色是什么关于成长的对于三年经验的候选人团队有什么样的培养路径不太建议一上来就问薪资福利和工作强度至少在技术面环节不要优先问。把这些留给HR面会更合适。你可能觉得反问环节无关痛痒但面试官私下交流时真的会因为一个高质量的反问而对候选人印象更好。我亲耳听过一个面试官说过那人技术一般但问的问题很有水平说明他真的有认真想过来之后怎么干活。你看一个好的反问能拉高一个人的整体评价。7. 准备策略和踩坑实录让你少走三个月的弯路分享完了知识点的部分最后想聊聊面试准备这件事本身。我准备面试那段时间其实走了不少弯路也总结出了一些特别值得说的体会希望你能避开。7.1 不要零散刷题要建立自己的面试知识地图很多人备战面试的时候今天看一道题明天看一道题最后发现知识还是零散的。我的做法是在正式开始复习前先拿出一张纸把前端基础知识分成几个大块JS语言基础、浏览器与网络、框架原理、工程化与性能优化、数据结构与算法、项目经历。然后在每个大块下面继续细分小项这个就是你的面试知识地图。后续每复习一个知识点就把它填充到地图的对应位置同时尽可能把不同分块的关联也标记出来。比如复习HTTP缓存顺手就把浏览器加载流程复习一遍复习React渲染流程顺手对照一下Vue的更新机制。这样坚持两周你的知识就不再是一堆孤立的点了而是一张真正互联的网。7.2 面试准备的三个重点角色录音复盘、输出驱动、限时训练这里分享三个让我受益非常明显的习惯录音复盘。我每次模拟面试都会录音。复盘的时候你会发现自己讲话时然后那个之类的口头禅特别多而且很多结论没有支撑就跳过去了。把这些都纠正过来真实面试时你的表达水准会上一个台阶。输出驱动。与其不停地看文章、看视频不如尝试把自己学过的每个知识点写成文章或口述出来。能讲给别人听才代表你真的懂了。我在准备过程中把很多知识点都用大白话讲给非前端的朋友听讲不明白的地方就是自己的薄弱点然后再回去补。限时训练。手写题的练习一定要限制时间。面试现场一个手写题通常只有五到十分钟你要是平时慢悠悠地写二十分钟面试时就会非常赶。给自己设一个倒计时模拟面试的紧张感适应这种节奏后真实面试的心理压力会小很多。7.3 我的简历踩坑和避坑建议简历这块我踩过的坑太多了说几个最值得注意的。第一个坑是名词堆砌。我第一版简历上写了十几项技术栈比如熟悉Webpack、Vite、Rollup、ESBuild、Babel、TypeScript、React、Vue、小程序等等。看着很丰富但面试官一眼就觉得全是了解级别。后来我砍掉了一大半最后只保留三项主技术栈每一项都有对应的项目成果背书效果反而好很多。第二个坑是只写做了什么不写带来了什么。正确的写法是不只是负责xx模块的开发而是负责xx模块的开发通过xx优化页面首屏时间从xx秒降低到xx秒。用具体的量化结果说话会比任何形容词都更有说服力。第三个坑是项目数量太多。三年经验的项目经历最多挑三到四个最出彩的写就足够了把每个项目都写细比把七八个项目都罗列一遍强得多。面试官面你的时候基本会从你简历里挑一两个项目深挖到底。而你准备得最细的那一两个项目如果恰好被问到整个面试的走向就会特别顺。7.4 关于面试节奏和时间安排的体会三个月左右是准备面试比较理想的时间周期。前一个月专心补基础、刷手写题中间三周到四周集中做模拟面试和项目深挖的准备最后留两周左右投递和实战。不要拖太久时间太长容易疲惫状态反而会下滑。我在面试那段时间每周最多排两到三场面试每场面试隔开一到两天给自己留出复盘和查缺补漏的时间。面完一场当场记录下面试官问到的所有问题回家整理答案第二天再看一遍。这样一个循环下来你会发现自己的状态一场比一场好越面越稳。面的公司多了之后很多题目都是重复的你甚至会开始期待面试官问到某些你有把握的问题。最后我想说的是三年经验是一个很微妙的阶段面试准备的过程其实是一次重新梳理自己知识体系的机会。就算你暂时没有跳槽的打算这一套准备下来你在日常开发中的效率和判断力也会提升一个层次。这篇上篇先把前端底层的部分聊完了下一篇会接着聊项目深挖和工程化性能优化这是三年经验面试里最能拉开差距的部分也是很多人最容易轻敌的地方。等我把笔记再整理得细一些尽量早点发出来。