小红书前端面试题刷了两个月却挂在第一轮这个标题我估计不少准备跳槽的人看到会心头一紧。这两年小红书的技术团队扩张很快前端岗位的面试风格也从早期的CTRLC/V考察慢慢转向了考察深度、工程化思维和业务理解的综合路子。很多人拿着leetcode题海战术去冲结果在JS基础题上就翻车了这真不是段子。这篇文章我不是来罗列题目的而是站在面试者和面试官两个角度把小红书2024年前端面试里最常出现的考题类型、背后的考察逻辑、以及回答时怎么答到点子上一次性讲清楚。如果你正在准备中小厂跳大厂、或者对大厂前端面试有好奇这篇内容值得你花10分钟读完少走弯路。1. 小红书前端面试的底牌它到底在考什么1.1 别被造火箭言论误导小红书考的是造好一辆车网上总有声音说大厂面试就是造火箭其实小红书不一样。它的前端技术栈覆盖面很广Web端、H5活动页、小程序、跨端框架、中后台系统还有大量的内容分发和电商交易场景。这些业务本质上要求前端工程师不能只会调接口和写样式而是要能解决真实业务场景下的性能问题、兼容性问题、工程化问题。所以面试题的底层逻辑是你之前写的代码在面临真实用户体量和复杂业务时能不能扛得住。比如人人都会写图片懒加载但面试官会继续追问懒加载触发时机怎么算准确滚动容器不是window怎么办图片加载失败怎么兜底这些一连串追问筛掉的正是那些只写过单页demo的简历型工程师。1.2 面试流程与各轮侧重点的裸考认知小红书的前端面试流程整体上是技术一面基础知识JS/TS→技术二面框架原理工程化→技术三面算法业务设计→HR面。有些部门会多一轮交叉面但核心考察模块基本固定。我根据这两年的面经和真实反馈整理了一张各轮次的侧重表格大家可以对照着查漏补缺面试轮次核心侧重点典型题目方向淘汰率高的原因一面基础面JS语言功底、CSS布局、浏览器机制this指向、事件循环、闭包、BFC、flex布局基础概念背得熟但追问场景就答不上来二面进阶面Vue/React原理、组件设计、性能优化Diff算法、响应式原理、hooks原理、首屏优化原理只停留在读过源码层次没有自己的实践三面算法设计手写题、算法、系统设计手写防抖节流、Promise、深拷贝、场景算法手写题细节漏洞多算法题缺乏优化意识HR面综合面项目真实性、软素质、稳定性项目难点、团队协作、离职原因项目不是自己做的细节对不上有一个特别多候选人踩坑的点一面笔试环节或者面试前会有在线编程测评部分候选人觉得简单就轻视了。实际上小红书题库里的编程题虽然题干简单但测试用例覆盖了大量边界条件。比如让你实现数组扁平化普通递归写法能过但深度达到10000层会导致栈溢出测试用例里还真有这种极端case直接挂掉。1.3 面试官视角三个信号决定你是否通过我在和集团内做前端面试官的朋友交流时大家有个共识候选人回答问题时面试官心里在快速评估三个信号。第一个信号概念的准确度。你说闭包是函数和它外部作用域的引用还是闭包能把变量存在函数里前者一听就是懂概念后者明显是半吊子。第二个信号原理的穿透力。讲事件循环能不能主动提到宏任务和微任务的执行顺序、requestAnimationFrame在哪个阶段触发这种深度决定了你是一面选手还是二面选手。第三个信号表达的颗粒度。回答你是怎么优化项目首屏的如果只说用了路由懒加载和cdn这是减分的能够说清楚首屏指标是多少、优化后提升了多少、懒加载后有没有白屏闪动、怎么解决白屏的这才是真正的加分项。所以这篇文章后面的内容我不会只给你标准答案我会告诉你回答到哪个层面才算真正过关。2. 基础题不是白给题JS、CSS、浏览器的高频陷阱2.1 this指向与箭头函数背结论的人一定会在这里露馅这可能是前端面试中出现频率最高的知识点没有之一。小红书的面试官很少直接问this有哪几种绑定规则而是给一个看似简单的代码让你说出输出结果比如const obj { name: xiaohongshu, getName: function() { return this.name; }, getNameArrow: () { return this.name; } }; console.log(obj.getName()); console.log(obj.getNameArrow()); console.log((obj.getName)()); console.log((obj.getNameArrow)()); console.log(obj.getName.call({ name: test }));很多人第一眼就能答出前两个第一个输出xiaohongshu第二个输出undefined因为箭头函数的this在定义时就绑定了外层作用域也就是全局对象。但到了第三个console.log((obj.getName)())就有不少人开始犹豫了——其实加不加括号结果一样仍然是xiaohongshu因为括号没有改变函数的调用方式。这道题真正想考察的是你是否理解this是在函数调用时动态确定的而不是在函数定义时确定的箭头函数除外。如果回答时能补一句new的优先级最高其次是显式绑定、隐式绑定默认绑定最低面试官就会点头继续深入追问。再配合一个高频追问箭头函数能不能作为构造函数答案是不能因为箭头函数没有自己的this也没有prototype属性所以new一个箭头函数会直接抛TypeError。这里有个很多人忽略的联系——箭头函数不能用arguments因为它不绑定自己的arguments对象只能依赖剩余参数。2.2 事件循环与宏任务微任务绝不只是背顺序事件循环的题小红书一般会出一个多段输出的组合题把setTimeout、Promise、async/await、process.nextTick如果是Node环境混在一起。但比输出结果更重要的是你能不能在白板上画出事件循环的完整过程。我建议的回答框架是这样同步代码先执行碰到异步API就挂到对应队列。微任务队列清空后才会取一个宏任务执行执行完宏任务后再次清空微任务队列。await右边的代码会先同步执行await后面的代码相当于Promise.then的回调进入微任务。requestAnimationFrame在浏览器渲染前执行它不在普通的宏任务队列里优先级介于微任务和渲染之间。面试官真正想看的不是你把结论背得多熟而是你能不能用这个模型推导出输出顺序。如果答错了问题往往出在对await的语义理解不够精确。比如async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test();输出是3、1、2还是1、3、2答案是3、1、2因为test()调用时test函数体内的同步代码console.log(1)会先执行遇到await才让出执行权。这个例子刷过题的人基本都会但面试官会换个写法把Promise.resolve()换成await null或者await new Promise(resolve setTimeout(resolve))很多人又懵了。注意await null同样会打断同步执行因为await后面的代码一律放微任务。2.3 CSS层叠上下文与BFC布局题里的隐形杀手CSS题在小红书的面试中占比不算高但一旦出了就是那种看起来很简单做起来全是坑的题。最常见的是Flex布局实现经典洗牌布局左侧固定、右侧自适应这题几乎人人会写。但面试官会追加如果不允许用flex你怎么实现等分布局有人答float百分比有人答grid但能提到calc(100% - 200px)加float的方案才算答全。另一个高频陷阱是BFC块级格式化上下文。面试官会问你如何触发BFC以及BFC能解决什么问题。标准答案的触发条件是overflow非visible、float、position的absolute/fixed、display的inline-block/flex/grid、overflow:hidden等。能解决的核心问题包括外边距折叠、清除浮动、阻止元素被浮动元素覆盖。回答时如果能配一个外边距折叠父子场景的项目案例会比机械背诵加分很多。还有一道出现在二面概率很高的题实现一个元素的水平垂直居中你能想到多少种方案我建议至少说出4种flex布局、绝对定位加transform、table-cell、grid。每说一种要主动补充它的适用边界——比如flex最简单但兼容旧系统时可能不OKtransform居中在元素内部有动画时会创建新的层叠上下文可能导致z-index异常。2.4 闭包的坑内存泄漏与经典循环陷阱闭包题的核心考点永远是循环打印这个题看起来简单到不能再简单但每年都有大量候选人翻车。for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); }标准答案是输出5个5原因是var没有块级作用域循环结束后i变成了5所有定时器回调共享同一个i。改成let就输出0到4。到这里所有人都知道但面试官会继续问你如果必须用var怎么修改代码让输出为0到4常见的三种解法用立即执行函数(IIFE)创建独立作用域传入当前的i。用setTimeout的第三个参数透传i。用Function.prototype.bind固定参数。我在考察候选人的时候会接着问这三种方法里哪种性能最好其实这三种性能差异可以忽略但能提到闭包本身带来的额外内存开销说明你真的思考过底层。另外关于闭包和内存泄漏的关系有候选人会跳出来说闭包会导致内存泄漏这种说法其实不准确。闭包本身不泄漏泄漏是因为闭包引用了本来应该被回收的DOM节点或者大对象而这个闭包又被全局变量持有。这个细节如果能在回答中主动澄清面试官对你的印象会提升不少。3. Vue3与React原理题源码级问题的三类固定套路3.1 Vue3响应式原理Proxy对比Object.defineProperty的高阶答法小红书的前端项目里Vue3已经是主流至少也是技术选型的热门方向。所以Vue3响应式原理几乎是必考题。大部分候选人都能说出Vue3用Proxy替代Object.defineProperty实现响应式但面试官真正想要的不仅是这句话而是两者的本质区别。我总结的回答框架你背下来之后要能用自己的话讲出来Object.defineProperty 是对对象的已有属性做拦截所以Vue2必须提前遍历对象的所有属性并且对新增属性无能为力需要Vue.set。Object.defineProperty 无法监听数组的索引变化和length变化所以Vue2需要改写数组的7个变更方法这是黑客式的hack不是语言层面的原生支持。Proxy 代理的是整个对象任何属性的读取、赋值、删除、遍历都能被拦截天然支持新增和删除属性。Proxy 还能拦截has、ownKeys、getPrototypeOf等操作这意味着for...in、Object.keys这些操作也能触发响应式。光讲到这里只算及格。加分项在于你能否讲出Proxy的缺陷比如Proxy无法直接代理基本类型所以Vue3对基本类型单独包了一层ref用value属性访问还有Proxy是惰性代理的只有真正访问到嵌套对象时才会递归代理下一个对象而不是一开始就深度递归这提升了初始化的性能。面试官往往会接着问Vue3的副作用调度机制也就是effect和trigger怎么协作的。这里你需要提到effect函数会注册副作用依赖收集时通过track把当前激活的effect收集到对应依赖集合里值变更时通过trigger触发副作用的执行。如果这段你也能答出来那么Vue3原理这块基本就稳了。3.2 虚拟DOM与Diff算法不要停在同级比较层面虚拟DOM和Diff算法是前端原理题的常青树。小红书面试官对这个地方的考察深度通常是为什么需要虚拟DOM、Vue3的Diff做了哪些优化、和React的Diff有什么异同。先说为什么需要虚拟DOM。很多人张口就是虚拟DOM性能比直接操作真实DOM快这话其实不准确虚拟DOM不一定更快它的核心价值是把视图描述变成纯数据对象从而可以用编程的方式高效地计算最小更新范围并跨平台渲染。Diff算法的经典优化至少要说清楚以下三点只做同层比较不做跨层级比较因为跨层级DOM移动在实际业务中极少发生。用key来标识可复用的节点在列表渲染时避免不必要的重建。Vue3在Vue2的双端比较基础上增加了最长递增子序列的优化策略用来最大程度地复用已存在节点、减少移动次数。Vue3的patchFlag是另一大考点。编译器会给动态绑定的节点打上类型标记比如TEXT、CLASS、STYLE、PROPS等这样在diff时可以直接根据标记只比对对应部分不用全量对比props。这个设计是Vue3比Vue2性能提升的关键之一。面试官特别喜欢把Vue和React放在一起对比问你了解两者的差异吗。我给一个比较有条理的框架React的diff是自顶向下的递归并且React引入了Fiber架构来支持任务中断Vue3的编译时优化更彻底模板是静态分析的所以可以直接收集动态节点信息而React的JSX在编译期能做优化的空间相对更小。3.3 Hooks原理与自定义Hook设计从使用到实现React的Hooks原理是小范围高频题尤其在移动端和小程序岗位面试时出现率很高。考察方向一般是为什么不能在条件语句里使用Hook、useState的初始值如何缓存、useEffect和useLayoutEffect的区别、自定义Hook如何抽离公共逻辑。关于为什么不能放在条件里这个要讲清楚React底层是用单向链表来存储Hook的状态和更新信息的每次渲染时React按照Hook的调用顺序从上到下依次读取对应节点。如果你在条件分支里调用了Hook那么某次渲染时链表的顺序和上一次不一致React取到的就是错误的状态数据直接导致状态错乱。这个回答能落地就比单纯说官方文档这样要求高一档。如果再补一句React官方后来也在考虑用Map来替代链式结构但目前还没有实现就更显深度了。关于useEffect和useLayoutEffect的区别我这里给一个容易记住的核心逻辑useLayoutEffect是同步执行、会阻塞浏览器渲染的useEffect是异步的、在渲染之后才执行的。实际项目中如果你需要测量DOM的宽高并同步调整布局一定要用useLayoutEffect不然会出现闪烁。这个点我曾经在真实项目的无限滚动列表里踩过坑也算是一个能讲的实战经验。自定义Hook是二面三面都容易出的设计题。考点不在于你写过多少个Hook而在于你能否抽离出跨组件复用的逻辑。比如一个通用的useRequest要处理loading、error、data、轮询、手动触发、竞态处理这些边界条件一个都不能少。最常见的坑是组件卸载后异步请求才回来导致setState在unmounted组件上触发警告。能主动提到用AbortController或者isCancelled标志位来取消请求这道设计题你就能拿高分。4. 手写代码题从防抖节流到Promise的完整通关思路4.1 防抖与节流基本功版本的进阶要求防抖和节流是小红书前端面试里最常出现的两道手写题没有之一。大部分候选人能写出基础版本但面试官会要求你考虑this绑定和参数透传还有取消当前等待执行的能力。这两个进阶点在实战项目里极其常见——比如用户在搜索框输入时发请求如果用户快速清空再输入上一次未执行的防抖应该立即取消而不是设置一个超时时间空等。一个更完整的防抖实现带取消和立即执行选项function debounce(fn, wait 300, immediate false) { let timer null; function debounced(...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); } debounced.cancel function() { if (timer) clearTimeout(timer); timer null; }; return debounced; }节流实现有两种主流方式时间戳版和定时器版。时间戳版能立即执行但停止触发后不会再执行定时器版会在停止触发后延迟执行最后一次。面试时如果能主动说出两者的差异并且在代码里体现比你闷头写完强得多。4.2 深拷贝最容易露怯的基础题之一深拷贝的题几乎每个候选人都会说我会但真正写出来能把边界情况覆盖全的十个里面不到两个。面试官出的常见要求是实现一个深拷贝函数要兼容对象、数组、Date、RegExp、循环引用。我给出一个能抵抗大部分追问的实现思路function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }这个实现里有两个关键点第一用WeakMap记住克隆过的对象解决循环引用为什么不用Map因为WeakMap是弱引用当原对象被垃圾回收时WeakMap里的对应键值对也会被回收不会造成内存泄漏这个细节面试官很爱听。第二用Reflect.ownKeys而不是Object.keys因为Reflect.ownKeys能拿到symbol类型的属性以及不可枚举属性这个细节也能说明你考虑得足够全面。4.3 Promise相关手写题Promise.all和Promise.race的细节Promise手写题在小红书的面试中出现频率很高尤其是Promise.all。这里最大的坑是Promise.all的快速失败语义到底是立即拒绝还是等待所有Promise完成后再拒绝。正确答案是立即拒绝一旦有一个Promise变成rejected整个Promise.all就rejected不会等其余Promise出结果。Promise.all实现代码Promise.myAll function(promises) { return new Promise((resolve, reject) { if (!Array.isArray(promises)) { reject(new TypeError(promises must be an array)); return; } const length promises.length; const results new Array(length); let completed 0; if (length 0) { resolve(results); return; } promises.forEach((promise, index) { Promise.resolve(promise).then( value { results[index] value; completed 1; if (completed length) resolve(results); }, error reject(error) ); }); }); };这里面有个重要细节用Promise.resolve(promise)包一层是为了兼容promises数组里可能出现非Promise值。如果一开始就假定所有项都是Promise遇到普通值时整个实现就会出错。还有results的位置要按下标填入不能用push否则异步返回顺序会乱掉。4.4 高阶版本手写一个带并发限制的请求调度器这是小红书面试中二面和三面都有可能出现的一道综合题考察的不只是Promise还有异步控制流的理解。题目大概是实现一个asyncPool限制并发数为2依次执行一组异步任务并保证返回结果顺序与任务顺序一致。实现思路是维护一个执行队列只要有任务且当前并发数未满就启动新任务。等某个任务完成后继续从队列里取下一个任务。最终用Promise.all把所有任务的结果汇总。这道题的真正难点在于拿到每个任务完成时对应的index保证结果顺序不混乱。很多候选人能实现并发控制但结果的顺序是乱的。解法是在启动每个任务时就把当前的下标传进去等完成后再填入对应位置。如果你能写出来并且主动说明这个方案可以用于控制前端批量上传图片时的并发数避免一次上传过多导致服务端压力过大那这道题基本就稳了。面试官会觉得你不是在背题而是真的在工程里用过。5. 工程化与性能优化内容社区场景下的加分项5.1 首屏加载优化不要只说懒加载这三个字小红书的内容分发场景对首屏加载的要求很高因为用户是带着刷内容的预期来的首屏慢一秒用户流失率就明显上升。所以面试官问性能优化几乎必然围绕首屏。我建议的答题结构是分步骤展开先确立指标首屏时间(FCP)用了多少、LCP是多少、有没有性能监控平台能看到这些指标。如果在项目里装过Web Vitals或者Sentry要主动提出来。网络层面HTTP缓存策略、CDN加速、HTTP/2多路复用、资源预加载preload/preconnect。代码层面路由懒加载、组件的动态导入、骨架屏、图片懒加载、图片格式转换WebP/AVIF、组件库按需引入。构建层面代码分割splitChunks、tree-shaking、压缩JS/CSS、开启Gzip或Brotli压缩。有一个能体现工程能力的点如果某个页面很重你会怎么拆包。可以详细说说webpack或vite的manualChunks配置比如把vue、vue-router、pinia这类的稳定依赖打进单独的vendor包把业务组件按路由拆让每个页面只加载自己需要的代码。拆完之后还要确认改动是否影响了构建缓存的有效性这时候合理的chunkhash命名就非常重要。5.2 图片加载的极限优化小红书场景的必答题小红书的内容几乎全是图片流所以图片优化相关的问题出现概率极高。面试官大概率会问你们项目里的图片是怎么做懒加载的图片加载失败你怎么处理你如果只答用了v-lazy那这道题基本就送了。进阶回答要点懒加载的实现原理用IntersectionObserver监听图片是否进入视口进入后再替换src。如果用scroll事件监听要注意防抖并计算getBoundingClientRect。占位图处理为了避免图片进入视口时才加载导致的白屏闪烁要用一个极小的本地占位图一般是base64或用CSS背景色先占住位置比例保持和原图一致。失败重试策略通过onerror事件捕获尝试替换CDN域名或者降级到原图地址重试超过一定次数比如3次就展示一个默认失败图片。渐进式加载小红书Web端曾经用过类似先加载模糊缩略图再加载高清图的策略。实现方式有两种一种是用带blur滤镜的canvas图做背景另一种是用srcset配合不同分辨率的图片让浏览器根据视口和网络环境自动选择。能把这些细节讲清楚的人面试官会认为你在真实的高流量图片场景中实战过而不是只会背概念。5.3 前端监控面试中的潜在加分项监控类问题不是必考题但一旦面试官把你的项目往深了问很容易引到线上出了问题你怎么知道这个话题。小红书的前端面试对于候选人的监控意识相当看重因为像内容社区这种高并发的Web应用任何前端异常都可能影响大量用户体验。需要掌握的核心点错误监控window.onerror捕获JS运行时错误unhandledrejection捕获未处理的Promise异常结合sourcemap解析压缩代码的报错位置。性能监控用PerformanceObserver监听LargestContentfulPaint、FirstInputDelay、CumulativeLayoutShift这几个核心Web Vitals指标。埋点曝光埋点和点击埋点怎么设计怎么做到不侵入业务代码可以封装成一个通用的追踪函数页面组件挂载时自动上报。稳定性监控上报本身不能影响性能一般要做成异步的、批量上报、失败降级。这个点如果在面试中主动提出来即使项目里只是做了一个非常简单的前端错误收集工具面试官也会给你加分因为这说明你有线上意识而不是开发完就不管了。6. 算法题贴近业务场景的考察方式与应对策略6.1 小红书算法题的画像不是纯背模板很多候选人以为大厂算法题就是leetcode hard结果发现小红书出的题有些不按常理出牌。它更倾向于出与业务场景强相关的题或者用业务故事包装的普通数据结构题。举个例子常见的题目有实时统计一段时间内的热门话题Top10或者给定一个用户发布的内容流找出点赞数最高的连续子区间。这类题的底层还是堆、滑动窗口、前缀和这些经典算法但因为包装了业务场景能考察候选人的建模能力——你能不能把模糊的需求抽象成清晰的数据结构和算法模型。6.2 高频算法题型与答题模板根据近期的面经小红书前端面试的算法题集中在以下6类字符串/数组处理翻转字符串里的单词、最长不含重复字符的子串、数组扁平化。链表判断链表是否有环、合并两个有序链表、反转链表。二叉树层序遍历、最近公共祖先、二叉树的最大深度。动态规划最大子序和、爬楼梯、不同路径。这三道是出现率最高的DP入门题。排序与TopK手写快排、求数组第K大元素。设计类实现一个LRU缓存、实现一个带过期时间的localStorage封装。我特别想强调LRU缓存这道题。前端面试出现频率极高因为它组合了哈希表和双向链表的知识。实现时如果只用一个Map其实也能做到O(1)复杂度的get和put因为Map的keys()迭代顺序就是插入顺序。但更标准的做法是手写一个双向链表每次访问时把节点移动到头部超出容量时删除尾部节点。这道题如果能写出来面试官会觉得你数据结构基础扎实。6.3 回答算法题时的现场表达技巧面试算法题不只是看最终代码更看你的解题过程。建议遵循以下顺序先确认需求和边界条件数组为空时返回什么字符串有前后空格要不要处理这些一定要先问清楚面试官不会觉得你啰嗦反而会觉得你严谨。说思路再动手先用一两句话说清楚解法比如我打算先用双指针left指向字符串开头right指向末尾逐位交换时间复杂度O(n)空间复杂度O(1)。说完思路再开始写代码会让面试官觉得你有结构化思维。主动分析复杂度写完代码后主动说出时间复杂度和空间复杂度不要等面试官来问。这几乎是面试中必须养成的肌肉记忆。跑一个测试用例用最简单的例子手动走一遍代码这一步在面试里经常被忽略但走一遍既能证明你代码的正确性也能自己发现隐藏bug。我见过不少候选人思路完全正确但因为没等面试官反应就直接写代码边写边改最终以乱糟糟的卷面收场。其实面试官更看重的是你把一个模糊问题拆解成精确逻辑的能力不是你打代码的速度。7. 项目深挖和HR面简历怎么讲才不会翻车7.1 项目的STARL拆解法给面试官一个追问剧本项目深挖通常在三面出现面试官会直接打开你的简历从最近的项目开始问。很多人挂在这里不是项目不够好而是讲法不对——要么像流水账要么只重复简历上已有的内容。我推荐的讲法是STARLSituation项目背景、Task你的职责和目标、Action你具体做了什么、Result结果和量化指标、Learning你踩过的坑和总结。举个例子简历上写负责首页性能优化面试官问你怎么做的优化你不能只说加了图片懒加载而应该说Situation首页图片资源过多LCP达到4.2s在移动端用户流失严重。Task目标是两周内把LCP降到2.5s以内。Action做了四件事——图片改用WebP、用IntersectionObserver实现懒加载、首屏接口从串行改成并行、把第三方字体改为preload预加载。ResultLCP从4.2s降到1.9s首屏跳出率下降约12%。Learning过程中踩了一个坑CDN没有配置正确的Cache-Control导致升级了图片格式之后用户端还是拿到旧缓存后来统一加了版本号参数才解决。这样一段话讲下来面试官基本没有继续追问的必要了因为你已经把最关键的信息全给了。而且里面有几个可以深挖的具体点面试官挑任何一个问你都能往下接。7.2 简历上的每个字都要能扛住三连问写简历最常见的误区是堆砌技术名词。比如熟练使用Vue3、Vite、Webpack、TypeScript、Pinia做过可视化大屏面试官看到这种描述很可能直接选两个词深挖你Vite和Webpack的差异是什么做过可视化大屏用的什么方案所以我的建议是简历上每一个技术点你都要准备三个层次的答案这个技术是什么一句话定义你把它用在了哪个具体场景项目结合它在你的场景里有什么坑或者优化点深度总结比如你写了Webpack你要能说清楚Webpack的loader和plugin的区别、你在项目里有没有自己写过loader或plugin、Tree-shaking在哪个场景下失效过比如CommonJS模块就无法tree-shake、怎么排查构建体积的。如果这些问题任何一个你答不上来面试官大概率会判定这个点是你听说但没用过整份简历的可信度都会打折扣。7.3 HR面的隐形考题稳定性与自驱力小红书的HR面不是走过场会重点考察你的稳定性和自驱力。稳定性主要判断你入职后能否长期待住所以要准备好离职原因的回答框架不要在HR面吐槽前东家而是从个人发展的角度说明比如希望在更大的技术平台挑战更复杂的业务场景。自驱力的考察方式通常是你最近在学习什么新技术业余时间怎么安排。技术面表现不错但HR面话术如果太敷衍也有可能被压薪资或者延后offer。这里面有个小技巧平时真的要跟一个开源项目或者维护一个技术博客回答HR问题时能拿出具体的东西比空谈我热爱技术有说服力得多。另外HR可能会问如果给你一个需求你打算怎么推动落地。这属于工作方法题要体现出你不只写代码还能理解业务优先级、推进跨团队协作。哪怕你只说先拆解需求、评估技术方案、和后端确认接口、排期提测也比说我按需求做就行强出一个档次。7.4 简历中技术栈描述的要诀会做减法的人更高级我在看简历时经常发现候选人喜欢把所有接触过的技术全部列上结果看起来像在堆砌。真正高级的简历技术栈部分是非常克制的只写自己能深度展开的三四个。比如你可以这样写核心Vue3 / TypeScript / Vite / Pinia框架原理Vue3响应式机制、虚拟DOM与diff算法、JSBridge原理工程化Webpack构建优化、前端监控、自动化测试Vitest加分Node.js写过性能分析脚本、小程序跨端方案Taro/uni-app每个点都要能往下聊至少五句话。如果你某一块还达不到这个标准就不要写。面试是木桶效应的反面一个特别能打的长板比十个平均水平的短板更有用。8. 面试准备的最后环节心态与临场应变8.1 不要追求完美回答追求结构化推进很多人在面试现场会卡壳卡壳是因为想一次性答出完美的答案。但面试官其实非常包容临时卡顿他们更在意的是你卡顿之后怎么推进。哪怕一开始答得不是特别完整只要思路清晰能逐步把答案补充完整整体的观感依然很好。所以我在准备面试时会刻意训练先说框架再填细节的表达方式。比如被问讲一下浏览器从输入URL到页面渲染的过程我会先列出主干DNS解析、TCP连接、HTTP请求、服务端响应、浏览器解析渲染、资源加载与执行。然后再逐步展开每个节点。这样即使某个细节记忆模糊也不会影响整体结构的完整性。8.2 坦诚你不知道的东西比瞎编容易得分面试中最大的雷区是不懂装懂。宁可说这个点我没有深入过但我可以尝试分析一下也不要硬着头皮编一个看似合理的解释。面试官大多数有十年以上的技术判断力你编到第二个细节就露馅了而且一旦穿帮之前答得好的题目都会被连坐怀疑。小红书面试官在面经中的高频话术是没了解过没关系面试的核心是选出基础扎实、有潜力的人不是选出百科全书。主动承认盲区反而可能是展示学习能力的机会——你可以顺势说我对这个点确实不了解但如果让我上手这个方向我会从xxx文档开始看先搭一个最小demo验证。这句话的信息量往往比错误答案大得多。8.3 面完一定要复盘把答得不好的题目变成下一次的起点我见过太多人面完就等着结果既不记录也不复盘。其实不管过没过面试过程本身就是一次最真实的技术体检。每次面试结束后用15分钟把没答利索的题目记下来整理成文档下一次面试前把之前的错题重新过一遍。几场面试下来你的知识盲区会越来越清晰通过率也会稳定提升。最后说点个人体会。小红书这种体量的公司前端面试并不追求极致刁钻它更像是一次深度的技术对谈。你能不能被选上取决于你是否具备扎实的基础功底、清晰的业务理解能力和成熟的工程思维。现在开始准备把上面的每个点都过一遍你完全可以去试一次。祝每一位认真准备的人都能拿到心仪的offer。 小红书前端面试高频考点全解析：从JS原理到工程化实战
小红书前端面试题刷了两个月却挂在第一轮这个标题我估计不少准备跳槽的人看到会心头一紧。这两年小红书的技术团队扩张很快前端岗位的面试风格也从早期的CTRLC/V考察慢慢转向了考察深度、工程化思维和业务理解的综合路子。很多人拿着leetcode题海战术去冲结果在JS基础题上就翻车了这真不是段子。这篇文章我不是来罗列题目的而是站在面试者和面试官两个角度把小红书2024年前端面试里最常出现的考题类型、背后的考察逻辑、以及回答时怎么答到点子上一次性讲清楚。如果你正在准备中小厂跳大厂、或者对大厂前端面试有好奇这篇内容值得你花10分钟读完少走弯路。1. 小红书前端面试的底牌它到底在考什么1.1 别被造火箭言论误导小红书考的是造好一辆车网上总有声音说大厂面试就是造火箭其实小红书不一样。它的前端技术栈覆盖面很广Web端、H5活动页、小程序、跨端框架、中后台系统还有大量的内容分发和电商交易场景。这些业务本质上要求前端工程师不能只会调接口和写样式而是要能解决真实业务场景下的性能问题、兼容性问题、工程化问题。所以面试题的底层逻辑是你之前写的代码在面临真实用户体量和复杂业务时能不能扛得住。比如人人都会写图片懒加载但面试官会继续追问懒加载触发时机怎么算准确滚动容器不是window怎么办图片加载失败怎么兜底这些一连串追问筛掉的正是那些只写过单页demo的简历型工程师。1.2 面试流程与各轮侧重点的裸考认知小红书的前端面试流程整体上是技术一面基础知识JS/TS→技术二面框架原理工程化→技术三面算法业务设计→HR面。有些部门会多一轮交叉面但核心考察模块基本固定。我根据这两年的面经和真实反馈整理了一张各轮次的侧重表格大家可以对照着查漏补缺面试轮次核心侧重点典型题目方向淘汰率高的原因一面基础面JS语言功底、CSS布局、浏览器机制this指向、事件循环、闭包、BFC、flex布局基础概念背得熟但追问场景就答不上来二面进阶面Vue/React原理、组件设计、性能优化Diff算法、响应式原理、hooks原理、首屏优化原理只停留在读过源码层次没有自己的实践三面算法设计手写题、算法、系统设计手写防抖节流、Promise、深拷贝、场景算法手写题细节漏洞多算法题缺乏优化意识HR面综合面项目真实性、软素质、稳定性项目难点、团队协作、离职原因项目不是自己做的细节对不上有一个特别多候选人踩坑的点一面笔试环节或者面试前会有在线编程测评部分候选人觉得简单就轻视了。实际上小红书题库里的编程题虽然题干简单但测试用例覆盖了大量边界条件。比如让你实现数组扁平化普通递归写法能过但深度达到10000层会导致栈溢出测试用例里还真有这种极端case直接挂掉。1.3 面试官视角三个信号决定你是否通过我在和集团内做前端面试官的朋友交流时大家有个共识候选人回答问题时面试官心里在快速评估三个信号。第一个信号概念的准确度。你说闭包是函数和它外部作用域的引用还是闭包能把变量存在函数里前者一听就是懂概念后者明显是半吊子。第二个信号原理的穿透力。讲事件循环能不能主动提到宏任务和微任务的执行顺序、requestAnimationFrame在哪个阶段触发这种深度决定了你是一面选手还是二面选手。第三个信号表达的颗粒度。回答你是怎么优化项目首屏的如果只说用了路由懒加载和cdn这是减分的能够说清楚首屏指标是多少、优化后提升了多少、懒加载后有没有白屏闪动、怎么解决白屏的这才是真正的加分项。所以这篇文章后面的内容我不会只给你标准答案我会告诉你回答到哪个层面才算真正过关。2. 基础题不是白给题JS、CSS、浏览器的高频陷阱2.1 this指向与箭头函数背结论的人一定会在这里露馅这可能是前端面试中出现频率最高的知识点没有之一。小红书的面试官很少直接问this有哪几种绑定规则而是给一个看似简单的代码让你说出输出结果比如const obj { name: xiaohongshu, getName: function() { return this.name; }, getNameArrow: () { return this.name; } }; console.log(obj.getName()); console.log(obj.getNameArrow()); console.log((obj.getName)()); console.log((obj.getNameArrow)()); console.log(obj.getName.call({ name: test }));很多人第一眼就能答出前两个第一个输出xiaohongshu第二个输出undefined因为箭头函数的this在定义时就绑定了外层作用域也就是全局对象。但到了第三个console.log((obj.getName)())就有不少人开始犹豫了——其实加不加括号结果一样仍然是xiaohongshu因为括号没有改变函数的调用方式。这道题真正想考察的是你是否理解this是在函数调用时动态确定的而不是在函数定义时确定的箭头函数除外。如果回答时能补一句new的优先级最高其次是显式绑定、隐式绑定默认绑定最低面试官就会点头继续深入追问。再配合一个高频追问箭头函数能不能作为构造函数答案是不能因为箭头函数没有自己的this也没有prototype属性所以new一个箭头函数会直接抛TypeError。这里有个很多人忽略的联系——箭头函数不能用arguments因为它不绑定自己的arguments对象只能依赖剩余参数。2.2 事件循环与宏任务微任务绝不只是背顺序事件循环的题小红书一般会出一个多段输出的组合题把setTimeout、Promise、async/await、process.nextTick如果是Node环境混在一起。但比输出结果更重要的是你能不能在白板上画出事件循环的完整过程。我建议的回答框架是这样同步代码先执行碰到异步API就挂到对应队列。微任务队列清空后才会取一个宏任务执行执行完宏任务后再次清空微任务队列。await右边的代码会先同步执行await后面的代码相当于Promise.then的回调进入微任务。requestAnimationFrame在浏览器渲染前执行它不在普通的宏任务队列里优先级介于微任务和渲染之间。面试官真正想看的不是你把结论背得多熟而是你能不能用这个模型推导出输出顺序。如果答错了问题往往出在对await的语义理解不够精确。比如async function test() { console.log(1); await Promise.resolve(); console.log(2); } console.log(3); test();输出是3、1、2还是1、3、2答案是3、1、2因为test()调用时test函数体内的同步代码console.log(1)会先执行遇到await才让出执行权。这个例子刷过题的人基本都会但面试官会换个写法把Promise.resolve()换成await null或者await new Promise(resolve setTimeout(resolve))很多人又懵了。注意await null同样会打断同步执行因为await后面的代码一律放微任务。2.3 CSS层叠上下文与BFC布局题里的隐形杀手CSS题在小红书的面试中占比不算高但一旦出了就是那种看起来很简单做起来全是坑的题。最常见的是Flex布局实现经典洗牌布局左侧固定、右侧自适应这题几乎人人会写。但面试官会追加如果不允许用flex你怎么实现等分布局有人答float百分比有人答grid但能提到calc(100% - 200px)加float的方案才算答全。另一个高频陷阱是BFC块级格式化上下文。面试官会问你如何触发BFC以及BFC能解决什么问题。标准答案的触发条件是overflow非visible、float、position的absolute/fixed、display的inline-block/flex/grid、overflow:hidden等。能解决的核心问题包括外边距折叠、清除浮动、阻止元素被浮动元素覆盖。回答时如果能配一个外边距折叠父子场景的项目案例会比机械背诵加分很多。还有一道出现在二面概率很高的题实现一个元素的水平垂直居中你能想到多少种方案我建议至少说出4种flex布局、绝对定位加transform、table-cell、grid。每说一种要主动补充它的适用边界——比如flex最简单但兼容旧系统时可能不OKtransform居中在元素内部有动画时会创建新的层叠上下文可能导致z-index异常。2.4 闭包的坑内存泄漏与经典循环陷阱闭包题的核心考点永远是循环打印这个题看起来简单到不能再简单但每年都有大量候选人翻车。for (var i 0; i 5; i) { setTimeout(() console.log(i), 100); }标准答案是输出5个5原因是var没有块级作用域循环结束后i变成了5所有定时器回调共享同一个i。改成let就输出0到4。到这里所有人都知道但面试官会继续问你如果必须用var怎么修改代码让输出为0到4常见的三种解法用立即执行函数(IIFE)创建独立作用域传入当前的i。用setTimeout的第三个参数透传i。用Function.prototype.bind固定参数。我在考察候选人的时候会接着问这三种方法里哪种性能最好其实这三种性能差异可以忽略但能提到闭包本身带来的额外内存开销说明你真的思考过底层。另外关于闭包和内存泄漏的关系有候选人会跳出来说闭包会导致内存泄漏这种说法其实不准确。闭包本身不泄漏泄漏是因为闭包引用了本来应该被回收的DOM节点或者大对象而这个闭包又被全局变量持有。这个细节如果能在回答中主动澄清面试官对你的印象会提升不少。3. Vue3与React原理题源码级问题的三类固定套路3.1 Vue3响应式原理Proxy对比Object.defineProperty的高阶答法小红书的前端项目里Vue3已经是主流至少也是技术选型的热门方向。所以Vue3响应式原理几乎是必考题。大部分候选人都能说出Vue3用Proxy替代Object.defineProperty实现响应式但面试官真正想要的不仅是这句话而是两者的本质区别。我总结的回答框架你背下来之后要能用自己的话讲出来Object.defineProperty 是对对象的已有属性做拦截所以Vue2必须提前遍历对象的所有属性并且对新增属性无能为力需要Vue.set。Object.defineProperty 无法监听数组的索引变化和length变化所以Vue2需要改写数组的7个变更方法这是黑客式的hack不是语言层面的原生支持。Proxy 代理的是整个对象任何属性的读取、赋值、删除、遍历都能被拦截天然支持新增和删除属性。Proxy 还能拦截has、ownKeys、getPrototypeOf等操作这意味着for...in、Object.keys这些操作也能触发响应式。光讲到这里只算及格。加分项在于你能否讲出Proxy的缺陷比如Proxy无法直接代理基本类型所以Vue3对基本类型单独包了一层ref用value属性访问还有Proxy是惰性代理的只有真正访问到嵌套对象时才会递归代理下一个对象而不是一开始就深度递归这提升了初始化的性能。面试官往往会接着问Vue3的副作用调度机制也就是effect和trigger怎么协作的。这里你需要提到effect函数会注册副作用依赖收集时通过track把当前激活的effect收集到对应依赖集合里值变更时通过trigger触发副作用的执行。如果这段你也能答出来那么Vue3原理这块基本就稳了。3.2 虚拟DOM与Diff算法不要停在同级比较层面虚拟DOM和Diff算法是前端原理题的常青树。小红书面试官对这个地方的考察深度通常是为什么需要虚拟DOM、Vue3的Diff做了哪些优化、和React的Diff有什么异同。先说为什么需要虚拟DOM。很多人张口就是虚拟DOM性能比直接操作真实DOM快这话其实不准确虚拟DOM不一定更快它的核心价值是把视图描述变成纯数据对象从而可以用编程的方式高效地计算最小更新范围并跨平台渲染。Diff算法的经典优化至少要说清楚以下三点只做同层比较不做跨层级比较因为跨层级DOM移动在实际业务中极少发生。用key来标识可复用的节点在列表渲染时避免不必要的重建。Vue3在Vue2的双端比较基础上增加了最长递增子序列的优化策略用来最大程度地复用已存在节点、减少移动次数。Vue3的patchFlag是另一大考点。编译器会给动态绑定的节点打上类型标记比如TEXT、CLASS、STYLE、PROPS等这样在diff时可以直接根据标记只比对对应部分不用全量对比props。这个设计是Vue3比Vue2性能提升的关键之一。面试官特别喜欢把Vue和React放在一起对比问你了解两者的差异吗。我给一个比较有条理的框架React的diff是自顶向下的递归并且React引入了Fiber架构来支持任务中断Vue3的编译时优化更彻底模板是静态分析的所以可以直接收集动态节点信息而React的JSX在编译期能做优化的空间相对更小。3.3 Hooks原理与自定义Hook设计从使用到实现React的Hooks原理是小范围高频题尤其在移动端和小程序岗位面试时出现率很高。考察方向一般是为什么不能在条件语句里使用Hook、useState的初始值如何缓存、useEffect和useLayoutEffect的区别、自定义Hook如何抽离公共逻辑。关于为什么不能放在条件里这个要讲清楚React底层是用单向链表来存储Hook的状态和更新信息的每次渲染时React按照Hook的调用顺序从上到下依次读取对应节点。如果你在条件分支里调用了Hook那么某次渲染时链表的顺序和上一次不一致React取到的就是错误的状态数据直接导致状态错乱。这个回答能落地就比单纯说官方文档这样要求高一档。如果再补一句React官方后来也在考虑用Map来替代链式结构但目前还没有实现就更显深度了。关于useEffect和useLayoutEffect的区别我这里给一个容易记住的核心逻辑useLayoutEffect是同步执行、会阻塞浏览器渲染的useEffect是异步的、在渲染之后才执行的。实际项目中如果你需要测量DOM的宽高并同步调整布局一定要用useLayoutEffect不然会出现闪烁。这个点我曾经在真实项目的无限滚动列表里踩过坑也算是一个能讲的实战经验。自定义Hook是二面三面都容易出的设计题。考点不在于你写过多少个Hook而在于你能否抽离出跨组件复用的逻辑。比如一个通用的useRequest要处理loading、error、data、轮询、手动触发、竞态处理这些边界条件一个都不能少。最常见的坑是组件卸载后异步请求才回来导致setState在unmounted组件上触发警告。能主动提到用AbortController或者isCancelled标志位来取消请求这道设计题你就能拿高分。4. 手写代码题从防抖节流到Promise的完整通关思路4.1 防抖与节流基本功版本的进阶要求防抖和节流是小红书前端面试里最常出现的两道手写题没有之一。大部分候选人能写出基础版本但面试官会要求你考虑this绑定和参数透传还有取消当前等待执行的能力。这两个进阶点在实战项目里极其常见——比如用户在搜索框输入时发请求如果用户快速清空再输入上一次未执行的防抖应该立即取消而不是设置一个超时时间空等。一个更完整的防抖实现带取消和立即执行选项function debounce(fn, wait 300, immediate false) { let timer null; function debounced(...args) { const callNow immediate !timer; if (timer) clearTimeout(timer); timer setTimeout(() { timer null; if (!immediate) fn.apply(this, args); }, wait); if (callNow) fn.apply(this, args); } debounced.cancel function() { if (timer) clearTimeout(timer); timer null; }; return debounced; }节流实现有两种主流方式时间戳版和定时器版。时间戳版能立即执行但停止触发后不会再执行定时器版会在停止触发后延迟执行最后一次。面试时如果能主动说出两者的差异并且在代码里体现比你闷头写完强得多。4.2 深拷贝最容易露怯的基础题之一深拷贝的题几乎每个候选人都会说我会但真正写出来能把边界情况覆盖全的十个里面不到两个。面试官出的常见要求是实现一个深拷贝函数要兼容对象、数组、Date、RegExp、循环引用。我给出一个能抵抗大部分追问的实现思路function deepClone(target, map new WeakMap()) { if (target null || typeof target ! object) return target; if (target instanceof Date) return new Date(target); if (target instanceof RegExp) return new RegExp(target.source, target.flags); if (map.has(target)) return map.get(target); const clone Array.isArray(target) ? [] : {}; map.set(target, clone); Reflect.ownKeys(target).forEach(key { clone[key] deepClone(target[key], map); }); return clone; }这个实现里有两个关键点第一用WeakMap记住克隆过的对象解决循环引用为什么不用Map因为WeakMap是弱引用当原对象被垃圾回收时WeakMap里的对应键值对也会被回收不会造成内存泄漏这个细节面试官很爱听。第二用Reflect.ownKeys而不是Object.keys因为Reflect.ownKeys能拿到symbol类型的属性以及不可枚举属性这个细节也能说明你考虑得足够全面。4.3 Promise相关手写题Promise.all和Promise.race的细节Promise手写题在小红书的面试中出现频率很高尤其是Promise.all。这里最大的坑是Promise.all的快速失败语义到底是立即拒绝还是等待所有Promise完成后再拒绝。正确答案是立即拒绝一旦有一个Promise变成rejected整个Promise.all就rejected不会等其余Promise出结果。Promise.all实现代码Promise.myAll function(promises) { return new Promise((resolve, reject) { if (!Array.isArray(promises)) { reject(new TypeError(promises must be an array)); return; } const length promises.length; const results new Array(length); let completed 0; if (length 0) { resolve(results); return; } promises.forEach((promise, index) { Promise.resolve(promise).then( value { results[index] value; completed 1; if (completed length) resolve(results); }, error reject(error) ); }); }); };这里面有个重要细节用Promise.resolve(promise)包一层是为了兼容promises数组里可能出现非Promise值。如果一开始就假定所有项都是Promise遇到普通值时整个实现就会出错。还有results的位置要按下标填入不能用push否则异步返回顺序会乱掉。4.4 高阶版本手写一个带并发限制的请求调度器这是小红书面试中二面和三面都有可能出现的一道综合题考察的不只是Promise还有异步控制流的理解。题目大概是实现一个asyncPool限制并发数为2依次执行一组异步任务并保证返回结果顺序与任务顺序一致。实现思路是维护一个执行队列只要有任务且当前并发数未满就启动新任务。等某个任务完成后继续从队列里取下一个任务。最终用Promise.all把所有任务的结果汇总。这道题的真正难点在于拿到每个任务完成时对应的index保证结果顺序不混乱。很多候选人能实现并发控制但结果的顺序是乱的。解法是在启动每个任务时就把当前的下标传进去等完成后再填入对应位置。如果你能写出来并且主动说明这个方案可以用于控制前端批量上传图片时的并发数避免一次上传过多导致服务端压力过大那这道题基本就稳了。面试官会觉得你不是在背题而是真的在工程里用过。5. 工程化与性能优化内容社区场景下的加分项5.1 首屏加载优化不要只说懒加载这三个字小红书的内容分发场景对首屏加载的要求很高因为用户是带着刷内容的预期来的首屏慢一秒用户流失率就明显上升。所以面试官问性能优化几乎必然围绕首屏。我建议的答题结构是分步骤展开先确立指标首屏时间(FCP)用了多少、LCP是多少、有没有性能监控平台能看到这些指标。如果在项目里装过Web Vitals或者Sentry要主动提出来。网络层面HTTP缓存策略、CDN加速、HTTP/2多路复用、资源预加载preload/preconnect。代码层面路由懒加载、组件的动态导入、骨架屏、图片懒加载、图片格式转换WebP/AVIF、组件库按需引入。构建层面代码分割splitChunks、tree-shaking、压缩JS/CSS、开启Gzip或Brotli压缩。有一个能体现工程能力的点如果某个页面很重你会怎么拆包。可以详细说说webpack或vite的manualChunks配置比如把vue、vue-router、pinia这类的稳定依赖打进单独的vendor包把业务组件按路由拆让每个页面只加载自己需要的代码。拆完之后还要确认改动是否影响了构建缓存的有效性这时候合理的chunkhash命名就非常重要。5.2 图片加载的极限优化小红书场景的必答题小红书的内容几乎全是图片流所以图片优化相关的问题出现概率极高。面试官大概率会问你们项目里的图片是怎么做懒加载的图片加载失败你怎么处理你如果只答用了v-lazy那这道题基本就送了。进阶回答要点懒加载的实现原理用IntersectionObserver监听图片是否进入视口进入后再替换src。如果用scroll事件监听要注意防抖并计算getBoundingClientRect。占位图处理为了避免图片进入视口时才加载导致的白屏闪烁要用一个极小的本地占位图一般是base64或用CSS背景色先占住位置比例保持和原图一致。失败重试策略通过onerror事件捕获尝试替换CDN域名或者降级到原图地址重试超过一定次数比如3次就展示一个默认失败图片。渐进式加载小红书Web端曾经用过类似先加载模糊缩略图再加载高清图的策略。实现方式有两种一种是用带blur滤镜的canvas图做背景另一种是用srcset配合不同分辨率的图片让浏览器根据视口和网络环境自动选择。能把这些细节讲清楚的人面试官会认为你在真实的高流量图片场景中实战过而不是只会背概念。5.3 前端监控面试中的潜在加分项监控类问题不是必考题但一旦面试官把你的项目往深了问很容易引到线上出了问题你怎么知道这个话题。小红书的前端面试对于候选人的监控意识相当看重因为像内容社区这种高并发的Web应用任何前端异常都可能影响大量用户体验。需要掌握的核心点错误监控window.onerror捕获JS运行时错误unhandledrejection捕获未处理的Promise异常结合sourcemap解析压缩代码的报错位置。性能监控用PerformanceObserver监听LargestContentfulPaint、FirstInputDelay、CumulativeLayoutShift这几个核心Web Vitals指标。埋点曝光埋点和点击埋点怎么设计怎么做到不侵入业务代码可以封装成一个通用的追踪函数页面组件挂载时自动上报。稳定性监控上报本身不能影响性能一般要做成异步的、批量上报、失败降级。这个点如果在面试中主动提出来即使项目里只是做了一个非常简单的前端错误收集工具面试官也会给你加分因为这说明你有线上意识而不是开发完就不管了。6. 算法题贴近业务场景的考察方式与应对策略6.1 小红书算法题的画像不是纯背模板很多候选人以为大厂算法题就是leetcode hard结果发现小红书出的题有些不按常理出牌。它更倾向于出与业务场景强相关的题或者用业务故事包装的普通数据结构题。举个例子常见的题目有实时统计一段时间内的热门话题Top10或者给定一个用户发布的内容流找出点赞数最高的连续子区间。这类题的底层还是堆、滑动窗口、前缀和这些经典算法但因为包装了业务场景能考察候选人的建模能力——你能不能把模糊的需求抽象成清晰的数据结构和算法模型。6.2 高频算法题型与答题模板根据近期的面经小红书前端面试的算法题集中在以下6类字符串/数组处理翻转字符串里的单词、最长不含重复字符的子串、数组扁平化。链表判断链表是否有环、合并两个有序链表、反转链表。二叉树层序遍历、最近公共祖先、二叉树的最大深度。动态规划最大子序和、爬楼梯、不同路径。这三道是出现率最高的DP入门题。排序与TopK手写快排、求数组第K大元素。设计类实现一个LRU缓存、实现一个带过期时间的localStorage封装。我特别想强调LRU缓存这道题。前端面试出现频率极高因为它组合了哈希表和双向链表的知识。实现时如果只用一个Map其实也能做到O(1)复杂度的get和put因为Map的keys()迭代顺序就是插入顺序。但更标准的做法是手写一个双向链表每次访问时把节点移动到头部超出容量时删除尾部节点。这道题如果能写出来面试官会觉得你数据结构基础扎实。6.3 回答算法题时的现场表达技巧面试算法题不只是看最终代码更看你的解题过程。建议遵循以下顺序先确认需求和边界条件数组为空时返回什么字符串有前后空格要不要处理这些一定要先问清楚面试官不会觉得你啰嗦反而会觉得你严谨。说思路再动手先用一两句话说清楚解法比如我打算先用双指针left指向字符串开头right指向末尾逐位交换时间复杂度O(n)空间复杂度O(1)。说完思路再开始写代码会让面试官觉得你有结构化思维。主动分析复杂度写完代码后主动说出时间复杂度和空间复杂度不要等面试官来问。这几乎是面试中必须养成的肌肉记忆。跑一个测试用例用最简单的例子手动走一遍代码这一步在面试里经常被忽略但走一遍既能证明你代码的正确性也能自己发现隐藏bug。我见过不少候选人思路完全正确但因为没等面试官反应就直接写代码边写边改最终以乱糟糟的卷面收场。其实面试官更看重的是你把一个模糊问题拆解成精确逻辑的能力不是你打代码的速度。7. 项目深挖和HR面简历怎么讲才不会翻车7.1 项目的STARL拆解法给面试官一个追问剧本项目深挖通常在三面出现面试官会直接打开你的简历从最近的项目开始问。很多人挂在这里不是项目不够好而是讲法不对——要么像流水账要么只重复简历上已有的内容。我推荐的讲法是STARLSituation项目背景、Task你的职责和目标、Action你具体做了什么、Result结果和量化指标、Learning你踩过的坑和总结。举个例子简历上写负责首页性能优化面试官问你怎么做的优化你不能只说加了图片懒加载而应该说Situation首页图片资源过多LCP达到4.2s在移动端用户流失严重。Task目标是两周内把LCP降到2.5s以内。Action做了四件事——图片改用WebP、用IntersectionObserver实现懒加载、首屏接口从串行改成并行、把第三方字体改为preload预加载。ResultLCP从4.2s降到1.9s首屏跳出率下降约12%。Learning过程中踩了一个坑CDN没有配置正确的Cache-Control导致升级了图片格式之后用户端还是拿到旧缓存后来统一加了版本号参数才解决。这样一段话讲下来面试官基本没有继续追问的必要了因为你已经把最关键的信息全给了。而且里面有几个可以深挖的具体点面试官挑任何一个问你都能往下接。7.2 简历上的每个字都要能扛住三连问写简历最常见的误区是堆砌技术名词。比如熟练使用Vue3、Vite、Webpack、TypeScript、Pinia做过可视化大屏面试官看到这种描述很可能直接选两个词深挖你Vite和Webpack的差异是什么做过可视化大屏用的什么方案所以我的建议是简历上每一个技术点你都要准备三个层次的答案这个技术是什么一句话定义你把它用在了哪个具体场景项目结合它在你的场景里有什么坑或者优化点深度总结比如你写了Webpack你要能说清楚Webpack的loader和plugin的区别、你在项目里有没有自己写过loader或plugin、Tree-shaking在哪个场景下失效过比如CommonJS模块就无法tree-shake、怎么排查构建体积的。如果这些问题任何一个你答不上来面试官大概率会判定这个点是你听说但没用过整份简历的可信度都会打折扣。7.3 HR面的隐形考题稳定性与自驱力小红书的HR面不是走过场会重点考察你的稳定性和自驱力。稳定性主要判断你入职后能否长期待住所以要准备好离职原因的回答框架不要在HR面吐槽前东家而是从个人发展的角度说明比如希望在更大的技术平台挑战更复杂的业务场景。自驱力的考察方式通常是你最近在学习什么新技术业余时间怎么安排。技术面表现不错但HR面话术如果太敷衍也有可能被压薪资或者延后offer。这里面有个小技巧平时真的要跟一个开源项目或者维护一个技术博客回答HR问题时能拿出具体的东西比空谈我热爱技术有说服力得多。另外HR可能会问如果给你一个需求你打算怎么推动落地。这属于工作方法题要体现出你不只写代码还能理解业务优先级、推进跨团队协作。哪怕你只说先拆解需求、评估技术方案、和后端确认接口、排期提测也比说我按需求做就行强出一个档次。7.4 简历中技术栈描述的要诀会做减法的人更高级我在看简历时经常发现候选人喜欢把所有接触过的技术全部列上结果看起来像在堆砌。真正高级的简历技术栈部分是非常克制的只写自己能深度展开的三四个。比如你可以这样写核心Vue3 / TypeScript / Vite / Pinia框架原理Vue3响应式机制、虚拟DOM与diff算法、JSBridge原理工程化Webpack构建优化、前端监控、自动化测试Vitest加分Node.js写过性能分析脚本、小程序跨端方案Taro/uni-app每个点都要能往下聊至少五句话。如果你某一块还达不到这个标准就不要写。面试是木桶效应的反面一个特别能打的长板比十个平均水平的短板更有用。8. 面试准备的最后环节心态与临场应变8.1 不要追求完美回答追求结构化推进很多人在面试现场会卡壳卡壳是因为想一次性答出完美的答案。但面试官其实非常包容临时卡顿他们更在意的是你卡顿之后怎么推进。哪怕一开始答得不是特别完整只要思路清晰能逐步把答案补充完整整体的观感依然很好。所以我在准备面试时会刻意训练先说框架再填细节的表达方式。比如被问讲一下浏览器从输入URL到页面渲染的过程我会先列出主干DNS解析、TCP连接、HTTP请求、服务端响应、浏览器解析渲染、资源加载与执行。然后再逐步展开每个节点。这样即使某个细节记忆模糊也不会影响整体结构的完整性。8.2 坦诚你不知道的东西比瞎编容易得分面试中最大的雷区是不懂装懂。宁可说这个点我没有深入过但我可以尝试分析一下也不要硬着头皮编一个看似合理的解释。面试官大多数有十年以上的技术判断力你编到第二个细节就露馅了而且一旦穿帮之前答得好的题目都会被连坐怀疑。小红书面试官在面经中的高频话术是没了解过没关系面试的核心是选出基础扎实、有潜力的人不是选出百科全书。主动承认盲区反而可能是展示学习能力的机会——你可以顺势说我对这个点确实不了解但如果让我上手这个方向我会从xxx文档开始看先搭一个最小demo验证。这句话的信息量往往比错误答案大得多。8.3 面完一定要复盘把答得不好的题目变成下一次的起点我见过太多人面完就等着结果既不记录也不复盘。其实不管过没过面试过程本身就是一次最真实的技术体检。每次面试结束后用15分钟把没答利索的题目记下来整理成文档下一次面试前把之前的错题重新过一遍。几场面试下来你的知识盲区会越来越清晰通过率也会稳定提升。最后说点个人体会。小红书这种体量的公司前端面试并不追求极致刁钻它更像是一次深度的技术对谈。你能不能被选上取决于你是否具备扎实的基础功底、清晰的业务理解能力和成熟的工程思维。现在开始准备把上面的每个点都过一遍你完全可以去试一次。祝每一位认真准备的人都能拿到心仪的offer。