前几天有个准备秋招的学弟问我小红书2020校招前端笔试题卷一到底该怎么刷有没有什么值得反复咀嚼的题目。我当时愣了一下因为这套题虽然叫“2020校招”但它考察的知识点其实非常经典放在现在依然是前端校招笔试的风向标。对于一个目标是大厂前端岗的应届生来说这套卷子的参考价值不在于“它有多难”而在于它非常真实地反映了大厂校招笔试的考察逻辑——不是考你会不会背API而是考你能不能在一个真实业务场景里把前端基础知识玩明白。我花了点时间把这张卷子涉及的考点、出题思路和答题策略梳理了一遍结合我这些年实际面试和带新人的经验写成了这篇文章。不管你是正在备战校招的应届生还是准备跳槽的初级前端这篇文章都值得你认真读完。我会把每类题型的考察意图、解题思路、容易踩的坑全部摊开讲清楚特别是那些在面试官视角里“一票否决”的细节我会重点标出来。1. 这套笔试题的出题逻辑与备考方向1.1 题目结构与企业视角先说说这张卷子的整体观感。小红书作为内容社区平台它的前端业务有几个典型特征大量图片展示、信息流列表、复杂的交互反馈、跨端适配。这套笔试题的设计明显是围绕这些业务特征来展开的。它不像有些公司的笔试题那样纯粹出脑筋急转弯而是把知识点都放进了一个个贴近业务场景的壳里。从题目类型来看主要分三块基础能力题、代码手写题、业务场景设计题。基础能力题考察JavaScript、CSS、网络与浏览器原理代码手写题考察你对常见API的底层实现理解业务场景题则是给你一个具体的前端问题让你分析并给出解决方案。这三块各有侧重但都指向同一个核心能力你能不能脱离IDE和文档在有限时间内写出可靠的代码、做出合理的决策。我在面试候选人的时候最看重的就是这种“脱离依赖”的能力。很多同学简历上写着熟悉Vue、熟悉React但一上笔试环境没有代码提示、不能查文档写出来的代码破绽百出。那张卷子就像一面照妖镜把真实水平照得清清楚楚。1.2 核心能力模型拆解如果把这套卷子的考点进一步抽象你会发现它实际上在考察四个层级的模型。第一层是语言基础也就是JavaScript的核心机制。这一层不过关后面什么都没法聊。第二层是浏览器与网络包括页面渲染流程、缓存机制、事件循环、HTTP协议。第三层是工程化与框架原理比如模块化、打包工具、虚拟DOM。第四层是综合设计能力就是给你一个场景你能不能结合前三个层级的知识给出完整方案。这四个层级是层层递进的。笔试题目不会直接告诉你“我在考你第几层”但你在做题的时候一定要有这个意识。比如一道关于列表渲染性能优化的题表面上看是考你对虚拟DOM的理解但你要答得完整就得把事件循环里宏任务和微任务的执行时机也考虑进去因为大数据量渲染时需要配合分片处理。这种跨越层级的综合能力才是高分答案和普通答案的分水岭。2. 高频基础题深度解析与答题策略2.1 JavaScript核心考点this指向与闭包陷阱翻开这套卷子JavaScript基础题里几乎必考this指向而且出题方式非常刁钻。它不是简单问你“箭头函数里的this是什么”而是会给你一段多层嵌套的代码让你写出输出结果。这种题型考察的不只是记忆而是你脑子里的执行模型是否清晰。我自己刷这类题有个笨但有效的方法永远手动模拟一遍执行过程而不是靠直觉。比如一个经典陷阱题对象方法里的setTimeout回调中的this指向谁很多基础不牢的同学会答“指向对象”但正确答案是全局对象严格模式下是undefined。原因在于setTimeout的回调是独立调用不是obj.method()的形式所以this丢失了指向。深一层的考法是让你修好它用箭头函数、bind、或者保存this值的闭包三种方案都能修但笔试时你必须选择最符合题目约束的那种。闭包是另一个高频考点而且它和this总是结伴出现。闭包考的不只是“函数能访问外部变量”这层皮而是考察闭包带来的变量生命周期延长、内存占用、以及如何在循环中正确使用闭包。经典题目是用var在for循环里创建点击事件问你点击后输出几。答案是全都输出同一个值很多同学现场才意识到var没有块级作用域。答这类题的时候你要把“为什么”讲透var声明的i是函数作用域每次循环的匿名函数捕获的是同一个i的引用循环结束后i变成了最终值所以点击时拿到的都是同一个值。解决方案有let、IIFE、或者bind传参至少要能写出两种。2.2 事件循环与异步编程微任务宏任务排序题事件循环是前端笔试的钉子户这张卷子也不例外。它通常会给你一串包含setTimeout、Promise、async/await、以及普通同步代码的混合体让你写出最终输出顺序。这类题如果没有真正吃透事件循环机制你可能会答出截然不同的顺序而且看起来每一种都很“合理”。我会建议你从三个层面理解它。第一个层面是浏览器环境里的任务模型同步代码先执行完然后每一轮事件循环先清空微任务队列再取一个宏任务执行执行完宏任务里的同步代码之后又要清空微任务队列如此反复。第二个层面是Promise和async/await的底层原理Promise的then回调是微任务async函数中await后面的代码相当于被包进了then里所以它后面那部分代码也是微任务。第三个层面是面试官常挖的坑new Promise里的executor是同步执行的resolve本身也是同步调用但then的回调是异步的。你把这三点吃透了排序题基本就是送分题。我见过很多同学栽在“async函数里的await会被当成同步代码”这个错觉上其实await不是阻塞整个代码运行而是让出线程让后续调用方继续往下走等Promise状态变化之后再以微任务的形式恢复。理解到这一层做题的时候你就知道该怎么按时间轴一步步推演。2.3 CSS布局与浏览器渲染原理的微妙联系CSS题目在这套卷子里占比不小而且它有个特点喜欢把CSS布局和浏览器渲染原理结合起来考。比如经典的三栏布局它不满足于你写出flex方案还可能会追问各方案的优缺点、以及有没有影响性能的布局抖动问题。小红书页面是典型的图文信息流所以这张卷子里出现了大量图片相关布局题。其中一道比较有代表性的题目是不定宽高的图片如何垂直水平居中。这道题的秒杀方案就是给父容器一个display:grid子元素设置margin:auto代码干净利落。但如果你只会flex的justify-content和align-items方案面试官可能会接着追问grid方案的兼容性影响范围。从备考角度我建议flex、grid、positiontransform三种方案都写熟练每道题至少要能说出两种方案的取舍。渲染原理方面重点看两个重排reflow和重绘repaint的区别与触发时机。笔试题目会问“哪些属性变化会导致重排、哪些只会导致重绘”这个背下来还不够你得会用viewport和移动端优化的例子把它串联起来。比如大量图片加载导致页面排版不断跳动你会怎么优化这就不只是CSS问题了还会涉及设置固定宽高、占位图、或者用aspect-ratio等方案一个知识点必须能延展出完整方案。3. 代码题与手写题实战演练3.1 高频手写题防抖与节流手写题是这套卷子的重头戏而且考察方式很直接给你一段描述让你实现一个函数。防抖和节流基本上年年出现但很多同学只是背了模板并没有真正理解它的适用场景导致题目稍微变通一下就写错了。防抖的核心是把多次触发合并成一次执行在事件停止触发之后等待delay毫秒再执行。节流的核心是在固定时间间隔内最多执行一次。这两者最关键的区别在于防抖适合“最后一次输入才触发请求”的场景比如搜索框输入节流适合“持续触发但需要一定频率响应”的场景比如滚动加载。我在笔试辅导中总结了一个口诀防抖是只看最后一班车节流是固定班次发车。但如果你只在一个纯函数里实现防抖和节流那就太天真了。这套卷子通常还会要求你说明它们的作用与使用场景。此时你要从性能优化角度展开你为什么要处理高频事件因为每次触发都可能造成一次DOM操作或一次网络请求频率过高就会导致页面卡顿或服务端压力过大。如果能答出“防抖适合搜索、节流适合上拉加载”再附加一个用requestAnimationFrame替代节流的优化方案这道题基本满分。3.2 深入底层手写Promise的核心机制手写Promise是很多同学最怕的题因为它牵涉的知识点多而且写起来代码量也不小。这套卷子对手写Promise的考察比较灵活有的年分让你实现Promise.all有的年分让你实现带并发限制的任务队列还有的年份直接让你实现一个简易版Promise。先说Promise.all。它考察的核心点有几个所有输入的Promise是否有thenable检查、返回结果顺序是否保持输入顺序、以及当其中一个Promise reject时是否快速失败。绝大多数同学能写出来“把所有结果push到一个数组里”但常常忘记保持顺序或者忘记处理空数组的情况。这里有一个细节空数组的Promise.all应该resolve一个空数组而不是直接卡住。如果是手写简易版Promise你要抓住骨架状态机pending、fulfilled、rejected、then方法如何注册回调、resolve和reject如何触发回调、以及链式调用的实现基础。你不用实现完整的Promises/A规范但要能跑通最基本的链式调用和异步resovle的场景。我会建议平时练习的时候在纸上手写不要依赖编辑器因为笔试环境里没有代码提示你的手感非常重要。3.3 算法题数组去重与排序背后的边界思维算法题在这套卷子里占比不算最大但却是区分度最高的题型。很多前端同学算法基础薄弱在这块丢分非常可惜。其实校招前端笔试里的算法题难度通常是leetcode easy到medium的区间重点考察的就是几个常见套路数组去重、字符串翻转、二分查找、两数之和、括号匹配。数组去重这道题大家都会但不同写法的水平差别一眼就能看出来。第一种是用Set一行解决第二种是filter配合indexOf第三种是手写哈希表。面试官想看到的并不是你用了Set而是你能否说清楚每种方法的时间复杂度和适用场景。如果题目要求你去重且排序你写一个排序再加双指针去重这就是额外的加分点如果题目要求不能改变原数组顺序你又该用哪种方案这些都是你需要现场思考的。这套卷子的算法题还有个特点会给一个具体场景包装。比如“给定一个字符串和n请实现一个函数输出字符串中每个字符出现的次数”。这就是个“哈希表计数”的变体。你在答题时尽量先写注释说明思路再写代码最后简单分析复杂度。这一套流程下来就算代码有小瑕疵面试官也会给你一个不错的印象分。4. 框架与工程化进阶题剖析4.1 从业务出发理解虚拟DOM与diff算法在校招笔试题里框架题的比重逐年上升。这套卷子考Vue和React的题都有核心落在虚拟DOM与diff算法上。问法通常是为什么要有虚拟DOMdiff算法是怎么工作的key值的作用是什么回答这类题不能只背概念。你要从业务场景出发去理解“为什么需要虚拟DOM”。直接操作真实DOM代价很高因为DOM和渲染引擎的交互非常昂贵而JS对象层面的操作代价很小。虚拟DOM的本质是把DOM操作抽象成JS对象diff把多次变更合并成一次最小化的更新。你把这个逻辑讲清楚了面试官就知道你不是背的。关于diff算法的细节你至少要能讲清楚几个要点同层比较、深度优先遍历、key值的优化作用。还需要能说明不同节点类型怎么处理、列表怎么复用、什么情况下key会导致bug。我特别要提醒的是key不要用数组索引除非你的列表是静态的。因为如果数组发生增删、排序索引会错乱复用策略就会出问题最终导致DOM更新异常。这个细节在笔试里如果能主动写出来是很亮眼的。4.2 构建工具与模块化从Loader到Plugin工程化题里webpack占了很大一部分。这套卷子问的比较多的有Loader和Plugin的区别是什么webpack的构建流程是怎样的如何优化构建速度Loader和Plugin的区别很多同学知道Loader是用来处理文件转换的Plugin是用来做打包优化的但说不清楚本质。Loader是一个转换器是一个函数接收文件内容并返回新的文件内容Plugin则是一个事件监听器在webpack构建的各个生命周期钩子里执行自定义逻辑。这个区别可以用一句话概括Loader从输入输出维度解决“文件怎么处理”Plugin从时间和事件维度解决“整个构建过程怎么增强”。这句话你已经可以记下来直接用。模块化方面这套卷子会考察CommonJS和ESModule的区别。面试官一般想问的点包括一个是运行时加载一个是编译时加载this指向不同能否动态赋值是否存在“静态分析”和“Tree Shaking”的基础。你把它们放在一个对比表里答基本就能拿满这道题的分数。另外建议补充一下模块化的发展演变从IIFE到AMD、CommonJS、ESModule每个阶段的局限性是什么这会让面试官觉得你有全局视野。4.3 性能优化场景题小红书信息流首屏与长列表这是整套卷子里最贴近业务的题型。小红书是一个内容分享社区信息流是它的核心消费场景信息流浏览体验直接决定产品口碑。所以这道题考察的是你针对前端性能问题的综合分析能力。通常题目是这样的一个图片为主的feed流页面首屏加载缓慢你怎么优化你要从几个层面去拆解。网络层面开启HTTP缓存、使用CDN、做资源压缩与合并、图片使用WebP或AVIF格式并懒加载。渲染层面减少首屏的JS体积、按需加载路由、把非首屏组件用异步组件或动态import拆分。浏览器层面避免重排重绘、合理使用content-visibility跳过屏幕外内容的渲染。长列表优化是另一个热点。如果列表有几千条数据直接渲染会导致DOM节点过多滚动卡顿。答案方向包括虚拟滚动只渲染可视区内的节点、时间分片用requestIdleCallback或分批渲染、列表项组件化与key优化。你把这些方案结合起来回答就能体现出一个前端工程师面对真实业务问题的整体解决能力。我当时带实习生的时候常跟他说“笔试里的业务题没有标准答案只有你的知识边界有多宽。”这句话也送给你。5. 常见失分点与备考避坑实录5.1 笔试中最容易犯的低级失误每年我都会听到不少同学说“这道题我明明会的就是没做对”。我看了大量笔试复盘之后发现失分很少是因为“不会”更多是因为一些完全可以避免的低级失误。第一个低级失误是审题不清。题目要求写防抖你写成了节流题目要求输出遍历顺序你少看了一个同步执行的resolve。这个问题的根源在于太着急建议你在动手前花30秒把题目完整读一遍标出关键词——是“写代码”还是“写思路”是“输出结果”还是“说明原因”。第二个低级失误是忽略边界条件。函数不处理空数组、不处理非法入参、不处理未定义的情况这在笔试里是致命的。面试官看代码时边界处理是重点观察项它能直接区分你是“写完功能”还是“写完工程”。第三个低级失误是代码风格混乱。变量命名随意、缩进不对、没有分号、各种风格混用这些都会给面试官留下不好的印象。笔试面试不像机器判题那样完全只看答案正确性如果你的代码本身就很乱说明你平时的编码习惯也不够好。5.2 时间分配与答题顺序的策略这套卷子的题量不小我建议你在开考后先花两分钟把所有题目扫一遍对题型和分值有个整体判断。然后遵循一个原则“先易后难先拿分后攻坚”。具体来说先把JS基础题和CSS布局题这些确定性较强的题目做完它们分数占比高且不容易卡壳。然后做手写代码题这类题只要平时练过基本都能稳定输出。最后留时间给算法题和业务场景题因为这两类题目可能比较耗时而且容易影响心态。如果你在业务题上发现自己知识储备不够也要尽量写出一部分思路、画一个方案草图这会比完全空白好得多。做题过程中遇到卡壳超过10分钟的题目我的建议是直接跳过不要恋战。笔试的时间成本极高为了一个5分的题目卡住20分钟后面的代码题可能就写不完这种战略性损失是得不偿失的。5.3 独家备考建议从“会做题”到“会答题”最后给你一个我从笔试辅导里沉淀出来的核心方法论不要只刷题要把答案“讲”出来。很多同学刷题的习惯是看完题目在脑子里过一遍思路然后看答案觉得“懂了”于是跳过。但笔试考察的是你能否在限定时间内、在没有参考的情况下、把脑子里的思路落实成可运行的代码。你只有动笔写、动手敲、对着自己的代码讲解每一步是为什么才能真正把知识内化成自己的东西。我建议你准备一个“错题本”——不是把错题抄一遍而是把每个错误背后暴露出的知识盲区记录下来。比如“这次没写对Promise.all是因为没搞清thenable原理”然后针对这个盲区去补对应的知识模块而不是单纯重做一遍原题。这样坚持两周你会明显感觉到自己做题时思路更清晰踩坑也更少。如果你时间紧张优先把这篇笔记里提到的考点逐个击破。它们是一个完整体系覆盖了这套卷子的绝大多数分值区间。把这些内容吃透你手里的就不只是一套题了而是一套可以迁移到任何大厂笔试里的通用能力。