刚面完小红书的职位趁热打铁把这次面试复盘写下来。这篇前端面经不打算做成流水账式的题目罗列而是把一个真实面试过程的考察逻辑、重点题目和事后反思都拆开讲清楚。无论你是准备投小红书还是想检验自己的前端水平这篇复盘应该都能给你一些有价值的参考。先说本人情况两年多前端经验技术栈以 React 为主平时会研究一些工程化和 Node 相关的东西整体属于业务写得比较多、原理看得不算特别深的那种。这次投的是社区方向的前端岗位面试整体给我的感受是重视项目细节、重视 React 原理、重视代码能力和边界场景的思考纯八股背诵的价值不大但基础不牢确实会被很快问穿。1. 面试前的准备思路1.1 简历投递与岗位匹配判断小红书的前端岗位分得比较细有社区、电商、广告、直播、基础架构等方向。我建议投递前先去了解目标部门的技术栈和业务形态。比如社区方向的信息流场景特别多列表渲染、性能优化、长列表虚拟化就是高频考点电商方向则更看重交易链路、状态管理和复杂表单处理。这次我是内推投的流程上会比海投快不少一般一周内会收到反馈。简历方面有几个关键点值得注意项目描述不要只写负责某某模块开发要写清楚技术方案、数据指标和你的思考列出自己熟悉的技术栈时要有对应的项目佐证而不是单纯堆砌名词有性能优化、工程化建设、复杂交互经验的往前提这是前端面试的加分项我简历里放了两个核心项目一个偏向 C 端信息流一个偏向 B 端可视化配置平台恰好覆盖了性能优化和工程化两个方向的考点面试官提问基本都围绕这两个项目展开。1.2 知识查漏补缺的优先级根据这次面试的体验我复盘后把前端面试的知识点分成了几个梯队按性价比从高到低排列第一梯队必须掌握JavaScript 核心原理事件循环、闭包、this、原型链、React 原理Fiber、Hooks、渲染调度、浏览器渲染原理、HTTP 缓存机制第二梯队大概率考察前端性能优化尤其是列表类场景、工程化配置Webpack/Vite、TS 类型体操基础、跨端方案了解第三梯队加分项Node.js 基础、微前端、可视化、AI 前端应用我这次把主要精力放在了第一梯队尤其是 React 原理和 JS 基础事实证明这个策略是对的面试中至少七成的问题都集中在这两块。2. 面试流程与考察侧重点拆解2.1 整体流程一览小红书的前端面试流程一般是技术一面同事面→ 技术二面Leader 面→ 技术三面交叉面或总监面→ HR 面。部分岗位可能还有笔试或加面整体节奏看部门招聘进度快的话一周走完慢的话可能拖到三周。下面是我整理的这几次面试的考察侧重点对比轮次侧重点典型问题形式深度要求技术一面基础能力 项目细节原理问答 手写题偏深度会追问到底技术二面系统设计 项目架构场景题 开放性设计偏广度考察权衡能力技术三面综合能力 团队匹配项目复盘 行为面试偏综合看思维方式HR 面软素质 稳定性离职原因 职业规划考察意愿和匹配度2.2 一面基础深度与代码能力技术一面通常是由未来同组的同事来面考察的内容更贴近实际开发。我遇到的情况是自我介绍结束后直接扔了一个 JavaScript 手写题然后快速进入 React 原理问答全程大概 50 分钟。一面给我的感觉是他们不太在意你背了多少答案而是看你拿到一个问题时能不能一层层往下拆解。比如问到 React 的渲染流程如果只答虚拟 DOM → Diff → 更新是不够的他们会追问Fiber 是在哪个阶段产生的任务是何时被调度的优先级是怎么处理的这时候如果只是背过概念而没看过源码很容易被问穿。2.3 二面与三面系统设计与综合考察二面开始就明显偏宏观了不再是单点知识考察而是给你一个场景让你完整地给出技术方案。比如一个信息流页面数据量特别大首屏加载慢你会怎么优化这类题目没有标准答案考察的是你能否从网络请求、数据缓存、渲染策略、用户体验等维度综合考虑。三面更看重你是不是一个有思考的工程师。当时被问到一个经典问题你在过往项目中做过的最有成就感的技术决策是什么这种问题没有标准答案关键是讲清楚做决策时的背景、约束条件、方案比较和最终效果最好能体现你的技术判断力和推动力。3. 核心面试题复盘与答题思路3.1 React 原理类问题出现频率最高小红书前端的主要技术栈是 React所以 React 相关的问题是绝对的大头。我遇到的题目大概覆盖了这几个方向问题一useEffect 的依赖数组是怎么判断变更的这个问题看起来基础但可以挖得很深。依赖数组的对比用的是Object.is来比较新旧值。但真正要理解的是每次渲染都会产生一个新的闭包useEffect 捕获的是本次渲染中的 props 和 state。如果你把函数写进依赖数组而函数没有用 useCallback 包裹那么每次渲染函数引用都变了就会导致 effect 反复执行。这里我踩过一个坑在 useEffect 里访问了某个对象属性作为依赖项但对象本身每次渲染都会重建导致死循环。实际开发中这种问题非常常见解决思路是依赖项尽量用原始值不要用对象字面量需要引用复杂对象的场景考虑使用 ref 或者 useMemo 来稳定引用。问题二React 合成事件是什么为什么需要它合成事件是 React 实现的一套跨浏览器的事件系统它在 document 或 root 容器上统一挂载监听通过事件委托来处理所有事件。好处有三个跨浏览器兼容性、性能优化统一管理监听器、以及事件池机制的支持。面试官追问的是合成事件和原生事件的区别以及 React 17 之后为什么把事件挂载从 document 改到了 root 容器上。后面这个问题我当时答得不够完整事后查资料才搞清楚挂到 document 上如果页面嵌套了多个 React 应用可能出现事件互相干扰的情况挂到 root 容器上可以让多个 React 应用各管各的也避免和第三方非 React 代码的冲突。问题三Fiber 解决了什么问题它是怎么实现可中断渲染的Fiber 架构的核心是把 React 的渲染工作拆成了可中断的任务单元。在老的 Stack 架构下一旦开始渲染就会同步执行到底如果组件树很深会阻塞浏览器主线程导致交互卡顿。Fiber 的解决方案是把大的渲染任务拆分成一个个 fiber 节点配合优先级调度让浏览器可以在必要的时候中断当前渲染去处理用户交互等更紧急的任务。我还被追问了 render 阶段和 commit 阶段的区别以及为什么 commit 阶段不可中断。这其实是 Fiber 架构设计的关键点render 阶段可以打断、可以重新开始因为这时候还没有真正操作 DOM但 commit 阶段一旦开始就要把所有变更一次性应用到真实 DOM 上如果中途断开界面就会处于不一致的状态。3.2 JavaScript 基础问题考察代码功底JS 基础部分面试官不会问太偏的语法题但会非常关注你对机制的理解深度。问题事件循环Event Loop是怎么工作的宏任务和微任务的顺序是怎样的这道题几乎是前端面试的必考题。回答思路是先解释浏览器是多线程的JS 是单线程的然后展开事件循环的机制脚本执行 → 执行微任务队列清空 → 更新渲染如果到时间 → 执行宏任务队列取一个 → 再执行微任务队列……如此循环。当时面试官继续追问了setTimeout和requestAnimationFrame的执行顺序差异。这两个的执行时机是有本质区别的setTimeout走的是事件循环的任务队列requestAnimationFrame走的是渲染流程的回调它会在浏览器下一次重绘之前执行因此更适合做动画逻辑。这个点基础不扎实的人很容易说反。问题深拷贝的实现以及为什么不能简单地 JSON.parse(JSON.stringify())这道题我遇到的是手写版要求实现深拷贝函数并处理循环引用。JSON 序列化的几个问题需要说清楚它会丢掉 undefined、函数、Symbol 类型的属性无法处理 Date、RegExp、Map、Set 等特殊对象而且如果对象里有循环引用会直接报错。手写深拷贝的参考实现是使用 WeakMap 来记录已经访问过的对象遇到循环引用时直接返回之前的拷贝。这里用 WeakMap 而不是 Map 的原因是WeakMap 的键是弱引用不会被垃圾回收机制拦住不影响原始对象的生命周期。问题如何实现一个请求并发限制的调度器这个题出现在一面手写环节要求实现一个函数控制一批 Promise 请求按最大并发数执行。核心思路是维护一个执行队列当前正在执行的请求数小于最大并发数时从队列里取出新任务执行某个请求完成后从队列里再取一个补上。我当时用递归的方式实现面试官又问了一句如果我动态往里面添加新任务你的实现能正确处理吗这个追问其实是在考察你是否考虑了并发边界的控制答案是任务结束后的回调里检查队列并取出下一个任务这样每次只要有任务完成就会立即补充不需要外部再触发。3.3 性能优化问题小红书必考小红书这类内容社区产品信息流就是生命线所以性能优化必考而且问得非常务实。问题长列表渲染性能优化你会怎么做这个问题的标准切入点很多但最好按照从数据到渲染的完整链路来讲数据层面按需请求分页加载列表项的数据尽量扁平化避免深层嵌套对象的访问开销渲染层面使用虚拟列表react-window 或自研只渲染可视区内的元素配合 overscan 预渲染几屏的数据减少白屏更新层面列表项使用 memo/React.memo 包裹避免父组件重渲染导致所有列表项跟着重渲染交互层面图片懒加载、骨架屏、滚动节流面试官对这个答案比较满意但继续追问了一个细节你提到虚拟列表如果每项的高度是不固定的你怎么处理这确实是个难点。解决方案一般有两种预测高度后动态修正或者在渲染完成后测量实际高度并缓存。关键是讲清楚**先估算、后修正**的思路以及缓存高度信息来避免重复测量。问题浏览器从输入 URL 到页面渲染的完整过程你在哪个环节能做前端优化这题看似是经典的URL 输入后发生了什么但小红书的面试官会把它包装成前端能主动做些什么。链路大概是DNS 解析使用 CDN 或 HTTPDNS 来减少解析耗时TCP 建立连接使用 HTTPS 可以减少握手次数TLS 1.3、开启连接复用请求发送合理设置缓存策略静态资源加 hash 版本号对于高频数据接口做前端缓存响应下载减小包体积代码分割、按需加载、tree-shaking解析与渲染CSS 放在 head、JS 通过 defer/async 加载、首屏不需要的组件做懒加载这个问题的套路是每个环节都有前端能施加影响的地方越早的环节优化收益越大。3.4 网络与工程化问题占比较轻但覆盖很全这些题出现的密度不如 React 和 JS但一旦出现不会太简单。HTTP 缓存机制讲一下强缓存和协商缓存什么区别这个属于基础必背题我这里不展开全部细节只强调一下面试里容易被追问的点强缓存返回的状态码是 200from memory cache / from disk cache协商缓存返回 304。Last-Modified 的精度是秒级如果文件在一秒内被修改多次它判断不了ETag 可以解决这个问题但每次请求都要做一次字符串对比性能上有一点损耗。实际项目中一般两者同时使用以 ETag 为主。Vite 和 Webpack 的核心区别是什么回答关键是开发环境和生产环境的定位差异。Webpack 在启动时要把整个应用的所有模块打包成 bundle再交给浏览器执行所以项目越大冷启动越慢。Vite 利用浏览器原生 ES Module 的能力开发环境不需要打包直接按需加载源码文件依赖部分用 esbuild 预构建所以启动速度非常快。但这里我也被追问了一个问题Vite 在生产环境为什么不用原生 ES Module 而是还是打包因为原生 ES Module 的加载是串行的大量细碎模块会产生大量 HTTP 请求生产环境更关心网络传输效率所以需要打包和压缩把模块合并成更少的请求。4. 手写题与算法题实录4.1 高频手写题汇总小红书面试的手写题不会特别偏基本都在常用工具函数、React 相关模拟、原生 API 实现这些范围内。我把遇到的和身边朋友遇到的汇总了一下题目考察点难度实现防抖和节流定时器、闭包、this 指向低手写深拷贝递归、循环引用、特殊对象处理中手写 Promise.all / Promise.racePromise 原理、异步控制中模拟实现 useState 或 useEffect闭包、渲染机制理解高实现并发请求限流调度器异步队列、递归中高数组扁平化 去重 排序常用 API 组合低实现一个简单的虚拟列表滚动计算、性能优化高其中模拟实现 useState是很值得展开说说的。它考察的空间很大核心思路是用一个模块级的变量来保存状态闭包让每个函数组件实例读取到自己的状态。但真正的难点在于React 内部还处理了 mount 和 update 两种状态分别对应不同的数据结构、Hook 的调用顺序约束、以及在不同优先级下更新是否可以被合并。手写题能写出基础版本就足够了关键是表达出你对状态是如何在函数组件中保存的这个核心问题的理解。4.2 算法题难度适中但边界要注意算法题的难度不高但边界条件很容易出错。我遇到的一道题是给定一个非空数组返回数组中重复次数最多的元素。暴力解法用哈希表统计次数然后找最大值O(n) 时间和 O(n) 空间。但不小心就会漏掉数组只有一种元素的边界情况或者统计结果的初始值设置不对导致答案错误。另一道类似的题目是字符串去重并保持原有顺序思路上用 Set 或者数组 includes 判断但需要确认字符可能是 Unicode 字符还是只要考虑 ASCII。这种边界问题面试官不会主动提醒你如果你能在代码里主动问清楚反而是加分的。算法题我的经验是先确认输入输出范围再讲思路最后写代码。写代码时把主要逻辑写好边界情况在注释里标注清楚别卡在一个小条件上浪费时间。5. 常见问题与复盘经验总结5.1 这次面试踩过的坑复盘这次面试我自己有几个比较明显的失误写出来给大家做个参考第一个坑项目细节被追问时记忆模糊。面试官问我在项目里做过的某个优化方案具体是怎么实现的我大概意思能讲清楚但一旦问到当时为什么没考虑另一种方案或者这个方案的效果数据是多少我就有点卡壳。这其实很致命因为面试官判断你是不是真正做过项目往往就看这些细节。我的改进办法是面试前把简历上的每个项目梳理一遍写出完整的技术方案、选型原因、踩过的坑、效果数据和可优化的空间做成一个文档随时翻看。第二个坑手写题上来就写没有先和面试官对齐思路。有一次写防抖函数我默认了立即执行的版本但面试官其实想要的是延后执行的版本等我写完他才补充了需求只好重新改。后来我学乖了每次先问清楚这里的防抖需要立即执行吗是否需要 cancel 功能确认完需求再动手反而显得自己更有工程素养。第三个坑遇到不会的问题硬编没有坦诚说不会。有一道关于 React 并发渲染的题目问得比较深我当时没完全理解却硬着头皮答了一堆面试官一听就知道我在绕概念。后来我意识到前端面试遇到不会的问题坦诚说这块我了解不深我的理解是……反而比强行回答要好因为至少展现了诚实和学习态度也可以把话题引导到自己熟悉的方向上。5.2 时间分配与备考建议根据这次面试体验我给准备前端面试的朋友一个时间分配参考假设你有一到两个月的准备期第一周基础检视。用几天时间把 JS 和 CSS 基础过一遍尤其是事件循环、闭包、原型链、作用域、懒加载、BFC 这些高频考点可以通过刷题来检验掌握程度。第二至三周React 原理深挖。这时候不能只看别人写的博客要自己读源码或者看源码解析视频把 Fiber、Hooks 调度、事件机制这几个核心板块彻底搞懂。可以先从简单的开始比如useState、useEffect源码实现。这里特别推荐通过调试源码的方式来验证自己的理解断点看一遍比看十篇分析文章都有效。第四周项目梳理 系统设计。把简历里的项目全部串成可以讲 5 分钟以上的完整故事准备几个系统设计题的答案框架比如性能优化、复杂状态管理、前端稳定性建设等方向。考前冲刺手写题与算法。主要刷高频手写题配合算法题保持手感同时复习一下计算机网络和浏览器相关的知识。以上安排不需要严格按照时间线来最重要的是针对自己的薄弱项做重点突破。我这次准备时间压缩到了三周左右因为平时就有读源码的习惯所以没有花太多时间在基础上主要精力都放在了项目梳理和系统设计上。5.3 关于小红书面试的总体感受说点个人体会。小红书的面试风格整体偏务实不太会问那种纯考记忆力的偏题怪题而是会围绕你简历里提到的技术点不断深挖。这既是好事也是坏事好事是只要你真正做过、研究过就能答得比临时背题的人好很多坏事是如果你简历上有水分很容易在追问中暴露出来。另外有一个比较突出的感受是小红书对 React 的重视程度确实很高如果平时只用 React 写业务、不关注内部实现建议提前补一补原理层面的知识。同时信息流这类业务形态决定了他们对性能优化的要求会比较严格准备的时候要多积累实际案例不要只讲理论。最后再分享一个实用小建议如果条件允许面试结束后主动向面试官要一个简短反馈问一下哪些方面需要加强。这次我虽然没有正式要反馈但在反问环节问了面试官团队最近在关注什么技术方向不仅了解了团队的技术侧重也意外获得了一些自己后续学习的思路。面试本身就是一个双向选择的过程不用只把自己放在被选择的位置上多问、多交流往往会有意料之外的收获。