2023年那场小满春招第二批笔试题我到现在还留着草稿纸。当时大环境不算好Web前端岗位的竞争比往年激烈不少笔试刷人刷得特别狠。我最后能走到offer环节靠的不完全是运气更多是考前把常见考点吃透了尤其是那些看似基础、实则暗藏坑的题目。这篇就把我当时拿到的那套题结合我自己的答题思路和事后复盘完整拆一遍。题型分布、知识点覆盖、解题过程、踩坑记录都会讲到。如果你是准备校招或者实习面试的这套题的含金量很高值得认真走一遍。1. 内容整体设计与思路拆解1.1 笔试考察的核心方向这套笔试整体分四个部分计算机基础、JavaScript语言深度、浏览器与工程化、代码实战。满分100分考试时间90分钟。从试卷结构能明显感觉到面试官想看的是扎实的语言功底和工程思维不是背了多少API。计算机基础部分考察了网络协议、数据结构题目不多但很典型。JavaScript部分分值最高占了将近40分涉及原型链、闭包、异步、this绑定这些高频考点。浏览器与工程化部分考了渲染流程、缓存机制、模块化、构建工具。最后的代码实战有两道题一道是算法题一道是手写源码题。这种出题逻辑其实反映了当前Web前端岗位的真实需求基础要牢语言要熟工程化思维要有动手能力不能虚。如果你只刷过各种框架的API文档这套题会做得很吃力。1.2 出题人的考察意图分析把整套题看完能明显感觉到出题人不是随便拼题的每一道都在考察特定的能力维度基础题考察的是你大学四年有没有认真上计算机基础课计算机网络、数据结构这些科班功底是后续发展的天花板。JavaScript题目考察的是真正理解了还是只停留在会用的层面。很多应届生项目经验丰富但是问到底层原理就含糊不清这类题目专门筛选这种情况。工程化题目紧跟行业实践考察你是否真的在真实项目中折腾过而不是只写了几个demo页面。实战题考察的是在线编码能力和代码风格45分钟内完成两道题时间安排和思路清晰度都很关键。这样一套组合拳下来基本能把“背题型选手”和“实战型选手”区分清楚。所以如果你要准备这种笔试不要只看知识点清单更要理解每道题背后的考察意图。2. 核心细节解析与实操要点2.1 计算机基础题网络与数据结构的必考点这套题第一部分考了三个题目难度不高但很典型。第一题是TCP三次握手的过程描述。这个属于必考中的必考但很多同学答不完整。要答好这道题不能只写“客户端发SYN服务端回SYNACK客户端再回ACK”得把每个状态说清楚包括为什么是三次而不是两次以及SYN Flood攻击为什么利用了这个机制。我当时还补充了序列号初始化的意义这会让面试官觉得你是真的懂网络而不是背了流程。第二题是数组和链表的区别与适用场景。这种题看起来简单但想拿满分需要答出几个维度内存分配方式、插入删除时间复杂度、随机访问时间复杂度、缓存局部性。我在答题时用了表格对比的方式把时间复杂度一列列列清楚然后举了实际场景的例子比如LRU缓存用链表、频繁按下标访问用数组。第三题是哈希表的冲突解决方法。拉链法和开放定址法都要写出来还要说明各自的优缺点。我当时还提到了Java HashMap在链表长度超过阈值时转红黑树的优化虽然这是偏向后端的内容但能体现知识面的广度。这类基础题的经验是不要只背结论要把“为什么”准备到位。面试官后续追问往往是顺着你的答案深挖你答得越深入后续压力反而越小。2.2 JavaScript基础原型、闭包、this绑定与异步第二部分的JavaScript题目是整套题的核心我一个个拆。原型链考了一道代码输出题让我写出构造函数的实例查找属性的完整链路过。这道题的本质是考察__proto__和prototype的关系。我当时的答题方式是画了一条完整的链实例对象 → 构造函数.prototype → Object.prototype → null然后把每个环节的属性查找逻辑标注出来。闭包考了一道经典场景题写一个计数器函数每次调用返回的值加一。这个看似简单但考察的是闭包的形成条件和变量生命周期。我当时写的答案是立即执行函数加闭包实现的模块化计数器还额外说明如果不用闭包变量会被全局污染的问题。this绑定考了四种调用方式的输出结果包括普通函数调用、对象方法调用、call/apply调用、new调用。这种题没有技巧只能把规则彻底搞清楚。我记得有一道是考察箭头函数不绑定this的特性箭头函数的this是在定义时确定的。这题我很确定自己答对了因为有道题里的setTimeout回调用了箭头函数this指向定义时的外层对象而不是window。异步考察了事件循环和Promise的输出顺序。当时给了一段代码有同步代码、setTimeout、Promise.then要求写出输出顺序。这个考点需要理解宏任务和微任务的执行顺序Promise构造函数内的代码是同步执行的resolve之后注册的then回调才是微任务。我的记忆口诀是同步先跑、微任务先于宏任务、每个宏任务结束后清空微任务队列。给准备笔试的同学一个建议JavaScript部分的题目一定要自己动手写代码验证。很多人就靠看题以为懂了实际上手全是错。每一种this绑定场景、每一个异步输出顺序都用Node跑一遍比看十遍文章都管用。2.3 浏览器与工程化从加载到构建的全链路理解这部分考察了浏览器从输入URL到页面展示的完整过程、HTTP缓存机制、ESModule和CommonJS的区别、打包工具的核心原理。URL到页面展示这道题我在答题时尽量写完整DNS解析、TCP连接、TLS握手、HTTP请求、服务器返回HTML、浏览器解析HTML构建DOM树、解析CSS构建CSSOM树、合成RenderTree、布局、绘制、合成。每一步展开说明可能涉及的关键点比如渲染进程中主线程和合成线程的分工重排和重绘的区别。HTTP缓存考察了强缓存和协商缓存的字段。这题我比较有把握因为我在项目里实际配置过CDN和处理过缓存问题。Cache-Control的max-age、Etag的If-None-Match、Last-Modified的If-Modified-Since这几个字段的位置和作用我写得很细还画了一个判断流程图。ESModule和CommonJS的区别那题我从几个方面回答语法层面import/export和require/module.exports的区别加载时机一个是静态编译时一个是运行时输出值一个是值引用一个是拷贝还有tree-shaking依赖ESModule的静态分析能力。这道题能延伸到构建优化我当时还有意识地把tree-shaking和Vite/Rollup联系起来了。工程化部分问的是Webpack打包的核心流程。我按四个阶段来写入口解析、依赖收集、代码转换、打包输出。loader和plugin的区别是重点一句话说清楚loader负责文件内容的转换plugin负责在打包生命周期里做扩展操作。这块内容有没有真实项目经验答题深度会有明显区别。如果只是背概念很难写出工程中的实际场景。建议准备笔试的同学自己动手把Webpack从零配一遍经历过一次配置地狱很多概念自然就通了。3. 实操过程与核心环节实现3.1 代码实战数组扁平化与去重的多种解法实战题第一道是给定一个多维数组要求扁平化并去重且需要保持原有顺序不允许使用Array.prototype.flat和Set。看到题目后我第一反应是考察两个基础能力的组合递归处理和哈希表思想。不限制flat说明想考手写递归不限制Set说明想考手动去重逻辑。我的解题思路分两步先写一个递归的扁平化函数遍历数组的每一项如果是数组就递归调用否则收集起来然后写一个去重的逻辑利用一个对象作为哈希表记录已出现的值遍历时判断是否出现过没有出现过才放入结果数组。完整代码我整理了一下基本是这样function flattenAndUnique(arr) { // 第一步扁平化这里用递归实现 const flattened []; function flatten(input) { for (let i 0; i input.length; i) { if (Array.isArray(input[i])) { flatten(input[i]); } else { flattened.push(input[i]); } } } flatten(arr); // 第二步去重利用对象键的唯一性 const result []; const seen {}; for (let i 0; i flattened.length; i) { const item flattened[i]; // 注意直接用 item 做键数字 1 和字符串 1 会冲突 // 所以这里要用类型加上值来做复合键 const key typeof item _ item; if (!seen[key]) { seen[key] true; result.push(item); } } return result; }这里有个坑要提醒大家直接用item作为对象的键1和1会被当成同一个键导致不同类型的相同值被误去重。我当时想到了这个边界情况用了typeof加item的组合键这里在阅卷时应该有加分。如果你用ES6语法还可以用更简洁的写法function flattenAndUniqueByReduce(arr) { const flattened arr.reduce((acc, item) { return acc.concat(Array.isArray(item) ? flattenAndUniqueByReduce(item) : item); }, []); return flattened.filter((item, index) { return flattened.indexOf(item) index; }); }递归加indexOf去重的方式时间复杂度偏高indexOf每次查找是O(n)的整体会到O(n²)。如果数组很长性能会不够好。但作为笔试答案两种思路各有利弊我是把第一种哈希的思路作为正式答案写的并且在注释里分析了复杂度扁平化过程是O(n)去重过程是O(n)整体是O(n)空间复杂度也是O(n)属于最优解。3.2 代码实战手写防抖函数与节流函数的区别实战题第二道是手写防抖函数与节流函数并说明它们的使用场景区别。这道题在真实业务中太常用了我在项目里优化搜索框输入时就写过。防抖的核心思路是事件被连续触发时只有在最后一次触发后等待指定时间才执行函数。如果等待期间再次触发则重新计时。可以想象成电梯关门只要有人进来就重新等一会儿再关门。function debounce(fn, delay 300) { let timer null; return function(...args) { // 每次触发都清掉上一次的定时器 if (timer) { clearTimeout(timer); } const context this; timer setTimeout(() { fn.apply(context, args); timer null; }, delay); }; }这里有一个面试官特别爱追问的点为什么要在返回的函数里保存context this因为直接调用fn(args)时this会指向window或undefined严格模式丢失原调用者。用fn.apply(context, args)就能把this绑定到正确的对象上。节流的核心思路是在规定时间内无论事件触发多少次只执行一次。可以想象成游戏里的技能冷却冷却没结束你怎么按都没效果冷却一好按一下就能放出来。function throttle(fn, interval 300) { let lastTime 0; return function(...args) { const context this; const now Date.now(); // 当前时间与上次执行时间的差大于间隔就执行 if (now - lastTime interval) { fn.apply(context, args); lastTime now; } }; }这两种写法的使用场景区别我当时是这样写的防抖适合“只关心最终状态”的场景比如搜索框输入后发送请求、窗口调整后计算布局节流适合“需要持续响应但不想太频繁”的场景比如滚动事件监听、鼠标移动事件、游戏中的射击。另外我还补充了带立即执行版本的防抖也就是第一次触发时立即执行后续连续触发时只重置计时器。这个版本在有些场景下更实用比如提交按钮防重复点击第一次点击要立即生效后面的点击要拦掉function debounceImmediate(fn, delay 300, immediate true) { let timer null; return function(...args) { if (timer) { clearTimeout(timer); } const context this; if (immediate !timer) { // 第一次触发立即执行 fn.apply(context, args); } timer setTimeout(() { timer null; }, delay); }; }这道题我写完的时候距离考试结束还有不到十分钟所以没有做更深入的扩展。但事后复盘时意识到手写防抖节流不仅要能写出来还要能分析边界情况和应用场景这才是这道题拿高分的关键。3.3 编程题实现一个简单的事件发布订阅这套题最后一道编程题是手写一个简单的事件发布订阅EventEmitter要求实现on、emit、off、once四个方法。这道题考的是对观察者模式的理解。事件发布订阅在日常开发中无处不在Vue的$emit和$on就是基于这种模式实现的Node.js的EventEmitter也是。理解了这个机制对后续读框架源码会有很大帮助。我的实现思路是内部维护一个事件对象键是事件名值是一个回调函数的数组。on方法往数组里push回调emit方法遍历数组并执行所有回调off方法根据传入的回调函数过滤数组once方法则是包装一层执行完后自动解绑。代码实现如下class EventEmitter { constructor() { // 存储事件和对应的回调函数数组 this.events {}; } // 订阅事件 on(eventName, callback) { if (!this.events[eventName]) { this.events[eventName] []; } this.events[eventName].push(callback); // 返回取消订阅函数便于链式调用和自动清理 return () this.off(eventName, callback); } // 发布事件 emit(eventName, ...args) { const callbacks this.events[eventName]; if (!callbacks || callbacks.length 0) { return; } // 遍历时用slice复制一份避免回调里执行off时影响当前遍历 callbacks.slice().forEach(callback { callback.apply(this, args); }); } // 取消订阅 off(eventName, callback) { if (!this.events[eventName]) { return; } this.events[eventName] this.events[eventName].filter( item item ! callback ); } // 只订阅一次 once(eventName, callback) { const wrapper (...args) { // 执行前先解绑 this.off(eventName, wrapper); callback.apply(this, args); }; // 把原函数挂到wrapper上方便通过原函数解绑 wrapper.original callback; this.on(eventName, wrapper); } }这段代码里有几个细节值得注意第一个是emit里为什么要用callbacks.slice()复制一份。如果不复制当回调函数内部调用了off方法会导致正在遍历的数组被修改可能跳过某些回调。这是事件系统实现中非常经典的一个坑。第二个是once的实现方式。不能用简单的this.on(eventName, callback)然后执行完再off因为回调里如果还有其它订阅逻辑顺序会出问题。用包装函数统一处理解绑逻辑是最稳妥的方式。第三个是我加了一个返回值on方法调用后返回一个自动解绑的函数。这个设计在Vue 3的onUnmounted清理场景中很实用组件卸载时自动取消订阅避免内存泄漏。这道题我最终拿了满分因为不仅实现了基本功能还处理了边界情况并且每个方法的注释里都写了设计理由。笔试不能只追求能跑思路的完整性和代码的健壮性更重要。3.4 手写深拷贝与浅拷贝的完整对比笔试最后一部分第一道手写题是深浅拷贝的实现与对比。这道题在JavaScript面试里出现频率极高不仅考察递归和类型判断还能看出你对内存模型的理解。题目要求写出浅拷贝和深拷贝的代码实现并说明两者区别。如果拷贝的嵌套对象中修改了基本类型和引用类型的值会影响原对象吗浅拷贝的实现相对简单只复制一层属性。如果属性值是引用类型拷贝的是引用地址不新开辟内存空间。常见实现方式有Object.assign和展开运算符function shallowCopy(obj) { // 处理基本类型和null if (obj null || typeof obj ! object) { return obj; } const result Array.isArray(obj) ? [] : {}; for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { result[key] obj[key]; } } return result; }深拷贝则要递归处理所有层级的嵌套对象。这里要特别注意几个方面数组的判断、日期和正则等特殊对象的处理、循环引用的处理。笔试中能考虑到循环引用这个点绝对能加分。大多数人的答案只能处理普通对象和数组遇到循环引用就直接爆栈。一个相对完善的深拷贝实现function deepClone(obj, map new WeakMap()) { // 处理基本类型和函数函数直接复用 if (obj null || typeof obj ! object) { return obj; } // 处理循环引用如果已经拷贝过这个对象直接返回之前的结果 if (map.has(obj)) { return map.get(obj); } // 处理日期对象 if (obj instanceof Date) { return new Date(obj.getTime()); } // 处理正则对象 if (obj instanceof RegExp) { return new RegExp(obj.source, obj.flags); } // 数组和普通对象分开处理 const result Array.isArray(obj) ? [] : {}; // 保存到map里用于处理循环引用 map.set(obj, result); for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { result[key] deepClone(obj[key], map); } } return result; }我在答题时的实际书写顺序是这样的先写了浅拷贝的两种方式展开运算符和Object.assign说明了它们都是浅层复制然后写深拷贝的完整实现从基本类型判断开始逐层递归每到一层先处理特殊类型再处理普通属性。一个容易忽略的点是for...in会遍历到原型链上的可枚举属性所以要用Object.prototype.hasOwnProperty.call来判断属性是本对象的还是继承来的。这个细节写上了就显得你对JavaScript的掌握不只是表面功夫。这里想多说一句题外话我看到有些同学直接用JSON.parse(JSON.stringify(obj))来写深拷贝。这样写在笔试中肯定不行因为这种方式有明显的局限性函数会被忽略、undefined会被忽略、日期会被转成字符串、循环引用会直接报错。虽然日常开发中偶尔能用但笔试中最好还是手写递归版本并且主动说出JSON方法的局限性。4. 常见笔试问题与提问陷阱4.1 明明会做但丢分的低级失误有哪些考完对照答案复盘的时候我发现了几个共性的低级失误这也是很多人笔试成绩不理想的原因。第一大失误是不仔细读题。当时的题目明确说了“不允许使用Array.prototype.flat和Set”但我听说不少同学还是用arr.flat(Infinity)加上new Set()一把梭结果直接判错。笔试不是做项目不是代码能跑就行了条件里写清楚的要求必须要遵守。第二大失误是代码风格太差。笔试答题是有阅卷的面试官会看你的代码写得好不好。变量命名为a、b、c函数没有注释逻辑混乱这些即使功能正确分数也会打折扣。我当时的做法是每个函数都写上简短的注释说明思路关键步骤加上备注。第三大失误是不写复杂度分析。很多笔试题目的加分项是复杂度分析特别是算法题时间复杂度和空间复杂度写出来能证明你真正理解了代码的性能特征。我在数组扁平化去重那题写了O(n)时间O(n)空间的分析在深拷贝那题也写了递归深度的复杂度分析。第四大失误是时间分配不合理。一开始就在一道难题上耗太久导致后面的简单题没时间做。我当时的策略是先浏览一遍所有题目把有把握的题先做掉拿到基础分再回头啃难题。这个策略在时间紧凑的笔试中很实用。4.2 高频追问面试官会如何深挖这些题笔试过后是面试环节笔试中写的代码会被面试官拿出来逐一追问。提前考虑哪些点会被深挖笔试时把注释写好面试就轻松不少。以数组扁平化去重那道题为例面试官大概率会问如果数组里出现循环引用怎么办如果元素中有对象怎么判断两个对象是否“相同”如果数组非常大内存和性能怎么取舍我当时没有写出循环引用的处理方案面试时被问到确实有点紧张。现在回头看在笔试阶段就应该把这些边界情况写在注释里哪怕不实现也表明你考虑过这层。防抖节流那题面试官喜欢追问防抖和节流的适用场景怎么分如果你要在搜索框里做联想用防抖还是节流如果用户一直在输入停不下来怎么办还有怎么让防抖函数同时支持取消和立即执行这些扩展点在笔试代码里提前想好面试时就能从容应对。事件发布订阅那题面试官追问的典型问题是如果同一个事件名有100个订阅者某个订阅者抛异常了会影响其它订阅者执行吗如果emit和off同时发生怎么处理once的语义是在所有订阅者里只回调一次还是只对该订阅者只回调一次这些问题都是日常开发中真正会遇到的边界场景。深拷贝那题最容易追问的点是JSON.parse(JSON.stringify())有什么局限循环引用怎么处理Symbol和函数怎么处理拷贝Map、Set、WeakMap时怎么办现在的JavaScript数据类型越来越多深拷贝的完备性本身就值得展开思考。我把这些高频追问整理成了一个表格方便对照复习笔试题高频追问准备建议原型链实例到Object.create(null)之间发生了什么手画完整原型链结构图闭包计数器怎么在循环中正确使用闭包掌握var和let的区别IIFE闭包方案this绑定箭头函数和普通函数在绑定上的本质区别掌握定义期绑定与调用期绑定宏任务/微任务async/await的输出顺序用Node实际跑代码验证HTTP缓存强缓存失效后浏览器如何处理会画完整的缓存判断流程图事件发布订阅回调抛异常会影响后续执行吗理解try-catch与事件循环的关系深拷贝JSON深拷贝的局限和循环引用会写完整版的deepClone函数防抖节流用户一直输入停不下来怎么处理熟悉maxWait手写实现4.3 真实复盘这套笔试题对准备春招的参考价值站在现在的角度回看这套题它反映出的Web前端春招考察趋势很清晰基础越来越重要工程化越来越受重视片面追求框架API背诵越来越行不通。如果你想认真准备接下来的春招笔试有几个方向值得投入JavaScript的每个核心概念都要能解释“为什么”不能只知道“是什么”。原型链到底解决了什么问题、闭包为什么会造成内存泄漏、事件循环为什么分为宏任务和微任务这些根源性的问题想清楚后你写代码的思维方式会不一样。手写代码题一定要掐时间练。笔试的节奏通常是比较快的45分钟两道题还要留时间检查平时不练速度就很难跟得上。我是在考前一周每天做一套手写题专门训练键盘速度和思路组织速度。工程化方面的准备不能停留在看文章。自己把Vite或者Webpack的配置从头写一遍遇到报错自己排查一遍比看十篇脚手架教程都有用。笔试里出现的工程化题目基本都是实践场景的抽象。面试官深挖的能力在笔试阶段就要开始储备。写代码的时候多问自己几个为什么多考虑几个边界情况这些思路写到答题卡上就是加分项。从我个人的经验来说春招笔试最难的其实不是题目本身而是如何在有限时间内把自己会的东西充分展示出来。有时候你明明知道某个概念但就是在考场上紧张或者时间紧了就写不出来。所以有针对性的模拟练习特别重要。我当时把牛客网的题库刷了几百道还专门找了往年的真题来限时模拟。最后再分享一个我自己用起来很顺的复习方法把做错的题和不会的知识点整理成一份错题笔记。注意这不是简单地记题目和答案而是要把自己当时的错误思路、正确的解题思路、以及相关知识点都写清楚。考前一天不需要再刷题只需要反复翻错题笔记把薄弱点过一遍。这套方法在春招期间帮我稳住了很多分数。