作为一个刚满三年经验的前端，我去年下半年集中面了六七家还算知名的互联网公司，拿到的结果还算能看。这篇文章本来早该写，但一直拖到现在，主要是想把一手信息沉淀得认真一点：面了什么、被追问得最狠的是哪里、哪些准备是真有用的，哪些纯属浪费感情。既然是"上篇"，就先把最核心的基础八股、框架原理、手写题和浏览器网络这些内容梳理完。关于项目深挖、工程化、算法和软技能的部分，我放到"下篇"里单独讲，因为那部分展开来篇幅实在收不住。
我得先说清楚一个认知问题：三年经验的面试，和校招应届生面试，考察逻辑完全不是一回事。应届生看潜力，看基础扎不扎实；三年经验看的是你有没有在真实业务里被打磨过，是不是一个能用、好用的劳动力。面试官不会问你"闭包是什么"这种背诵题，而是会问"这个场景为什么用闭包""如果不用会怎么样""底层是怎么实现的"。所以如果你现在还停留在背八股文的阶段，那真的是在给面试官递刀。
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指向问题：从"四个绑定"到"为什么箭头函数不能变this"
this的指向问题在面试中往往结合着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 React：Fiber架构和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 关于面试节奏和时间安排的体会
三个月左右是准备面试比较理想的时间周期。前一个月专心补基础、刷手写题，中间三周到四周集中做模拟面试和项目深挖的准备，最后留两周左右投递和实战。不要拖太久，时间太长容易疲惫，状态反而会下滑。
我在面试那段时间，每周最多排两到三场面试，每场面试隔开一到两天，给自己留出复盘和查缺补漏的时间。面完一场，当场记录下面试官问到的所有问题，回家整理答案，第二天再看一遍。这样一个循环下来，你会发现自己的状态一场比一场好，越面越稳。面的公司多了之后，很多题目都是重复的，你甚至会开始期待面试官问到某些你有把握的问题。
最后，我想说的是，三年经验是一个很微妙的阶段，面试准备的过程其实是一次重新梳理自己知识体系的机会。就算你暂时没有跳槽的打算，这一套准备下来，你在日常开发中的效率和判断力也会提升一个层次。这篇"上篇"先把前端底层的部分聊完了，下一篇会接着聊项目深挖和工程化性能优化，这是三年经验面试里最能拉开差距的部分，也是很多人最容易轻敌的地方。等我把笔记再整理得细一些，尽量早点发出来。
