一场笔试到底在筛什么作为一名经历过2024年春招、也帮团队出过前端笔试题的老开发我可以直接告诉你大厂前端笔试不是考你会不会写页面而是考你在限时压力下能不能展现出扎实的计算机基础、对前端生态的熟悉程度以及遇到陌生问题时独立拆解的能力。小红书前端岗的笔试在圈内一直以“考得细、覆盖广、编程题有区分度”著称第二批的题目整体延续了这个风格但也有一些明显的侧重点变化。这篇内容我会把2024年春招小红书前端岗第二批笔试的完整复盘拆给你看涵盖题型分布、高频考点、编程题思路解析以及针对不同基础阶段的备战建议。不管你是正在准备2026届秋招还是打算年后跳槽这份复盘都能让你少走不少弯路。1. 整体题型设计与考察思路先看整体情况。第二批笔试依然是牛客网在线答题总时长120分钟题型分两大部分客观题单选多选和两道编程题。客观题大概在20道左右覆盖JavaScript、CSS、浏览器原理、网络协议、前端框架、工程化等领域编程题一道偏算法、一道偏场景设计这个组合在近两年的大厂笔试里非常典型。为什么是这个结构我个人的理解是客观题在快速筛选知识面的广度看你对前端核心基础有没有形成体系化的认知而不是零散的“背面试题”编程题则在考察代码实现能力和工程思维尤其是第二道场景题往往没有唯一答案考察的是你在有限信息下能否做出合理技术选型和实现。值得注意的一个趋势是小红书这批笔试对“运行时原理”的考察明显加重。比如事件循环、Promise执行顺序、浏览器渲染机制、HTTP缓存协商等几乎每套题里都会出现两三道而且往往结合具体代码段让你输出执行结果或选择结果。这意味着单纯背八股文已经不够了你必须真正理解每一行代码在引擎里是怎么跑起来的。2. 客观题高频考点逐项拆解2.1 JavaScript基础与运行时机制这一块是客观题的绝对主力大概能占到8到10道。考察点非常集中来来回回就那几个作用域与闭包、this指向、原型链与继承、事件循环、Promise与async/await、类型转换、数组方法的手动实现原理。两道印象深刻的题一道是打印输出类代码大概是这样的async function async1() { console.log(async1 start); await async2(); console.log(async1 end); } async function async2() { console.log(async2); } console.log(script start); setTimeout(() { console.log(setTimeout); }, 0); async1(); new Promise(resolve { console.log(promise1); resolve(); }).then(() { console.log(promise2); }); console.log(script end);这种题笔试里出现频率极高看起来简单但真正能一次性答对的候选人其实不多。关键在于你要把整个事件循环的流程捋清楚同步代码先执行微任务在每一个宏任务结束前清空await后面的代码相当于被包进了微任务。我建议你在纸上走一遍执行顺序别凭感觉选。另一道题考的是对象属性描述符和Proxy的配合使用问的是通过Proxy拦截get和set时如果目标对象定义了不可枚举的属性访问时会不会触发拦截。这道题区分度很高很多候选人对Reflect和Proxy的理解停留在“会用”层面不清楚两者搭配时目标对象内部槽位internal slot的影响。我当时做题的时候也愣了一下说实话这类边角知识点如果不是系统性看过ES6以后的新特性很容易丢分。2.2 CSS布局与视觉细节CSS在笔试里的地位不如JS那么重但绝对是拉分项。小红书这批题里CSS考了大概4道清一色集中在flex布局的剩余空间分配、grid网格定义与隐式轨道、BFC的创建条件与作用、层叠上下文与z-index的嵌套规则。有一道题是给了一段flex容器的样式其中子项设置了flex: 1 1 0%和flex: 0 0 auto的不同组合要求判断最终宽度。这道题不复杂但每年都有人错原因是对flex-basis、flex-grow、flex-shrink三个属性的联动关系理解停留在表面。记住一个口诀flex-grow管变大分配flex-shrink管变小压缩flex-basis是基准尺寸auto表示取width值0%表示以内容为基准。三者配合时先按基准算再按比例分配或压缩剩余空间。另一道题考的是grid隐式轨道设置grid-template-columns: repeat(2, 1fr)然后放5个子元素问第5个元素会出现在哪里。答案是会自动创建新的行行高由grid-auto-rows决定默认auto也就是内容撑开。这道题对实际开发意义很大因为很多前端在写瀑布流或卡片布局时根本没在意隐式轨道的行为导致间距诡异。CSS这块我的经验是不要只看文档要自己在浏览器里改样式观察效果尤其要对flex和grid的尺寸计算模型有直觉。笔试没法开DevTools这种直觉只能在平时积累。2.3 浏览器原理与网络协议小红书前端的业务体量决定了他们对性能和网络体验极其敏感笔试里这两块的题出得很专业。常见考点包括从输入URL到页面展示的完整过程、浏览器缓存策略强缓存与协商缓存的具体Header、HTTP/1.1与HTTP/2的区别、渲染进程的合成器与光栅化流程、回流与重绘的触发条件、Worker与主线程的通信方式。有一道题的出法很有意思给了四个场景问哪个一定会触发浏览器重排。选项里有“修改transform”、“修改opacity”、“添加类名改变visibility”、“改变font-size”正确答案是改变font-size。这道题就是经典陷阱transform和opacity都走合成器visibility只触发重绘但font-size是几何属性一定会触发重排。虽然老生常谈考场上还是有相当一部分人选了opacity。缓存策略那道题给了响应头Cache-Control: max-age3600, must-revalidate然后问如果本地时间在过去50分钟时发起了请求且缓存文件还在是否会直接命中强缓存。这里必须注意must-revalidate的含义——它允许使用过期缓存条件是源服务器不可达否则先校验。但这里还在max-age内所以直接命中强缓存不发请求。细节决定成败这类题就是专门筛这种不细看文档的人。2.4 框架与工程化2024年春招时小红书前端主技术栈还是React但笔试里框架方向的题出得很克制不绑定某个特定框架问API而是考察底层的通用设计思路。比如问你虚拟DOM的diff算法为什么需要keykey的作用到底是什么比如问你函数式组件和类组件在数据更新时的行为差异还问了一个Vue3的computed和watch的适用场景区别。这说明什么说明笔试想筛的是“懂原理的人”而不是“Api调用员”。Vue和React虽然写法不同但在数据驱动视图、响应式追踪、组件的生命周期管理这些底层逻辑上是相通的。你只要真正理解其中一个框架的核心机制换框架不过是换层皮。工程化方向考了Webpack构建流程中loader和plugin的区别、Tree Shaking的工作原理以及微前端方案中JS沙箱的核心作用。可能是2024年AI工具已经开始普及还出现了一道关于前端如何规范使用大模型生成代码的题目问在CI流水线里集成AI代码审查时如何保证生成代码符合项目的ESLint规范。这题放在两年前根本不可能出现但放在2024年春招就非常合理了——前端岗位的边界正在快速扩展。3. 编程题全流程解析3.1 算法题实现与思路第一道编程题是一道中等偏简单的数组操作题题目大意是给定一个整数数组和一个目标值k要求找出数组中所有和为目标值的连续子数组的个数。这道题是LeetCode 560原题但做了一点变形变成了返回所有子数组的左右边界下标数组。这题最优解是前缀和加哈希表。先说思路遍历数组维护一个前缀和sum每到一个位置看看sum - k之前出现过几次如果出现过说明从之前那个位置的后一位到当前位置这一段连续元素的和就是k。用哈希表存每个前缀和出现的次数时间复杂度O(n)空间复杂度O(n)。function subarraySum(nums, k) { const countMap new Map(); countMap.set(0, 1); let sum 0; let count 0; const result []; for (let i 0; i nums.length; i) { sum nums[i]; const need sum - k; if (countMap.has(need)) { count countMap.get(need); } countMap.set(sum, (countMap.get(sum) || 0) 1); } return count; }笔试时如果你要求返回下标数组那哈希表里存的就不能只是次数而应该存下标集合。我当时是维护了Map前缀和, number[]每次查need的数组长度把每个起点到当前终点i作为一组区间push到结果中。注意边界处理如果need为0说明从数组开头到当前位置这一段本身就符合条件这种情况也要算进去。还有一种更直观的暴力解法就是固定左边界不断累加右边界累加过程中一旦等于k就计数。这种方式时间复杂度O(n^2)在数组长度超过10万时会超时。但作为笔试备用方案如果一时想不起前缀和起码能保证部分case通过拿到一半分数。我建议笔试时先把暴力解写上、确保能跑通核心逻辑再优化成前缀和解这样最稳。3.2 场景编程题虚拟列表实现第二道编程题才是真正的区分度所在。题目大意设计一个虚拟列表组件要求渲染10万条数据时页面不卡顿支持动态高度并提供scrollToIndex方法。请用JavaScript或任意前端框架实现。这道题为什么经典因为它在实际业务里就是硬需求——小红书的信息流、评论区、搜索结果都涉及长列表渲染。整页DOM渲染10万条数据就算浏览器不崩帧率也掉到没法看。虚拟列表的核心思想是只渲染可视区域内的那几条数据滚动时通过transform或absolute定位来控制每条数据的渲染位置而不是重新渲染整个列表。我当时的实现思路分三步第一步容器高度和滚动事件。外层容器设置固定高度和overflow-y: auto。监听scroll事件通过scrollTop计算当前可视区顶部对应的数据索引。为了性能用requestAnimationFrame节流防止scroll高频触发导致计算过于频繁。第二步动态高度处理。虚拟列表的难点不在固定高度而在不同条目高度不同。比如小红书的笔记卡片有的三张图有的六张图高度天然不同。解决方案是预估高度加实际高度缓存先给每个条目一个预估高度比如120px渲染后通过getBoundingClientRect获取真实高度并记录在数组里下次计算时用真实值。如果某个条目还没渲染过用预估高度占位。第三步scrollToIndex。要滚动到指定索引对应位置需要累加该索引之前所有条目的真实高度或预估高度然后设置scrollTop。注意不能一次性同步累加10万条那样会卡顿。我处理的方法是维护一个positions数组记录每条数据的偏移量和高度查找时用二分查找。class VirtualList { constructor(container, data, estimatedHeight 80) { this.container container; this.data data; this.estimatedHeight estimatedHeight; this.positions []; this.initPositions(); this.bindScroll(); } initPositions() { let offset 0; this.positions this.data.map((item, index) { const pos { index, height: this.estimatedHeight, top: offset, bottom: offset this.estimatedHeight }; offset this.estimatedHeight; return pos; }); } bindScroll() { this.container.addEventListener(scroll, () { requestAnimationFrame(() this.updateVisibleItems()); }, { passive: true }); } updateVisibleItems() { const scrollTop this.container.scrollTop; const viewportHeight this.container.clientHeight; const start this.binarySearch(scrollTop); const end this.binarySearch(scrollTop viewportHeight); // 渲染 start - end 范围内的数据并更新实际高度 } binarySearch(value) { let left 0; let right this.positions.length - 1; while (left right) { const mid Math.floor((left right) / 2); if (this.positions[mid].bottom value) { left mid 1; } else { right mid - 1; } } return left; } }笔试时我没写完整代码但把核心的骨架逻辑、数据结构、关键边界都写清楚了然后加了注释说明思路。阅卷人看的是思路和关键实现不是要你直接跑通一个可交互页面。这里有个小心得像这种场景题一定要先写清楚数据结构和核心算法再去补DOM操作细节。代码宁可框架化、结构化也不要拖沓冗长。除了这道虚拟列表据我了解同一批还有另一套题的编程题是“实现一个带并发数限制的异步调度器”和一个“实现Promise.all带重试机制”。这些都属于典型的“高频手写题”秋招笔试出现概率极高建议直接背下实现模板。3.3 场景编程题大文件上传第二批的另一道场景题隐约记得考了大文件上传。题目描述前端需要上传一个1GB以上的视频文件到服务端要求支持暂停续传、进度展示、并确保上传过程不阻塞页面。请设计方案并实现核心逻辑。这道题考的是你对浏览器文件API、网络请求、以及工程方案的掌握程度。核心套路是分片上传。把大文件通过File.slice(start, end)切成若干片比如每片5MB然后逐个或按并发限制批量上传到服务端。每片传到服务端后服务端记录下已上传的分片索引前端暂停时记录已上传分片续传时只传未上传的部分。最后所有分片都传完前端调用一个合并接口服务端把所有分片拼接成完整文件。我建议在作答时至少写出三个核心函数切片函数、上传分片函数带进度回调、恢复上传函数先查询已上传分片列表再过滤。并发控制也是加分点可以用一个简单计数器实现或者直接用p-limit思路。还有个容易忽略的点上传过程中页面不能卡顿因此文件读取切片用File.prototype.slice就够了不需要再做额外处理因为浏览器处理文件对象本身不会阻塞主线程太久。这道题和虚拟列表题本质考的东西是一样的——把复杂问题拆解成可处理的小单元再用合理的工程手段组合起来。这比背多少API都值钱。4. 备战策略与不同基础的复习路径4.1 基础薄弱阶段把JS核心机制吃透如果你现在还在大三下或刚开始准备秋招时间比较充裕我强烈建议你把JavaScript的核心机制从底层吃透而不是刷面经。重点看三块执行上下文与调用栈、事件循环与微任务宏任务、原型链与闭包的内存模型。这三块是前端笔试的“地基”90%的JS题都是从这三个方向延展出来的。看书的话不要只看红宝书配合《你不知道的JavaScript上卷》里关于作用域与闭包、this指向的章节一起看。网络和浏览器原理这块把《图解HTTP》和MDN上关于缓存、渲染的文档过两遍然后再去做题会顺手很多。4.2 目标冲刺阶段刷题要有套路如果你已经有一定基础就剩两三个月冲刺那就进入刷题模式。笔试题不能做得太散要有体系。我的建议是分三步走第一步按模块刷选择题。把牛客上的前端笔试题库按“JS执行输出”“CSS布局”“浏览器网络”“框架原理”“工程化”分类每类刷30到50道并把错题背后的知识点整理成文档。不要光记答案要把每道题为什么这么选搞清楚。第二步专门练手写题。高频手写题就那些防抖、节流、深拷贝、数组扁平化、Promise.all、Promise.race、new实现、call/apply/bind实现、instanceof实现、LRU缓存、带并发限制的调度器、虚拟列表。这些题网上都有标准答案但你要做到不查资料也能默写出来而且能讲清楚边界情况和复杂度。第三步算法题保持手感。每天一到两道LeetCode中等题重点是数组、字符串、双指针、哈希表、动态规划入门这几类。不是所有大厂笔试都考算法但大厂前端对数据结构的要求不会太低。小红书这批题里算法占了一道如果算法完全放弃第一轮就少了一半分数大概率直接被筛掉。4.3 最后一周做一次全真模拟笔试前一周选一个固定时间段在牛客或CodeTop上找一套2024或2025年的大厂前端笔试题严格控制120分钟全程不开任何资料模拟真实考场状态。做完后不要只看对错要把每道题的知识点重新梳理一遍尤其关注那些“看了答案觉得会但考场上完全没思路”的题。这类题才是你最需要补的漏洞。有些候选人最后一周还在刷面经、背答案我建议省省力气。笔试考场上没有提示你背的东西如果不能转化成自己的推导能力换一种考法就废了。全真模拟那一两个小时的收益比刷三天面经高得多。5. 常见失分点与避坑心得笔试里最容易丢分的地方往往不是那些“不会”的题而是“以为会但其实理解有偏差”的题。我复盘了几套2024年春招前端笔试发现失分点集中在这么几个地方第一个是事件循环的输出顺序题尤其是涉及await、Promise.then和queueMicrotask混在一起的代码段。很多人知道微任务先于宏任务但不知道await后面的代码其实是分成两个阶段的先执行右侧表达式并进入microtask队列等待等Promise resolve后再把后半部分作为另一个microtask入队。这导致输出顺序和直觉不一样。建议你专门把“事件循环执行顺序挑战”这种题目类型刷上30道彻底拿下。第二个是CSS属性的继承与初始值。比如问line-height是否被继承、position: relative是否会创建层叠上下文、visibility: hidden的子元素能否覆盖父元素的hidden等。这些知识点很碎平时开发时不太会注意到但笔试就是爱考。我建议整理一个CSS易混点表格考前过一遍。第三个是编程题只写了核心思路没有完善边界情况。比如虚拟列表的滚动事件没有考虑阻尼滚动导致的瞬时超大scrollTop前缀和求子数组时没有处理数组为空的情况。笔试阅卷很看重你代码的健壮性即使核心思路对边界没处理完也可能扣一半分。写代码时一定要把空数组、单个元素、负数、重复元素、超大输入这些情况在脑子里过一遍能写到注释里说明更好。第四个大坑是时间分配。笔试120分钟说长不长说短不短有些人死磕一道难题导致后面完全没时间写。我的做法是先花30分钟把客观题做完再给每道编程题45分钟剩余15分钟回头检查。遇到卡住的题超过5分钟就标记一下先跳过后面有时间再回来看。千万别在一道题上耗太久不值得。还有一个容易被忽略的点编程题的输入输出格式。牛客网的笔试和LeetCode不同输入输出要自己用readline读取并print输出。每年都有候选人代码写对了但因为没有处理多行输入导致0分特别可惜。考前一定去牛客上做一次“输入输出练习”把常见的字符串拆分、整数数组读取、二维数组读取这些格式摸清楚。6. 笔试之后的思考小红书前端岗笔试第二批的难度整体中等偏上横向对比同期的其他大厂前端笔试它的特点是更偏工程实践、更看重对真实业务场景的理解。这也符合小红书的业务定位——它不是一个纯技术驱动的公司但技术必须深度服务于内容生态和用户体验。所以笔试筛的不仅是你“知不知道”更是你“能不能在实际问题里用出来”。我个人对准备这类笔试的态度一直是这样不要把笔试当成一次考试要把它当成对一个前端工程师核心能力的全面体检。你不需要把所有知识点都背到最新但你必须在最重要的几个领域建立起足够深的认知体系。当你在一道场景题里写出一个优雅的虚拟列表实现或者在一个事件循环输出题里准确判断出每一步出队顺序时那份从容感才是笔试真正想要的。