58同城前端校招笔试题复盘：JS基础、事件循环与异步调度器

去年秋招我投了58同城的前端岗位笔试通知来得比预想中快。从收到邮件到正式开考中间只有不到48小时加上当时还在同时准备其他几家可以说是挤出时间仓促上阵。整套卷子90分钟题目覆盖面很广但整体风格偏向基础与实战结合不是那种故意刁钻的偏题怪题。考完当晚我趁记忆还热乎把题目逐一复盘了一遍。这篇文章就当是当时那份复盘记录的整理版给后面准备校招前端笔试的同学做个参考。先说结论58同城这套前端笔试题基础知识的考察比较扎实编程题难度中等偏上但很能看出区分度——基础不牢的同学会明显吃亏基础扎实的则能顺利完成。下面我按题型和考点拆开讲。1. 这场笔试的整体结构题型、题量与平台体验1.1 笔试平台与基本流程2023届校招的在线笔试大多数公司用的是牛客网或赛码这类平台58同城当时用的是牛客网。邮件里会给出笔试链接、开始时间和截止时间一般要求提前10到15分钟进入全程打开摄像头。笔试当晚我提前了20分钟进去调试环境把麦克风、摄像头都确认了一遍避免开考后硬件出问题。一个比较容易被忽略的细节牛客网笔试有严格的切屏检测超过一定次数的切屏会被记录严重时可能判定为作弊。所以考前一定要把浏览器标签页清干净关掉各种弹窗通知微信、QQ这类即时通讯软件最好也退出。我当时把电脑调成了勿扰模式全程没被打断。1.2 题量分布与分值结构整张卷子90分钟题量大致如下题型数量分值占比建议耗时单选题15题左右约30%20分钟多选题5题左右约15%10分钟编程题2-3题约35%35分钟简答题1-2题约20%15分钟总分一般是100分编程题和简答题是主要的拉分项。我记得卷子的选择题部分涵盖了JS基础、CSS布局、浏览器原理、网络协议这些前端八股文常客多选题更是考察细节理解多选少选都不得分这一块容易在不经意间丢分。1.3 和同期其他厂笔试的横向对比当时我也做过一些其他互联网公司的笔试题对比下来58同城这套卷子的风格更“务实”。它不会像部分公司那样疯狂堆算法题反而更看重你在业务场景下的基础功。编程题考的不是复杂的LeetCode hard级别题更像平时业务开发中会遇到的小工具函数——比如数组处理、异步控制、深拷贝这一类。这其实透露了一个信号校招笔试侧重点在于“这个人能不能干活”而不是“这个人是ACM选手”。2. 选择题复盘那些藏在细节里的JS基础炸弹2.1 typeof、变量提升与暂时性死区选择题里有一道非常经典的typeof类型判断给出的几个选项涉及null、undefined、数组和函数。这种题看似简单但陷阱不少。console.log(typeof null); // object 历史遗留bug console.log(typeof undefined); // undefined console.log(typeof []); // object 数组也是对象 console.log(typeof (() {})); // functiontypeof null返回object是JS设计之初就存在的bug至今没有修复因为修复会破坏现有代码。typeof数组返回object也很容易让新手踩坑判断数组需要用Array.isArray。同一道题或相邻题里可能还有变量提升的考点console.log(a); // undefined var a 1; console.log(b); // ReferenceError: Cannot access b before initialization let b 2;var声明的变量会提升到作用域顶部但赋值不会所以打印出来是undefined。而let声明存在暂时性死区TDZTemporal Dead Zone在声明之前访问会直接报错。这个区别是校招笔试选择题里最常出现的考点之一没有之一。2.2 事件循环宏任务与微任务的输出顺序事件循环这道题几乎每家都会考58同城也不例外。选择题的典型形式是给出一段代码要求判断console.log的输出顺序。console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); Promise.resolve().then(() { console.log(promise); }); console.log(script end); // 输出顺序script start - script end - promise - setTimeout这里核心原理是同步代码先执行然后执行微任务队列Promise.then最后执行宏任务队列setTimeout。哪怕setTimeout的延迟是0它依然会被放入宏任务队列等微任务队列全部清空后才执行。我当时做题时特别留意了这类题的变形如果在Promise.then里再嵌套一个Promise或者在setTimeout里再创建一个微任务执行顺序会怎样变。笔试时时间紧张但只要掌握了“同步→微任务→宏任务”这个优先级绝大多数题都能推出来。2.3 CSS布局与BFC边界问题前端笔试题不会只考JSCSS布局同样是重头戏。58同城的卷子里有一道关于BFC块级格式化上下文的题目问下列哪些方式可以创建BFC。正确选项包括overflow不为visible比如hidden、auto、scrollposition为absolute或fixeddisplay为inline-block、flow-root、table-cell等float不为noneBFC的意义在于它可以解决两类经典问题一是外边距折叠margin collapse二是父容器高度塌陷子元素浮动导致。理解BFC的创建条件和作用原理做CSS题能节省不少时间。另外还有一道flex布局题考的是flex: 1这个简写属性到底等价于什么。正确答案是flex: 1 1 0%即flex-grow: 1、flex-shrink: 1、flex-basis: 0%。很多人以为flex: 1就是flex: 1 1 auto这在多数场景下效果不一样。当flex-basis为0%时项目会平均分配剩余空间而auto则基于内容大小分配。这类细节就是选择题考查的底层理解。2.4 浏览器缓存、HTTP状态码与跨域网络与浏览器相关的选择题也占了一定的比例其中包括HTTP状态码里304表示什么 答缓存未修改走协商缓存。301和302的区别 答301是永久重定向302是临时重定向。强缓存与协商缓存的区别 答强缓存不需要发请求到服务器协商缓存需要发请求确认资源是否过期。跨域相关的题目主要考不同跨域方案的原理和适用场景。比如JSONP是利用script标签的src不受同源限制来实现的CORS需要服务端配置Access-Control-Allow-OriginWebSocket本身就不受同源策略限制。这些概念光背不行得理解每个方案背后的机制因为选择题常会混淆几种方案的细节特征。3. 编程题复盘两道核心题的完整解题过程编程题是笔试中分值最高、最能拉开差距的环节。58同城这套卷子编程题有2到3道我把印象最深的两道详细还原出来附带完整的解题思路和代码。3.1 第一题数组扁平化 去重 升序排序题目描述大意是给定一个数组数组内元素可能嵌套任意层数的数组也可能有重复元素要求实现一个函数将数组扁平化、去重并升序排序后返回新数组。输入[1, [2, [3, [4, 5]], 6], 1, 2, 7] 输出[1, 2, 3, 4, 5, 6, 7]这道题同时考察三个基础能力数组扁平化、去重、排序。虽然每块单独看都不难但组合在一起时要选择合理的实现顺序。我当时的解法是直接用ES6的flat(Infinity)做扁平化配合Set去重再用sort排序。function processArray(arr) { return [...new Set(arr.flat(Infinity))].sort((a, b) a - b); } const input [1, [2, [3, [4, 5]], 6], 1, 2, 7]; console.log(processArray(input)); // [1, 2, 3, 4, 5, 6, 7]这套写法简洁清楚但笔试时我还要考虑一个问题如果面试官后续追问“不依赖flat怎么实现”所以提交前我在草稿纸上额外准备了递归版本function flatten(arr) { return arr.reduce((acc, cur) { if (Array.isArray(cur)) { return acc.concat(flatten(cur)); } return acc.concat(cur); }, []); } function processArray(arr) { return [...new Set(flatten(arr))].sort((a, b) a - b); }这段代码用reduce加递归不用flat也能实现任意深度的扁平化。复杂度方面扁平化和去重的整体时间复杂度是O(n)排序是O(n log n)空间复杂度是O(n)在笔试题范畴是完全能接受的。小坑提醒sort方法默认按字符串字典序排序所以升序排序一定要传入(a, b) a - b比较函数否则[1, 2, 10]会排成[1, 10, 2]。这个老生常谈的坑在笔试中仍然有同学在踩。3.2 第二题带并发数限制的异步任务调度器这一题是整套卷子的压轴编程题也是拉开区分度的关键。题目描述如下实现一个Scheduler类构造函数接收一个并发数limit参数。提供add(task)方法task是一个返回Promise的函数。要求保证当前同时执行的任务数不超过limit当某个任务执行完成后自动从等待队列中取出下一个任务执行。add方法需要返回一个Promiseresolve该任务的结果。我当时花了5分钟理解需求主要思考一个点add方法返回的Promise核销时机。在任务入队时调用的add方法会生成一个Promise并返回给调用方。这个Promise必须等到代理的task真正执行完成后才resolve。所以我想到用一个包装函数把调用方的resolve、reject带进队列里。最终实现class Scheduler { constructor(limit) { this.limit limit; this.running 0; this.queue []; } add(task) { return new Promise((resolve, reject) { const wrapper () { this.running; task() .then(resolve, reject) .finally(() { this.running--; if (this.queue.length) { const next this.queue.shift(); next(); } }); }; if (this.running this.limit) { wrapper(); } else { this.queue.push(wrapper); } }); } }验证一下这个调度器的正确性。构造一个并发数为2的调度器添加4个异步任务const scheduler new Scheduler(2); const timeout (delay) new Promise((resolve) setTimeout(resolve, delay)); const addTask (time, name) { scheduler.add(() timeout(time).then(() console.log(name))); }; addTask(1000, 任务1); addTask(500, 任务2); addTask(300, 任务3); addTask(400, 任务4);执行过程的时间线分析t0任务11000ms、任务2500ms同时开始执行。t500任务2完成输出“任务2”任务3开始执行。t800任务3完成输出“任务3”任务4开始执行。t1000任务1完成输出“任务1”。t1200任务4完成输出“任务4”。最终输出顺序任务2 - 任务3 - 任务1 - 任务4。这道题考察的是“任务队列 并发控制”的思想。实际业务开发中无论是前端批量上传文件、接口请求限流还是Node端控制并发请求数都是同一套逻辑。笔试考这道题本质上是在考察候选人能不能把业务场景抽象成代码模型。3.3 编程题的通用思考套路两轮笔试实战之后我总结出一个做题套路先冷静确认输入输出约束再想边界情况最后写代码。第一步明确入参和返回值是什么。比如调度器题目里add方法必须返回Promise这就是一个硬约束。第二步考虑边界。数组扁平化时空数组怎么办deepClone遇到循环引用怎么办这些边界情况往往是测试用例的重点。第三步先写核心逻辑再补包装。比如调度器核心逻辑就两件事判断能否立刻执行、执行完唤起下一个。这个套路不只能用在笔试题上日常写代码时也同样适用。笔试其实只是换了个形式考平时的工程习惯。4. 简答题的答题思路结构化表达是拿分关键4.1 跨域方案这道题怎么答才完整简答题第一道是“列举常见的前端跨域解决方案并说明各自的原理与适用场景。”跨域问题是前端面试的必考题简答题考查的不仅是“知道哪些方案”更关注是否理解每个方案的底层原理和适用边界。我的答题框架是按“客户端方案、服务端方案、传输协议方案”三个维度展开客户端方案JSONP。核心原理是script标签的src发起请求不受同源策略限制。只支持GET请求适合老项目中简单的跨域数据请求。服务端方案CORS。后端在响应头中设置Access-Control-Allow-Origin浏览器检测到这个头后允许前端访问。这是目前最主流、最安全的跨域方案支持各种HTTP方法。预检请求Preflight是CORS中比较隐蔽的细节碰到非简单请求时浏览器会先发一个OPTIONS请求服务器需正确处理。代理方案生产环境中用Nginx反向代理将跨域请求转发到目标服务器绕过浏览器的同源限制开发环境中用Webpack Dev Server或Vite的proxy配置原理相同。这个是绝大多数业务的标配做法。其他方案postMessage用于跨窗口通信document.domain用于子域之间的跨域WebSocket天然不受同源策略限制。答题时还要加一句总结实际开发中优先选择CORS或代理方案JSONP只适合特定老场景因为它不支持POST且存在安全性问题。4.2 性能优化题的回答框架另一道简答题是“页面加载很慢从哪些方面排查和优化”。这类题很开放但考察的是系统性的思考能力。我从三个层面组织答案加载层面分析资源体积。打包体积是否过大有没有做路由懒加载和代码分割图片有没有压缩和懒加载静态资源有没有配置CDN和强缓存渲染层面分析首屏渲染链路。有没有尽量减少DOM层级关键渲染路径上的CSS和JS有没有内联或异步加载有没有避免同步长任务阻塞主线程大数据量列表有没有做虚拟滚动交互层面分析用户感知性能。首屏时间FCP和可交互时间TTI分别多少长列表滚动是否掉帧事件绑定是否存在重复绑定导致内存泄漏这种结构化答题方式不仅把问题说清楚了还能让阅卷人看到候选人的全局观——前端性能优化本身就是个系统工程不是调一两个参数就能解决的。4.3 简答题的通用得分技巧我在秋招笔试里总结出的简答题经验很简单分点作答先结论后细节最后补充使用场景或对比。比如“跨域方案”这道题我会每一条都按照“方案名称——原理——适用场景——优缺点”的格式展开。如果时间不够宁愿多写关键点、少写废话也不要只有一个大段堆砌。阅卷人在短时间内看的是信息密度不是文字长短。5. 笔试现场的时间管理与做题策略5.1 我的时间分配方案90分钟要做完选择题、编程题和简答题时间其实比较紧张。我当时安排是前30分钟搞定点选题单选多选不会的题先标记不恋战。中间35分钟攻编程题每道题控制在10到15分钟。如果一道题卡了超过15分钟果断换下一道最后有时间再回头补。最后15分钟写简答题再留5-10分钟检查选择题中标记的题目。这套时间管理方案有一个核心原则先拿确定性分数再啃硬骨头。选择题是客观题做了就有分编程题如果卡死在第一题后面的简答题也来不及写那才是真正的策略失败。5.2 选择题遇到过不去的题怎么办笔试中遇到实在不会的选择题我的策略是先排除明显错误的选项再根据知识储备做一个最优猜测。比如有几个常见知识点出题人喜好“三短一长选最长”这类的套路其实不靠谱靠谱的是排除法加场景判断。举个例子考HTTP状态码的时候如果不知道403和404在某种场景下选哪个就回想一下这两个状态码的实际业务语义——403是“服务器明白了但拒绝”404是“找不到资源”。这种场景化的记忆比死记硬背状态码列表有效得多。5.3 编程题提交前务必检查的细节编程题的代码写完不代表有分必须通过测试用例才算完。提交前我习惯做三步检查检查函数签名和返回值类型是否符合题目要求。检查是否有语法错误特别是括号匹配、变量名拼写问题。在脑子里跑一遍题目的示例用例确保输出一致。如果平台允许还可以额外构造一两个边界用例测试。比如数组扁平化那道题我会测一个全嵌套的空数组[[[]]]或者全是普通数字没有嵌套的原数组。这种边界情况往往能发现隐藏的bug。6. 从这套笔试卷反推校招前端的备战重点6.1 基础知识的范围和深度做完58同城这套笔试我对校招前端考察范围有了更清晰的认识。选择题部分的核心考点集中在几个大块JavaScript语言特性typeof、闭包、this指向、事件循环、变量提升、CSS布局与BFC、浏览器机制缓存、渲染、跨域、网络协议HTTP状态码、缓存、TCP。这些内容看似就是前端八股文但实际考察的深度在于“能不能理解原理而不是背会概念”。像typeof null这个知识点知道能背出object很容易但知道这是历史bug并且理解为什么不能修复才算真正掌握。6.2 手写题的日常练习方法编程题三道题分别考了数组处理、异步并发控制、深拷贝回忆完整版还有一道深拷贝核心考察点涉及WeakMap处理循环引用。这类手写题备考没有捷径只能靠大量刻意练习。我当时的练习清单是数组工具类扁平化、去重、乱序、分组、分块。函数工具类防抖、节流、柯里化、compose。异步控制并发限制、串行执行、Promise.all/race手动实现。对象相关深拷贝、浅拷贝、Object.assign实现。布局相关圣杯布局、双飞翼布局、垂直水平居中。每一道题都要做到能独立写出来并且能解释每一行代码的用途。笔试时没有时间让你临场发挥这些手写代码需要形成肌肉记忆。6.3 笔试之后的面试衔接如果我当时收到面试通知我会基于笔试中暴露出的薄弱项做针对性补强。比如我在事件循环和宏任务微任务上有过短暂犹豫那我就会重点补这一块如果调度器写得不顺就会再练几道异步编程题。笔试和面试虽然形式不同但考察的知识点高度一致。笔试试卷其实是一面镜子哪些地方犹豫了、卡住了哪些地方完全不会就是需要重点复习的方向。复盘比刷题更重要——做完一套卷子花一个小时消化错题比闷头再做两套新卷子有价值得多。最后再说一个很多人容易忽略的点笔试前一定要去在线编程平台熟悉一下代码编辑环境。牛客网这类平台里有些细节比如自动补全不够智能、不能使用或限制某些API、控制台输出与本地环境不同如果第一次使用很容易因为环境问题浪费时间。提前去刷一两道题热身熟悉输入输出和代码提交流程正式笔试时能节省好几分钟的适应时间。这几分甚至可能改变你整个笔试的结果。