2023年秋招我投了小红书的前端岗约到的笔试是第二批。本来以为和第一批差不多刷刷题就能过真到打开笔试链接的那一刻才发现这场笔试的筛选逻辑和我想象的完全不一样。它不单考你“会不会写代码”更考你对前端基础的掌握深度、对工程化问题的理解程度以及时间不够时如何取舍。这篇文章我就以这套笔试为样本把题型、考点、复盘思路完整拆一遍给正在准备前端校招的朋友做个参考。里面没有题目原话但知识点和解题思路是通用的你可以直接拿去做复习索引。1. 先聊聊这场笔试的整体情况1.1 笔试的基本盘小红书的前端笔试采用的是牛客网在线笔试系统当时我拿到的是第二批套题整体时长120分钟题量大概在20道左右分三个部分选择题、简答题、编程题。选择题里面包含了单选和多选多选少选不得分所以拿不准的选项我宁可少选一个保分。简答题有两道一道偏JavaScript底层一道偏前端工程化。编程题有两道一道是纯算法题一道是结合前端场景的编程题。从时间分配上看选择题大概占40分钟简答题30分钟编程题40分钟剩余10分钟检查。这里要提醒一句在线笔试的摄像头监控和切屏检测是真实存在的我考试过程中不小心切了一次页面查console报错系统直接弹了警告。所以笔试前一定要把本地环境准备好别想着临时去查资料代价可能直接就是这轮面试被标记异常。1.2 我踩过的信息差第一批笔试和第二批笔试的题目是不完全相同的但考点的倾斜方向保持一致。我在准备阶段刷了大量牛客网的剑指offer题算法题确实吃到了甜头但笔试完了之后复盘我发现真正拉分的是选择题里的基础细节以及简答题里对“为什么这样设计”的回答深度。举个具体的例子选择题里有一道原型链相关的问题看起来是考instanceof的运算结果但选项里面混了Symbol.hasInstance的改写情况如果只背结论不看规范的话这里很容易翻车。这种题其实就是技术社区里常说的“前端八股文 一点使用陷阱”它不要求你把所有API背得一字不差但要求你真正理解机制本身。2. 选择题和简答题前端基础决定你能不能进下一轮2.1 常考的基础知识模块从小红书前端笔试的题目分布来看选择题覆盖的模块非常集中。我把它们归成五类JavaScript核心机制、CSS布局与渲染、浏览器与网络、前端框架React为主、前端工程化。这五类几乎是秋招前端笔试的标配小红书也不例外只是它更侧重前两类。JavaScript这块高频考点是闭包、作用域链、this指向、事件循环、原型链、Promise、async/await。表面上考的是代码输出题实际上是在考你对“执行时机”的判断。打个比方事件循环就像餐厅的出菜流程同步代码是后厨直接炒的菜微任务队列是提前备好的半成品宏任务队列是排队的订单只有理解了这三者的配合顺序你才能准确判断一段代码的输出结果。这种题刷多了以后会发现它本质上不靠背靠的是心智模型的建立。CSS布局与渲染这块高频考点是flex布局、grid布局、BFC、层叠上下文、居中方案、两栏三栏布局。小红书笔试里还出现了一道关于position: sticky的题目问在滚动容器中它的表现和relative有什么区别。这类题表面上考CSS属性实际上考的是你对浏览器布局流程的理解比如sticky是相对最近滚动容器定位的而不是相对视口这个细节很多人只在面试题里见过没有在实际页面里验证过。浏览器与网络这块常见的是HTTP缓存、跨域方案、TCP三次握手、浏览器的渲染流程、重排重绘。这方面要重点注意HTTP缓存因为它既考选择题也容易在简答题里让你结合业务场景分析。框架这块小红书笔试对React的考察明显多于Vue这可能和团队技术栈有关。高频考点是虚拟DOM、diff算法、合成事件、hooks原理、受控组件与非受控组件。其中hooks原理的题比较阴它不直接问“useEffect依赖数组是干嘛的”而是给一个组件的渲染时序让你选副作用函数执行的顺序。工程化这块考的更多是webpack的loader和plugin区别、Tree Shaking原理、代码分割、模块化规范。这部分如果平时只是用脚手架没看过构建产物的话选择题很容易靠感觉蒙。2.2 简答题怎么答才不丢分简答题是这套笔试里最考察“架构思维”的部分。我印象比较深的一道题问的是“如何设计一个前端项目的错误监控体系”。题目关键词是错误采集、上报策略、sourcemap还原。这道题说难不难说简单也不简单因为它没有一个标准答案考官想看的是你有没有从零到一考虑过这个问题。我当时答题的思路分三层。第一层是采集维度要把运行时错误、资源加载错误、接口请求错误和Promise未捕获错误分开处理用window.addEventListener(error, ...)捕获运行时错误用unhandledrejection捕获Promise错误用performance.getEntriesByType(resource)判断资源是否加载失败。第二层是上报策略不能每报一条错误就发一次请求要做批量上报和合并去重用navigator.sendBeacon在页面卸载时兜底。第三层是SourceMap还原线上代码是压缩混淆过的要在错误堆栈里带sourceMappingURL和行列号配合上传到监控平台的map文件还原出源码位置。这道题本身不难但我在答的时候写了一个很关键的点上报不能影响业务主流程。也就是要把上报逻辑设计成异步、低优先级、可降级的方案比如在空闲时间执行或者采样上报。按我的经验这种题回答的时候只要体现出“我考虑过极端情况”比如网络断了怎么办、错误刷屏怎么办就已经能赢过一大半只背八股文的人了。简答题另一个常见方向是“如何做前端性能优化”。这类题的答法要避免罗列清单而是要有一个分析链路。比如先定义性能指标FCP、LCP、CLS、TTI、TBT。再按用户的访问链路拆分DNS解析阶段能不能用预解析请求阶段能不能做缓存策略和CDN加速HTML解析阶段能不能用preload和prefetchJS执行阶段能不能做代码分割和懒加载渲染阶段能不能减少重排重绘。回答里带上指标定义和量化方式比单纯说“要压缩图片、要开启gzip”得分高很多。3. 编程题算法层面到底在考什么3.1 题型分布与难度小红书前端笔试的编程题不多但质量不低。第一批和第二批都是两道题难度介于LeetCode中等题和剑指offer经典题之间。一道是纯数据结构算法一道是和前端场景强相关的“工程算法”。纯算法题这次考的是“合并区间”的变种。题目大意是给一个包含若干区间的数组部分区间有重叠需要返回合并后的结果。这道题本身就是LeetCode 56的原题思路很固定先按区间起点排序然后遍历数组如果当前区间的起点小于等于结果数组中最后一个区间的终点就更新最后一个区间的终点否则加入新区间。刷过题的基本都能写出来。但要注意这道题有边界条件输入数组为空的情况、区间边界相等算不算重叠的情况、区间顺序混乱的情况。我在写的时候加了处理先判断intervals.length 1直接返回排序用(a, b) a[0] - b[0]合并时取max(prev[1], curr[1])。这题看着简单但边界条件就能卡掉不少人。第二道题是“实现一个带过期时间的localStorage”。这是一道非常典型的前端场景题核心考点是封装、键值读写、过期判断、存储空间管理。我的做法是把值包装成一个对象结构是{ value, expire }写入的时候在key后面加一个元数据字段单独存储过期时间。读取的时候先判断是否过期过期就删除并返回null没过期就返回值本身。这里有一个容易踩的坑直接给localStorage的原型打补丁或者修改它的静态方法这种方案会污染Web Storage标准接口在小红书的笔试题里我第一次写的时候就在Storage.prototype.setItem上做了增强后来检查代码时想到如果页面里用了第三方库也重写了这个方法两个逻辑就会互相干扰。所以一个更稳妥的做法是封装成独立的函数式API比如setItemWithExpire(key, value, expireSeconds)和getItemWithExpire(key)。这个思想在面试官追问的时候也很加分说明你写业务代码的时候有“模块隔离”的意识。3.2 算法题的三种通用解法从这两个题出发我总结一下前端笔试中算法题的通用解法准备参加后续笔试的人可以直接套用。第一种是排序加双指针。合并区间、三数之和、盛最多水的容器这类题都可以先排序然后用双指针遍历降低时间复杂度。这类题的关键是先画图把数组在数轴上的位置画出来再去写代码就清晰很多。第二种是哈希表辅助。很多场景题都会要求“查找是否存在”、“统计次数最多”、“记录最近一次出现的位置”这时候哈希表是最高效的数据结构。比如带过期时间的localStorage本质上就是用一个对象去维护key到元数据的映射再用时间戳做判断。第三种是动态规划。小红书第二道算法题没直接考dp但不代表不会考。秋招笔试里动态规划出现频率很高尤其是字符串相关的编辑距离、最长公共子序列这类题目。前端岗位的dp题一般不会太难核心是状态转移方程能不能写对。我准备的时候把dp[i][j]的二维数组推导过程在纸上画出来比直接看代码印象深得多。3.3 做题节奏和代码规范在线笔试的做题节奏我强烈建议采用“先易后难、先保分后冲高”的策略。拿到题目后先把两道编程题都读一遍判断哪道是白给的、哪道是硬骨头。第一道合并区间这种题直接写完提交第二道带过期时间的localStorage虽然思路不难但要考虑封装和边界这个时候可以稍微放慢节奏把代码写完整。在代码规范方面远程笔试的系统不会自动格式化代码但阅卷人会在后期人工评审代码。所以变量命名、函数拆分、注释习惯这些细节一定要做到位。比如我的localStorage封装里两个函数就分别命名为setWithExpiry和getWithExpiry一眼看出意图。注释要写“为什么这么做”而不是“这行代码做了什么”。比如写// 这里用元数据字段存expire避免污染原始value面试官看到这种注释会认为你有架构意识。4. 框架和工程化考点笔试里最容易忽略的加分项4.1 框架原理要掌握到什么程度小红书前端笔试对框架的考察侧重点不是“你会不会用”而是“你知不知道它背后的机制”。如果是准备社招通常要求能讲清楚React fiber架构的调度原理但校招笔试阶段考得更多的还是虚拟DOM、diff算法、闭包陷阱这一类“用的时候经常踩坑”的机制。举几个高频例子。第一个是React中的key它不只是给开发者看的标记而是diff算法中判断节点复用的依据。一道经典的考题是用数组索引作为key在列表头部插入一项时为什么会导致渲染bug因为diff算法会认为索引对应的节点还是原来那个节点就不会去重新执行副作用的逻辑导致显示错乱。第二个是useEffect和useLayoutEffect的区别前者是异步执行不影响浏览器绘制后者是同步执行会阻塞绘制。第三个是React合成事件系统它把事件委托到root容器上而不是直接绑在真实DOM上这也就是为什么你在React合成事件里拿到的event对象是一个包装对象而不是原生的浏览器事件对象。如果你准备的框架是Vue也有一类高频笔试题Vue3的响应式原理和Vue2的区别。Vue3用Proxy替代Object.defineProperty解决了对象新增属性和数组索引修改无法响应的问题。这类题其实是在考“你知道这个方案改了什么”而Proxy的答案是“解决了什么问题”和“带来了什么限制”。我的建议是准备框架这部分不要直接背八股文。最好自己动手写一个极其简化的虚拟DOM渲染器把createElement、diff、patch这三个函数实现一遍。写完之后你会发现很多选择题根本不需要背靠推导就知道答案。4.2 工程化和浏览器原理相关考点工程化这块笔试里最常翻车的是“loader和plugin的区别”。我见过不少人能把两者背得滚瓜烂熟但是一旦问“一个less文件从代码到页面最终经历了哪些loader”就开始卡壳。这里我提供一个很直观的类比loader做的事情是“翻译”把浏览器不认识的文件转成JavaScript模块比如less转csscss转style字符串plugin做的事情是“流程控制”在webpack构建的特定阶段去修改输出结果比如打包完成后自动上传CDN。翻译是单向的流程控制是介入式的两者完全不同。浏览器原理方面必考的是渲染流程和缓存策略。这里有一个我自己整理的记忆方法渲染流程可以记成“DOM树 → CSSOM树 → 合并渲染树 → 布局 → 绘制 → 合成”其中JavaScript的加载和执行会阻塞HTML解析所以现在推荐用defer或module方式加载脚本让脚本在DOM解析完之后再执行。HTTP缓存上强缓存就是浏览器在过期时间内直接用本地缓存不跟服务器通信协商缓存是浏览器带着If-Modified-Since或ETag去问服务器“我这份文件还能用吗”服务器说能就用说不能就返回新内容。前端笔试考缓存有个套路问你Cache-Control: max-age3600和ETag同时存在时到底以哪个为准。答案是强缓存优先只有强缓存失效后才走协商缓存。工程化和浏览器原理之所以是加分项是因为选择题里做对的人不多简答题里能讲出链路的人更少。如果你在笔试里遇到这种题目答出来那一瞬间你的竞争力已经超过一半的候选人了。5. 复盘哪些地方最值得新人重点补5.1 七分靠基础三分靠策略我这场笔试复盘下来最大的感受就是前端笔试的出手七分靠扎实的基础三分靠做题策略。基础不牢光靠刷题和技巧补不回来基础扎实策略又能在有限时间内让你多拿10分以上。基础怎么补我建议把前端知识分成三个大桶JavaScript语言能力、CSS与浏览器渲染、框架与工程化。每个桶先列出一个知识树再针对高频考点看对应的源码解析。JavaScript的闭包、原型链、事件循环这种核心机制光看文章不够要在Chrome的Sources面板里打断点调试亲眼看到执行栈的变化才能真正理解。另一个很实际的经验是做选择题时要注意“多选题少选不给分”这个规则。考试系统如果明确说“少选得分多选错选不得分”那就保守一点只选有把握的选项如果系统说“完全匹配才得分”那更要避免多选。这种策略上的细节考场上没人提醒你但直接影响最终分数。5.2 备考路线与资料选择如果你准备得比较早我的建议是分三个阶段走。第一阶段是补基础用一到两周把JavaScript核心机制、浏览器原理、网络基础过一遍这个阶段不用刷题以理解为主。第二阶段是刷题选择题覆盖“前端笔试常考600题”这类题库编程题用LeetCode热题100和剑指offer重点刷数组、字符串、链表、二叉树、动态规划这些类型。第三阶段是模拟实战用牛客网的在线笔试系统做整套模拟卷严格按照120分钟的时间限制中间不切出去查资料模拟真实考试的紧张感。这里我要特别说一下第三阶段最容易被忽略但恰恰是最重要的。在线笔试和你在IDE里刷题是两种完全不同的体验没有IDE的自动补全没有console的即时输出需要在网页编辑器里盲写代码。如果在模拟阶段不提前适应这种环境到了真实笔试时光是代码缩进、变量名拼写这些琐碎问题就能耗掉你大量时间。我备考时用了三天时间专门在牛客网模拟环境里刷题把代码风格和常用函数的拼写练到肌肉记忆这个习惯直接帮我避免了笔试当天在querySelectorAll这个API上卡壳的尴尬。5.3 一点个人体会从我这个过来人的角度看秋招笔试是一场“信息差”的仗。以为自己在拼命刷题的人其实只是在自己的舒适区里反复练习已经掌握的知识点而那些分数高的人往往是把所有题型、所有考法、所有时间分配策略都摸清楚之后才去刷的题。小红书这场笔试不是最难的一场但它背后的筛选逻辑很清晰基础扎实、有工程思维、代码风格干净这三件事做到位就已经远超平均水平了。现在回头想来我最庆幸的是备考时没把精力浪费在死记硬背上而是用大量时间做了两件事一是自己动手逐行读源码把React的diff算法和webpack的构建链路吃透了二是把刷题时踩过的每一个坑都记录在案在复盘环节和牛客网上的错题本对照着重新过了一遍。这两件事看起来投资回报周期很长但它们的收益会一直持续到面试环节等到面试官问你“你觉得这个方案的优缺点是什么”的时候你会发现你付出的每一分钟都在帮你变成一个有真实能力的人。
