上周刚参加完掌阅集团2025年春招前端岗的在线笔试趁着记忆还热乎把整场考试的题型、考点和踩坑点整理出来。整场笔试时长90分钟题量不算小单选、多选、简答、手写编程都有覆盖范围从前端基础到工程化都有涉及。如果你最近也在准备前端岗位的春招尤其是想投阅读类或内容类互联网公司这篇复盘应该能给你一点具体参考。我不保证每个题目都一字不差但考点和解题思路是完整的可以放心拿去对照复习。1. 投递掌阅前端岗前我如何预判笔试范围1.1 从业务形态反推考点掌阅这个公司比较特殊它不是一个普通的ToB后台系统公司也不是纯电商类C端业务。它的核心产品是阅读App和阅读器前端面对的场景非常明确书城、书架、阅读器、会员体系、各类运营活动页。这就决定了笔试题目大概率会围绕“文本渲染”“长列表”“缓存机制”“首屏性能”展开。我在笔试前做过一轮预判重点看了几个方向浏览器渲染原理、前端缓存策略、大量 DOM 节点的渲染优化、移动端适配、Canvas 或 WebGL 的基础概念、工程化构建优化。实际考下来这些方向确实命中了不少尤其是浏览器缓存和渲染性能在选择题和简答题里反复出现。如果你准备的不是掌阅而是其他内容型产品也可以沿用这个思路先看产品形态再猜技术侧重点。内容型产品考性能优化和缓存中后台产品考工程化和组件设计电商类则会更偏交互细节和数据流。1.2 从招聘信息和笔试平台反推题型掌阅春招的笔试链接是在投递后两天内发到邮箱的用的在线笔试平台。这类平台一般长这样左边是题干右边是代码编辑器没有智能提示不能本地调试摄像头和屏幕共享全程开启。所以提前适应这种环境很重要尤其是平时全靠 IDE 补全语法的人手写代码很容易翻车。我根据往年面经和岗位描述推测笔试大概会分成三块客观题、简答题、编程题。客观题以单选和多选为主考察 JS 基础、CSS、浏览器原理、框架基础简答题多半是方案设计比如“如何优化首屏加载”这类编程题则包含算法题和手写函数题。这套预测和实际考试基本一致。所以如果你也想投这个方向可以提前在牛客或同类平台上做几套模拟题练练在无提示环境下写代码的手感。还有一个更实用的训练方式每天早上用记事本写一个防抖节流或者实现一个 Promise.all不求跑通只求语法正确。这个习惯能在笔试时帮你省下大量调试时间。2. 场上记录题型分布与每道题的踩坑点2.1 客观题基础概念占大头陷阱藏在细节里这场笔试的客观题大概有二十道左右单选和多选混在一起没有倒扣分所以多选我基本是把所有可能正确的选项都勾上了。现在回头看这种策略并不聪明因为有些多选考的是“边界情况”勾多了反而暴露理解不精确。印象比较深的一道选择题给了一段异步代码让选择打印顺序。考点是宏任务、微任务的执行顺序以及await之后的代码何时执行。代码大致是这样console.log(start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); async function foo() { console.log(foo start); await Promise.resolve(); console.log(foo end); } foo(); console.log(end);答案是start - foo start - end - promise - foo end - timeout。这道题我当时没选错但多花了两分钟在foo end的位置上纠结。原因是await后面跟的不是普通值而是Promise.resolve()它的微任务注册时机比promise那个then要晚一点。这个细节如果只是背过“await 后面的代码是微任务”没有真正理解微任务的排队顺序很容易做错。除了事件循环还有几道题考了this的指向、原型链查找、CSS 选择器优先级、Flex 布局下的尺寸计算以及浏览器缓存。其中浏览器缓存那道题有点意思题干给了几个字段要选出命中强缓存时响应状态码的取值。很多人只记得200 from cache但实际上在 Chrome 里可能是 200在网络面板里显示的是disk cache或memory cache题目考的是概念不是浏览器显示。2.2 简答题考察方案设计而非死记硬背简答题一共三道不算特别难但非常考验“把话说清楚”的能力。我记得有一道是在一个小说阅读器里用户快速滑动章节时页面会出现白屏卡顿请分析原因并提出优化方案。这种题没有标准答案但需要你写出完整的排查思路。我当时的回答分了三层先定位是渲染问题还是网络问题再看是不是文章内容一次性插入 DOM 过多最后看是否存在重复创建大量对象导致的 GC 压力。针对这三个可能原因再分别给出虚拟列表、分片渲染、预加载、Web Worker 处理文本解析等方案。另外一道简答题问的是“如何设计一套前端异常监控方案”。我写了采集、上报、聚合、告警四部分重点强调了要捕获window.onerror、unhandledrejection以及对于 React/Vue 组件渲染错误要单独包裹错误边界。掌阅这类阅读产品的功能页面多运营活动频繁异常监控确实是刚需。这类题的答题技巧是不要只写方案名称要补一句“为什么”。比如写“使用虚拟列表”后面要跟一句“因为阅读器章节列表可能有几千个 DOM 节点虚拟列表可以避免首屏渲染全部节点降低主线程开销”。这样能让面试官看出你真的理解而不是背过名词。2.3 编程题三道题覆盖字符串、哈希表与手写函数编程题一共三道安排在最后我做完还剩十五分钟节奏还算可以。第一道是版本号比较输入类似1.0.0和0.9.9要求返回两个版本号的大小关系。这道题看着简单但边界情况不少比如1.0和1.0.0应该相等1.0.1比1.0大。如果直接按.切分后从前向后比中间某个版本段不存在时要补 0否则就会比较出错。第二道是两数之和的变体要求返回所有相加等于目标值的下标对并且不能重复。直接暴力双层循环会超时需要用一个哈希表记录已经出现过的数字和下标。这道题我写过很多次但笔试环境里我还是先花了半分钟确认题意是返回一组还是所有组。题目说的是所有下标对所以需要用Map存储每个数字出现的多个位置再遍历累加组合数量。第三道是手写防抖函数要求支持立即执行选项。这道题我比较熟很快就写完了。但回过头看自己在代码里没有处理返回值的问题。如果debounce需要返回一个 Promise或者支持取消防抖代码就要复杂得多。笔试时手写题只要满足题干要求即可但如果你只按最简单的写法交上去可能不会扣分却容易让面试官觉得你考虑得不够全面。3. 选择题背后的原理追问笔试不只看会不会还看能不能讲清为什么3.1 事件循环每次笔试都逃不过的送命题前面提到的那道事件循环题其实是前端笔试的保留节目。不管是掌阅还是其他公司几乎必考。但很多人只是背结论没理解底层的执行机制。核心要理清三点第一宏任务和微任务是两个队列script整体代码算一个宏任务第二一个宏任务执行完后必须清空整个微任务队列才执行下一个宏任务第三await可以被理解为Promise.resolve(value).then(...)所以await后面的代码会被注册成一个微任务。但要注意await右侧的表达式是同步执行的只有后面那段才进微任务队列。拿前面那道题来说foo()调用时先打印foo start然后await Promise.resolve()把后续代码注册为微任务此时foo end还没执行随后继续执行全局代码打印end全局宏任务结束开始清空微任务队列。队列里先有promise的 then 回调后有foo end的注册值所以打印顺序是promise再foo end。搞清楚这个顺序事件循环的题基本就不会错。3.2 浏览器缓存从命中逻辑到实际应用浏览器缓存那道题表面是考状态码实际上考的是对 HTTP 缓存流程的理解。强缓存命中时请求不会到达服务器表现是状态码 200并且在网络面板中标识为memory cache或disk cache。服务端通过Cache-Control的max-age和Expires控制强缓存有效期。协商缓存则不同请求会到达服务器服务器通过ETag或Last-Modified判断资源有没有变化没变化就返回 304浏览器读取本地缓存。在掌阅这类阅读产品里缓存的意义特别大。小说列表、书籍封面、章节内容这些资源文件变化不频繁非常依赖强缓存而用户阅读进度、书架信息则需要实时性不能简单缓存。如果笔试里追问“怎么给阅读类页面设计缓存策略”可以按“静态资源——长时间强缓存接口数据——短时间缓存用户数据——不缓存”的思路回答。3.3 原型链与继承别死背“三座大山”另外有一道多选考了原型链给出一个构造函数的继承关系问某个属性的查找路径。这类题只要画一张图就能解决但笔试环境里不能画图只能靠心算。我的方法是记住两条规则第一实例的__proto__指向构造函数的prototype第二构造函数的prototype本身也是一个对象它的__proto__再指向父类构造函数的prototype。遍历查找属性时引擎会沿着这条链往上找直到Object.prototype再往上就是null。这里容易掉进去的坑是构造函数的prototype上如果有constructor属性它的指向是构造函数本身而Class语法创建立的类方法默认不可枚举但用普通构造函数写在prototype上的方法是可枚举的。选择题里会拿这个细节考你“for...in 能否遍历到某个方法”。4. 手写题与算法题从思路到实现的完整复盘4.1 手写 Promise.all 的边界条件虽然这次笔试没有直接考 Promise.all但我给别人的建议一直是准备前端笔试之前一定要把Promise.all、Promise.race、Promise.allSettled的实现背到肌肉记忆。因为只要手写了 Promise基本就是这几个题轮流换。一个完整的Promise.all要考虑四个点入参可迭代且每个元素可能不是 Promise返回值是一个 Promise所有 Promise 都成功才 resolve且结果顺序和入参顺序一致任意一个失败立即 reject 且只 reject 第一个错误。function promiseAll(promises) { return new Promise((resolve, reject) { const result []; let count 0; const len promises.length; if (len 0) { resolve([]); return; } promises.forEach((item, index) { Promise.resolve(item).then( (value) { result[index] value; count 1; if (count len) { resolve(result); } }, (reason) { reject(reason); } ); }); }); }这里有个很常见的坑先定义const result []然后result[index] value如果某个 Promise 先完成下标不是连续的数组前几位会是空位。答题时最好先填满undefined或者用new Array(len)初始化。这不会影响最终判断但代码可读性会高很多。4.2 防抖节流场景选型与实现细节笔试考的防抖版本要求支持“立即执行”说明考官希望看到leading和trailing的区分。防抖和节流的本质区别在于防抖是“事件停止触发后延迟执行”节流是“固定时间间隔内最多执行一次”。拿掌阅的场景举例搜索框输入联想建议用防抖因为用户停止输入后才请求而阅读器里的滚动位置保存建议用节流因为滚动过程需要定期记录不能等停止滚动才记录。实现防抖时要注意this的绑定和参数透传function debounce(fn, wait 300, immediate false) { let timer null; return function (...args) { const context this; const callNow immediate !timer; if (callNow) { fn.apply(context, args); } if (timer) { clearTimeout(timer); } timer setTimeout(() { if (!immediate) { fn.apply(context, args); } timer null; }, wait); }; }这段代码里容易忽略的是立即执行模式下延迟结束后要把timer置空这样下一次触发才能再次立即执行否则第二次触发会走进callNow的false分支只延迟执行不会立即执行。4.3 版本号比较一道“简单题”里的编码陷阱版本号比较这类题在笔试题里属于“简单但容易翻车”的类型。如果直接按字符串比较1.10.0会排在1.9.0前面因为字符串比较按位比较字符1比9小导致结果错误。正确的做法是拆分后转成数字并且把缺失位补成 0 再比较function compareVersion(v1, v2) { const arr1 v1.split(.); const arr2 v2.split(.); const maxLen Math.max(arr1.length, arr2.length); for (let i 0; i maxLen; i) { const num1 Number(arr1[i] || 0); const num2 Number(arr2[i] || 0); if (num1 num2) return 1; if (num1 num2) return -1; } return 0; }注意循环变量用i maxLen不是i arr1.length。错用arr1.length的话当v1比v2短时比较会在循环结束后直接返回 0导致1.0和1.0.1被错误判为相等。这类题做完以后建议在循环结束后再统一返回0因为只要前面没有出现差异版本号就是相等的。5. 笔试结束后的复盘哪些准备有效哪些白费功夫5.1 真正拉分的不是刷题量而是对原理的表述能力笔试结束后我复盘了一下发现最有效的复习资料其实是自己整理的“一句话原理清单”。比如“强缓存命中不请求服务器协商缓存请求服务器但服务器不返回资源”“微任务执行时机在宏任务结束之后、下一个宏任务开始之前”“虚拟列表只渲染可视区域内部通过间距撑开滚动高度”。这些结论不是背出来的而是反复手写推导之后用自己的话说出来的。这次笔试里客观题部分几乎没有原题都是把常见考点换个形式重新组合。比如事件循环那道题网上很多例子是setTimeout和Promise的顺序但这次加了async/await一下子让很多人慌了。如果你只是背了“promise 比 setTimeout 先执行”这个结论遇到await的微任务排队就会出错。所以复习时建议多做“变形题”不要只看标准答案。5.2 我给下一批笔试者的三条建议第一个建议是务必提前熟悉笔试平台的代码编辑器。很多平台的缩进和格式化功能很弱复制粘贴还会把缩进弄乱。我这次写代码时提前适应了这种环境所以心态比较稳。你可以提前在牛客网模拟环境里做几道手写题把“没有智能提示也能写出完整代码”的能力练出来。第二个建议是时间分配要留出检查余地。我的计划是客观题不超过 35 分钟简答题 20 分钟编程题 30 分钟剩下 5 分钟检查。实际做下来客观题用了 38 分钟因为有几道多选纠结了很久。如果编程题遇到卡壳不要耗太久先写一个暴力解保底再尝试优化。笔试看的是通过率不是单题目满分。第三个建议是面试复盘时要把每个考点和业务场景绑定起来。比如准备浏览器缓存不要只背字段顺便想一下“如果掌阅的书城封面图很多该怎么配置缓存”准备性能优化就想想“章节列表从接口返回后前端要做哪些处理才能快速渲染”。笔试题目本身是死的但把知识往业务上靠会让你的答案显得更有实际价值。最后再说一个我这次踩的坑简答题里有一道问“前端如何做接口异常重试”我一开始只写了“加拦截器设置重试次数”没有提“重试时要考虑幂等性避免重复提交造成数据异常”。这个点大概率会扣分。如果你的目标公司也一样是重业务场景的产品答题时一定要多想一步方案上线后会不会出现数据重复、请求风暴、状态不一致。这套思路比多背十个知识点更有用。 掌阅春招前端笔试复盘：缓存、事件循环与手写代码要点
上周刚参加完掌阅集团2025年春招前端岗的在线笔试趁着记忆还热乎把整场考试的题型、考点和踩坑点整理出来。整场笔试时长90分钟题量不算小单选、多选、简答、手写编程都有覆盖范围从前端基础到工程化都有涉及。如果你最近也在准备前端岗位的春招尤其是想投阅读类或内容类互联网公司这篇复盘应该能给你一点具体参考。我不保证每个题目都一字不差但考点和解题思路是完整的可以放心拿去对照复习。1. 投递掌阅前端岗前我如何预判笔试范围1.1 从业务形态反推考点掌阅这个公司比较特殊它不是一个普通的ToB后台系统公司也不是纯电商类C端业务。它的核心产品是阅读App和阅读器前端面对的场景非常明确书城、书架、阅读器、会员体系、各类运营活动页。这就决定了笔试题目大概率会围绕“文本渲染”“长列表”“缓存机制”“首屏性能”展开。我在笔试前做过一轮预判重点看了几个方向浏览器渲染原理、前端缓存策略、大量 DOM 节点的渲染优化、移动端适配、Canvas 或 WebGL 的基础概念、工程化构建优化。实际考下来这些方向确实命中了不少尤其是浏览器缓存和渲染性能在选择题和简答题里反复出现。如果你准备的不是掌阅而是其他内容型产品也可以沿用这个思路先看产品形态再猜技术侧重点。内容型产品考性能优化和缓存中后台产品考工程化和组件设计电商类则会更偏交互细节和数据流。1.2 从招聘信息和笔试平台反推题型掌阅春招的笔试链接是在投递后两天内发到邮箱的用的在线笔试平台。这类平台一般长这样左边是题干右边是代码编辑器没有智能提示不能本地调试摄像头和屏幕共享全程开启。所以提前适应这种环境很重要尤其是平时全靠 IDE 补全语法的人手写代码很容易翻车。我根据往年面经和岗位描述推测笔试大概会分成三块客观题、简答题、编程题。客观题以单选和多选为主考察 JS 基础、CSS、浏览器原理、框架基础简答题多半是方案设计比如“如何优化首屏加载”这类编程题则包含算法题和手写函数题。这套预测和实际考试基本一致。所以如果你也想投这个方向可以提前在牛客或同类平台上做几套模拟题练练在无提示环境下写代码的手感。还有一个更实用的训练方式每天早上用记事本写一个防抖节流或者实现一个 Promise.all不求跑通只求语法正确。这个习惯能在笔试时帮你省下大量调试时间。2. 场上记录题型分布与每道题的踩坑点2.1 客观题基础概念占大头陷阱藏在细节里这场笔试的客观题大概有二十道左右单选和多选混在一起没有倒扣分所以多选我基本是把所有可能正确的选项都勾上了。现在回头看这种策略并不聪明因为有些多选考的是“边界情况”勾多了反而暴露理解不精确。印象比较深的一道选择题给了一段异步代码让选择打印顺序。考点是宏任务、微任务的执行顺序以及await之后的代码何时执行。代码大致是这样console.log(start); setTimeout(() { console.log(timeout); }, 0); Promise.resolve().then(() { console.log(promise); }); async function foo() { console.log(foo start); await Promise.resolve(); console.log(foo end); } foo(); console.log(end);答案是start - foo start - end - promise - foo end - timeout。这道题我当时没选错但多花了两分钟在foo end的位置上纠结。原因是await后面跟的不是普通值而是Promise.resolve()它的微任务注册时机比promise那个then要晚一点。这个细节如果只是背过“await 后面的代码是微任务”没有真正理解微任务的排队顺序很容易做错。除了事件循环还有几道题考了this的指向、原型链查找、CSS 选择器优先级、Flex 布局下的尺寸计算以及浏览器缓存。其中浏览器缓存那道题有点意思题干给了几个字段要选出命中强缓存时响应状态码的取值。很多人只记得200 from cache但实际上在 Chrome 里可能是 200在网络面板里显示的是disk cache或memory cache题目考的是概念不是浏览器显示。2.2 简答题考察方案设计而非死记硬背简答题一共三道不算特别难但非常考验“把话说清楚”的能力。我记得有一道是在一个小说阅读器里用户快速滑动章节时页面会出现白屏卡顿请分析原因并提出优化方案。这种题没有标准答案但需要你写出完整的排查思路。我当时的回答分了三层先定位是渲染问题还是网络问题再看是不是文章内容一次性插入 DOM 过多最后看是否存在重复创建大量对象导致的 GC 压力。针对这三个可能原因再分别给出虚拟列表、分片渲染、预加载、Web Worker 处理文本解析等方案。另外一道简答题问的是“如何设计一套前端异常监控方案”。我写了采集、上报、聚合、告警四部分重点强调了要捕获window.onerror、unhandledrejection以及对于 React/Vue 组件渲染错误要单独包裹错误边界。掌阅这类阅读产品的功能页面多运营活动频繁异常监控确实是刚需。这类题的答题技巧是不要只写方案名称要补一句“为什么”。比如写“使用虚拟列表”后面要跟一句“因为阅读器章节列表可能有几千个 DOM 节点虚拟列表可以避免首屏渲染全部节点降低主线程开销”。这样能让面试官看出你真的理解而不是背过名词。2.3 编程题三道题覆盖字符串、哈希表与手写函数编程题一共三道安排在最后我做完还剩十五分钟节奏还算可以。第一道是版本号比较输入类似1.0.0和0.9.9要求返回两个版本号的大小关系。这道题看着简单但边界情况不少比如1.0和1.0.0应该相等1.0.1比1.0大。如果直接按.切分后从前向后比中间某个版本段不存在时要补 0否则就会比较出错。第二道是两数之和的变体要求返回所有相加等于目标值的下标对并且不能重复。直接暴力双层循环会超时需要用一个哈希表记录已经出现过的数字和下标。这道题我写过很多次但笔试环境里我还是先花了半分钟确认题意是返回一组还是所有组。题目说的是所有下标对所以需要用Map存储每个数字出现的多个位置再遍历累加组合数量。第三道是手写防抖函数要求支持立即执行选项。这道题我比较熟很快就写完了。但回过头看自己在代码里没有处理返回值的问题。如果debounce需要返回一个 Promise或者支持取消防抖代码就要复杂得多。笔试时手写题只要满足题干要求即可但如果你只按最简单的写法交上去可能不会扣分却容易让面试官觉得你考虑得不够全面。3. 选择题背后的原理追问笔试不只看会不会还看能不能讲清为什么3.1 事件循环每次笔试都逃不过的送命题前面提到的那道事件循环题其实是前端笔试的保留节目。不管是掌阅还是其他公司几乎必考。但很多人只是背结论没理解底层的执行机制。核心要理清三点第一宏任务和微任务是两个队列script整体代码算一个宏任务第二一个宏任务执行完后必须清空整个微任务队列才执行下一个宏任务第三await可以被理解为Promise.resolve(value).then(...)所以await后面的代码会被注册成一个微任务。但要注意await右侧的表达式是同步执行的只有后面那段才进微任务队列。拿前面那道题来说foo()调用时先打印foo start然后await Promise.resolve()把后续代码注册为微任务此时foo end还没执行随后继续执行全局代码打印end全局宏任务结束开始清空微任务队列。队列里先有promise的 then 回调后有foo end的注册值所以打印顺序是promise再foo end。搞清楚这个顺序事件循环的题基本就不会错。3.2 浏览器缓存从命中逻辑到实际应用浏览器缓存那道题表面是考状态码实际上考的是对 HTTP 缓存流程的理解。强缓存命中时请求不会到达服务器表现是状态码 200并且在网络面板中标识为memory cache或disk cache。服务端通过Cache-Control的max-age和Expires控制强缓存有效期。协商缓存则不同请求会到达服务器服务器通过ETag或Last-Modified判断资源有没有变化没变化就返回 304浏览器读取本地缓存。在掌阅这类阅读产品里缓存的意义特别大。小说列表、书籍封面、章节内容这些资源文件变化不频繁非常依赖强缓存而用户阅读进度、书架信息则需要实时性不能简单缓存。如果笔试里追问“怎么给阅读类页面设计缓存策略”可以按“静态资源——长时间强缓存接口数据——短时间缓存用户数据——不缓存”的思路回答。3.3 原型链与继承别死背“三座大山”另外有一道多选考了原型链给出一个构造函数的继承关系问某个属性的查找路径。这类题只要画一张图就能解决但笔试环境里不能画图只能靠心算。我的方法是记住两条规则第一实例的__proto__指向构造函数的prototype第二构造函数的prototype本身也是一个对象它的__proto__再指向父类构造函数的prototype。遍历查找属性时引擎会沿着这条链往上找直到Object.prototype再往上就是null。这里容易掉进去的坑是构造函数的prototype上如果有constructor属性它的指向是构造函数本身而Class语法创建立的类方法默认不可枚举但用普通构造函数写在prototype上的方法是可枚举的。选择题里会拿这个细节考你“for...in 能否遍历到某个方法”。4. 手写题与算法题从思路到实现的完整复盘4.1 手写 Promise.all 的边界条件虽然这次笔试没有直接考 Promise.all但我给别人的建议一直是准备前端笔试之前一定要把Promise.all、Promise.race、Promise.allSettled的实现背到肌肉记忆。因为只要手写了 Promise基本就是这几个题轮流换。一个完整的Promise.all要考虑四个点入参可迭代且每个元素可能不是 Promise返回值是一个 Promise所有 Promise 都成功才 resolve且结果顺序和入参顺序一致任意一个失败立即 reject 且只 reject 第一个错误。function promiseAll(promises) { return new Promise((resolve, reject) { const result []; let count 0; const len promises.length; if (len 0) { resolve([]); return; } promises.forEach((item, index) { Promise.resolve(item).then( (value) { result[index] value; count 1; if (count len) { resolve(result); } }, (reason) { reject(reason); } ); }); }); }这里有个很常见的坑先定义const result []然后result[index] value如果某个 Promise 先完成下标不是连续的数组前几位会是空位。答题时最好先填满undefined或者用new Array(len)初始化。这不会影响最终判断但代码可读性会高很多。4.2 防抖节流场景选型与实现细节笔试考的防抖版本要求支持“立即执行”说明考官希望看到leading和trailing的区分。防抖和节流的本质区别在于防抖是“事件停止触发后延迟执行”节流是“固定时间间隔内最多执行一次”。拿掌阅的场景举例搜索框输入联想建议用防抖因为用户停止输入后才请求而阅读器里的滚动位置保存建议用节流因为滚动过程需要定期记录不能等停止滚动才记录。实现防抖时要注意this的绑定和参数透传function debounce(fn, wait 300, immediate false) { let timer null; return function (...args) { const context this; const callNow immediate !timer; if (callNow) { fn.apply(context, args); } if (timer) { clearTimeout(timer); } timer setTimeout(() { if (!immediate) { fn.apply(context, args); } timer null; }, wait); }; }这段代码里容易忽略的是立即执行模式下延迟结束后要把timer置空这样下一次触发才能再次立即执行否则第二次触发会走进callNow的false分支只延迟执行不会立即执行。4.3 版本号比较一道“简单题”里的编码陷阱版本号比较这类题在笔试题里属于“简单但容易翻车”的类型。如果直接按字符串比较1.10.0会排在1.9.0前面因为字符串比较按位比较字符1比9小导致结果错误。正确的做法是拆分后转成数字并且把缺失位补成 0 再比较function compareVersion(v1, v2) { const arr1 v1.split(.); const arr2 v2.split(.); const maxLen Math.max(arr1.length, arr2.length); for (let i 0; i maxLen; i) { const num1 Number(arr1[i] || 0); const num2 Number(arr2[i] || 0); if (num1 num2) return 1; if (num1 num2) return -1; } return 0; }注意循环变量用i maxLen不是i arr1.length。错用arr1.length的话当v1比v2短时比较会在循环结束后直接返回 0导致1.0和1.0.1被错误判为相等。这类题做完以后建议在循环结束后再统一返回0因为只要前面没有出现差异版本号就是相等的。5. 笔试结束后的复盘哪些准备有效哪些白费功夫5.1 真正拉分的不是刷题量而是对原理的表述能力笔试结束后我复盘了一下发现最有效的复习资料其实是自己整理的“一句话原理清单”。比如“强缓存命中不请求服务器协商缓存请求服务器但服务器不返回资源”“微任务执行时机在宏任务结束之后、下一个宏任务开始之前”“虚拟列表只渲染可视区域内部通过间距撑开滚动高度”。这些结论不是背出来的而是反复手写推导之后用自己的话说出来的。这次笔试里客观题部分几乎没有原题都是把常见考点换个形式重新组合。比如事件循环那道题网上很多例子是setTimeout和Promise的顺序但这次加了async/await一下子让很多人慌了。如果你只是背了“promise 比 setTimeout 先执行”这个结论遇到await的微任务排队就会出错。所以复习时建议多做“变形题”不要只看标准答案。5.2 我给下一批笔试者的三条建议第一个建议是务必提前熟悉笔试平台的代码编辑器。很多平台的缩进和格式化功能很弱复制粘贴还会把缩进弄乱。我这次写代码时提前适应了这种环境所以心态比较稳。你可以提前在牛客网模拟环境里做几道手写题把“没有智能提示也能写出完整代码”的能力练出来。第二个建议是时间分配要留出检查余地。我的计划是客观题不超过 35 分钟简答题 20 分钟编程题 30 分钟剩下 5 分钟检查。实际做下来客观题用了 38 分钟因为有几道多选纠结了很久。如果编程题遇到卡壳不要耗太久先写一个暴力解保底再尝试优化。笔试看的是通过率不是单题目满分。第三个建议是面试复盘时要把每个考点和业务场景绑定起来。比如准备浏览器缓存不要只背字段顺便想一下“如果掌阅的书城封面图很多该怎么配置缓存”准备性能优化就想想“章节列表从接口返回后前端要做哪些处理才能快速渲染”。笔试题目本身是死的但把知识往业务上靠会让你的答案显得更有实际价值。最后再说一个我这次踩的坑简答题里有一道问“前端如何做接口异常重试”我一开始只写了“加拦截器设置重试次数”没有提“重试时要考虑幂等性避免重复提交造成数据异常”。这个点大概率会扣分。如果你的目标公司也一样是重业务场景的产品答题时一定要多想一步方案上线后会不会出现数据重复、请求风暴、状态不一致。这套思路比多背十个知识点更有用。