2024年9月我投了小米集团前端岗的秋招简历没几天就收到了第一批笔试的邀请。说实话看到笔试两个字的时候我反而松了口气——比起面试那种直面考官的压迫感隔着屏幕做题至少能让我多喘几口气。但真正打开笔试页面之后我才意识到这场考试没那么好对付。它把前端从基础八股到工程实践、从手写代码到场景设计全部串了一遍题型覆盖面和出题角度都很有代表性。考完之后我花了一周时间整理错题和复盘这篇文章就是我对这次完整记录与思考的总结希望能给后面准备大厂前端岗笔试的同学一个参照。1. 投递之后我是怎么为这场笔试做准备的1.1 先摸清大厂前端笔试到底在考什么我身边不少同学备战笔试的方式是疯狂刷题打开题库就是一顿猛刷刷完一看正确率还行但真上了考场发现很多题换个问法就懵了。我这次换了个思路先不急着刷题而是把过去两年大厂前端岗的笔试经验贴、面经、真题回忆版全部翻了一遍试图找出出题规律。翻完之后我总结了几个高频考察方向JavaScript基础尤其是作用域、闭包、原型链、异步编程和事件循环CSS布局与浏览器渲染机制flex/grid、BFC、重排重绘Vue/React框架核心原理响应式数据、diff算法、生命周期、hooks工程化与性能优化webpack/vite基础、懒加载、首屏优化手写代码题防抖节流、深拷贝、Promise实现、数组去重等这五类基本是前端笔试的标配。小米这批笔试题也基本沿着这个方向出但它在场景题和问答题上问得更细更看重你能否把知识落地到真实业务里。所以我在复习的时候刻意把重点放在解释原理和解决实际问题上而不是死记结论。1.2 我的复习计划与资料取舍确定考点之后我把复习时间拆成了三个阶段第一阶段花一周补基础。主要过一遍JS红宝书里关于作用域链、原型链、事件循环的章节再看一遍MDN上CSS布局和浏览器的渲染流程。这一阶段我不做笔记而是每看完一个章节就用自己的话在文档里复述一遍复述不出来的地方就是知识盲区回头再读。第二阶段花三天刷手写题。手写题是笔试里最拉分的一块因为选择题可以蒙问答题可以编代码题写不出来就是写不出来。我把常见的十几种手写题全部过了一遍包括防抖、节流、深拷贝、Promise、数组扁平化、new的实现、call/apply/bind等每一道都自己先写一遍再对照优秀答案解析思路。第三阶段做模拟与查漏。我找了几套往年大厂的真题按笔试的时长限制掐表模拟做完之后把错题涉及的知识点单独列出来重学一遍。资料方面我没有贪多。市面上的前端面试资料实在太多了什么八股文合集、面试题700道、前端进阶指南如果全都看一遍一个月都不够。我的选择是一份系统的知识梳理文档为主配合MDN和几个高频面经帖作为补充加一个专门记错题的文档。资料在精不在多关键是你有没有真的把里面的内容消化成自己的。2. 笔试现场选择题和问答题里的高频考点与破解思路2.1 JavaScript基础闭包、事件循环和原型链小米这批笔试的选择题部分不算刁钻但覆盖的点非常细几乎每一道题都在逼你区分知道和理解的差别。比如有一道关于闭包的题代码大概是这样的for (var i 0; i 5; i) { setTimeout(() console.log(i), 1000) }考察的是var和let的区别、闭包捕获变量的时机、setTimeout回调的执行时机。这种题放到平时可能闭着眼都能答出来——输出5个5。但笔试的选项里有一个干扰项是输出0 1 2 3 4如果你只是模糊地记得var会导致输出5个5而没有真正理解这是因为var声明的i是函数作用域共享同一个变量就很容易在几个选项之间犹豫。解法其实一句话就能讲清楚var声明只有一个全局 i循环结束后 i 已经变成5五个 setTimeout 回调共享同一个变量所以打印5个5改成let或者用闭包包裹一层就能打印0到4。还有一道事件循环的题把setTimeout、Promise、async/await混在一起让你判断输出顺序。这类题考的就是宏任务和微任务的分工。我的答题思路分三步先看同步代码再收集微任务队列最后处理宏任务队列。具体到代码console.log(start) setTimeout(() console.log(timeout)) Promise.resolve().then(() console.log(promise)) queueMicrotask(() console.log(microtask)) console.log(end)输出顺序是 start、end、promise、microtask、timeout。这是因为同步代码先执行然后把所有微任务Promise.then、queueMicrotask清空最后才执行宏任务setTimeout。只要这个顺序刻在脑子里这类题就不会错。原型链的题也出现了它给了一段构造函数加方法的代码问你instanceof的结果和某个属性是否能访问到。这种题本质是考察你对原型链查找机制的理解实例上找不到属性时会沿着__proto__一直往上找直到对象原型为 null。我平时复盘这类题的时候喜欢画一张原型链的图把Function、Object、构造函数的prototype和实例的__proto__之间的关系理清楚画过一遍之后很多变形题都能一眼看穿。2.2 CSS与浏览器布局、渲染和性能指标CSS部分我没怎么担心但没想到它考得比我预想中仔细。比如有一道关于 flex 布局的题问的是容器宽度变化时三个子项的放大缩小比例如何计算。题目给了flex: 1 1 100px这种写法考flex-grow、flex-shrink、flex-basis三个属性的含义和优先级。如果只记得flex: 1 表示等分就很容易掉坑因为当容器空间不足时还会涉及flex-shrink的缩水计算。还有一道关于 BFC 的题目给出几种创建 BFC 的方式问哪一种能解决外边距折叠的问题。BFC 的内容平时用得不算多但笔试喜欢考因为它能考察你对CSS布局模型的理解。答题要点是BFC 是一块独立的渲染区域内部元素不会影响外部因此可以解决外边距折叠、高度塌陷、浮动环绕等经典问题。创建 BFC 的常见方式有overflow: hidden、display: inline-block、position: absolute、display: flow-root等。浏览器机制部分考了从输入URL到页面渲染的完整过程以及其中哪些步骤会导致重排和重绘。比如修改width会触发重排修改color会触发重绘。这道题让我意识到刷面经的时候不能只记结论最好能把布局Layout和绘制Paint这两个阶段做一个对比梳理出哪些属性改动能跳过布局直接重绘哪些属性甚至能跳过绘制交给GPU合成。2.3 框架题Vue3 vs React 的核心机制小米笔试的框架题出得很有区分度不是单纯问你Vue和React哪个好而是给了一个具体的场景让你选实现方式并说明原因。比如它出了一道题要求用 Vue3 实现一个自适应高度的输入框。选项里有computed、watch、nextTick、ResizeObserver几种方案。这个题的考点是你有没有真正理解 Vue3 组件更新机制以及浏览器原生API在 Vue 生态里的配合方式。正确的思路是使用watch监听内容和容器尺寸变化在回调里通过nextTick等待 DOM 更新后重新计算高度如果涉及容器尺寸的变化还要用ResizeObserver来监听。React 相关的题则集中在 hooks 的依赖数组上。比如给了一段useEffect的代码问修改状态后执行了几次。这个考的就是对依赖收集和重渲染机制的理解依赖数组中的值变化了才会重新执行 effect空数组只在挂载时执行一次不传依赖则每次渲染都执行。笔试考这种题其实是在检验你有没有自己调试过 hooks 的执行时机而不仅是背过规则。框架题里还插了一道微前端的题目问主应用和子应用之间如何共享状态。这个问题放在日常开发里很实际因为微前端方案在大型项目里越来越常见。我的答题思路是从通信方式入手可以借助全局变量、事件总线、window上的自定义事件或者使用qiankun提供的props传递机制。每种方式各有适用的场景全局变量最简单但容易污染自定义事件解耦更彻底props 则更贴合框架的声明周期。笔试的回答不需要写代码但要把方案和理由讲清楚。3. 编程题实战从题目解读到代码落地的完整路线3.1 算法题边界条件和复杂度分析编程题部分一共有四道整体难度比 LeetCode 中等题略低但需要在半小时内完成时间压力还是有的。第一道算法题类似于给定一个整数数组找出数组中两个数之和等于目标值的下标。这就是经典的 Two Sum。我直接用的哈希表解法一遍遍历边遍历边把当前元素的值和下标存进 Map同时检查target - 当前值是否已经在 Map 里。时间复杂度 O(n)空间复杂度 O(n)。这里要特别提醒一个点笔试的代码题往往不会只考你会不会写还会在输入样例中埋一些边界情况。比如数组为空、数组只有一个元素、目标值是负数、两个相同元素的下标不能重复使用等。我这次就差点在数组只有一个元素的情况上翻车——如果直接拿第二个数去查表不做长度判断就会报错。所以写完解题逻辑之后一定要花30秒检查一下空数组和单元素数组的情况。第二道算法题是字符串处理的场景要求把一个字符串中的空格替换成指定字符但要求在原字符串上操作不能用额外空间。这题考的是双指针从后往前遍历的思路。先统计空格的数量然后扩展字符串到替换后的长度两个指针分别指向原字符串末尾和新字符串末尾从后往前一边遍历一边替换。为什么从后往前因为从前往后移动元素会导致大量重复搬运时间复杂度会退化为 O(n²)而双指针从后往前是 O(n) 的高效做法。3.2 手写实现题Promise、防抖和深拷贝编程题里的手写实现题是很多人心里最没底的题型这次出现了三道经典题目。第一道是手写Promise.all。答题的关键点有两个一是返回一个新的 Promise二是要正确处理传入的 iterable 中每一项的结果和错误。我的实现思路是先判断传入参数是否是可迭代对象不可迭代直接 reject然后新建一个结果数组再遍历每一项用Promise.resolve把每一项包装成 Promise然后分别通过.then收集结果每收集一个就计数计数等于总长度时 resolve。任何一个 reject 就直接 reject 整个 Promise。注意直接用forEach遍历时数组的长度已经固定所以不需要担心异步执行时索引错乱的问题。第二道是手写防抖函数。防抖的核心是在一次事件被连续触发时只在最后一次触发后的等待时间结束后执行回调。实现上需要利用闭包保存计时器每次触发时先清除上一个计时器再重新设置一个新的计时器。关键是this指向和参数透传的问题需要用普通函数而不是箭头函数来保存context并且要判断边界条件如果immediate参数为 true第一次触发时应该立即执行。第三道是深拷贝。这道题非常经典但坑也最多因为完整版要综合考虑很多东西基本类型直接返回、Date和RegExp需要用构造函数重建、数组和对象要递归遍历、循环引用要用WeakMap做缓存还要处理Map、Set等特殊结构。我当时写的是简化版用typeof判断引用类型遍历对象属性递归拷贝并加了一个WeakMap防止循环引用但没处理Date和RegExp。回来复盘时发现这是一个明显的扣分点。如果你准备面试建议把完整版背得滚瓜烂熟因为深拷贝几乎是大厂前端笔试的必考题。3.3 场景设计题大文件上传和前端性能优化场景设计题是整张卷子里最有意思的部分它没有标准答案考察的是你解决问题的思路是否完整。有一道题是如何实现大文件上传的断点续传。我从分片上拆解了这个问题先把大文件切成固定大小的分片每个分片计算一个哈希值作为标识然后并发上传这些分片到服务器上传之前先向服务器询问哪些分片已经上传过跳过这些分片所有分片传完后服务端按分片序号合并文件。除此之外还要考虑上传失败后的重试机制以及并发数的控制。用户说提示可以用 Web Worker 来切分文件避免主线程阻塞这个思路也很有价值。另一道题是页面首屏加载慢如何定位和优化。我给出的完整思路是先用 Performance 面板和 Lighthouse 确认瓶颈是网络、渲染还是脚本执行然后针对不同瓶颈给方案——网络层面做资源压缩、开启CDN、按需加载渲染层面减少 DOM 层级、用虚拟列表代替长列表渲染构建层面用 webpack 的SplitChunks拆分第三方库、通过import()做代码分割。同时考虑前置工具比如用font-display优化字体加载避免字体闪烁阻塞文本渲染。这个题的答题框架建议按照分析-定位-针对性优化-验证效果的顺序来组织逻辑完整比具体方案更重要。4. 考场上容易被忽略的扣分点4.1 读题和审题的坑笔试的编程题页面通常会留比较大的空白区域让你写代码和注释但很多同学一上来就对着题目给出的标准模板开始写忽略了题目要求里的细节。这次我就踩了一个坑有一道手写题要求实现一个函数参数为一个数组和一个回调函数返回一个新的数组如果直接原地修改原数组就完全不满足题意。所以下笔之前我建议花至少一分钟从头到尾把题目读两遍把输入是什么、输出是什么、返回值还是原数组、能否影响原数组这几个关键信息圈出来防止因为审题问题白丢分。4.2 时间分配与做题顺序编程题四道时间一共60分钟。我的策略是先做手写题再做场景设计题最后做算法题。原因很简单手写题的代码结构相对固定脑子对这类题目形成一个模板写起来最快场景设计题虽然要写思路但不需要通过所有测试用例写得宽松一点不会有压力算法题如果被卡住容易占用大量时间影响心态放在最后做比较合适。实际执行下来我每道题控制在12到15分钟最后留了5分钟检查代码逻辑和边界情况。如果有人习惯从算法题开始也不是不行关键是给自己设一个卡壳止损时间比如一道题想了10分钟还没思路就果断跳过别死磕。4.3 代码风格与注释笔试判卷一般有两种方式一种是机器跑测试用例一种是人工看代码。机器判卷的情况下仅通过测试用例就可以了但如果有人工参与代码风格和注释就是加分项。我在笔试时写了比较多的注释每一段关键逻辑前面都用一行注释说明思路这样即使代码没跑通阅卷人也能看出你有完整的解题思路。另外一个容易忽略的点是变量命名避免a、b、tmp这种无意义名称用targetMap、resArray、remainingChars这种能表达含义的名称阅读体验会好很多。这也是日常开发的好习惯笔试时将这种习惯体现出来会给阅卷人留下良好的第一印象。5. 笔试后的完整复盘给下一届的实战建议5.1 反复出现的核心考点小米这批笔试考完我最大的感受是它考的知识点不算偏门但考察的角度非常贴近实际开发场景。如果只看面经上的高频题可能觉得大厂前端笔试就是考背题但实际上它考察的是你在真实开发中对这些知识的理解深度。复盘下来我发现以下知识点在卷子里出现频率极高事件循环机制尤其是宏任务和微任务的执行顺序闭包以及如何用它解决循环陷阱手写防抖、节流、深拷贝浏览器从输入URL到渲染完成的全过程以及重排、重绘的触发条件Vue3 的响应式原理和nextTick的用途大文件上传、首屏优化等实际业务场景的解决方案这些知识点的共性就是和日常工作强相关。如果你平时写代码只用框架封装好的API从不思考底层原理笔试就会暴露短板。5.2 我的复盘清单和错题本笔试结束后我第一时间把所有零散的记忆整理成一份复盘清单一共做了四件事第一把每一道题的考点列出来标出自己对哪些考点有把握、哪些是蒙对的、哪些完全不会。第二把没答对或者不确定的题全部找到正确答案并用自己的话写一遍解析而不是直接复制网上的答案。第三把涉及的知识点归类到基础框架工程化场景设计四个文件夹里每个知识点下面记录一道对应的例题和自己的思路。第四做一道一题多解的训练比如深拷贝、防抖节流这种经典题尽量写两到三种不同复杂度的解法加深理解。这套方法不限于小米的笔试后续我拿它复习其他公司的笔试也很管用。错题本的价值在于它把我好像会了的错觉变成我能讲清楚每一步为什么这样做的确定性。5.3 如何从笔试题反推面试准备重点笔试其实是一座桥梁它能帮你看清自己接下来的面试准备重点。我复盘的时候发现笔试里暴露出来的薄弱点往往就是面试中大概率会被追问的地方。比如我这次在场景设计题的大文件上传部分没写清楚Web Worker分片和并发控制之间的关系后面复习时我就专门把 Worker 的用法和浏览器并发限制的机制认真学了一遍同时补了微前端、性能监控、组件库设计这类工程化知识。另一个值得参考的思路是把笔试题当成面试实战来思考如果面试官问你项目中做过哪些性能优化你答首屏优化时可以从笔试那道首屏优化的场景题作为切入谈资源压缩、代码分割、懒加载、CDN、字体优化等细节。笔试题比面经题更能反映真实的业务需求把这些题目的解决方案转化为自己项目中的实践叙事在面试里会非常有说服力。最后再分享一个小技巧笔试结束后的黄金三小时一定要用来复盘。趁着记忆还热把能回忆出来的题目考点、自己卡壳的地方、代码里的边界问题全部记下来哪怕只是几条零碎的笔记也比隔天再回忆高效得多。我这次就是因为考完当天就整理了一遍后面写这篇复盘时才没有遗漏太多细节。前端岗位的笔试确实有难度但它的考察逻辑很清晰只要把基础打牢、把手写题练熟、把场景题的答题框架理顺再按部就班地复盘几次就能稳步提高。希望这份复盘记录能帮你少走一些弯路。