如果你正在准备2025年的前端跳槽而且目标里有小红书这类内容平台那这篇东西应该能帮你少走不少弯路。我结合最近半年收集到的面经、和小红书前端朋友交流的信息以及我自己带人面试时的出题习惯把高频考点重新梳理了一遍。和网上那些纯八股文汇总不一样我更想聊清楚每道题背后的考察逻辑以及面试官到底想听到什么程度的回答。先说个整体判断2025年的前端面试尤其是小红书这种体量的公司不再满足于“你知道这个 API”或者“你能背出这个概念”。他们更看重三件事第一你对原理的掌握是不是成体系的第二你遇到真实业务问题时能不能把技术用起来第三你的技术深度能不能支撑起复杂交互和高并发场景。所以下面这些题目我都会从“面试官为什么要问”这个角度切入再给你一套可以直接用的回答框架。1. 整体考察方向与高频考点分布1.1 小红书面试流程与风格画像小红书的前端面试通常走四轮一面技术面基础项目、二面技术面深度场景、三面交叉面或 leader 面综合架构、HR 面。一面的风格非常典型喜欢从基础题铺开然后顺着你的回答不断追问直到问到你答不上来为止。这不是压力面而是想摸清你的技术深度边界在哪里。二面则更偏向场景设计题比如会给你一个具体的业务需求让你当场说实现思路、技术选型、组件拆分、性能优化点。这个环节很多人挂原因不是不会写代码而是思考没有条理或者给出的方案明显没有考虑到团队的协作成本。三面通常聊项目、聊成长、聊你对技术栈的理解偶尔也会问一些开放性问题考察你的技术视野。1.2 2025年高频考点分布画像我整理了近一年高频出现的考点按出现频率和重要程度排了个序。你可以对照这个表做自查看看哪些是自己的薄弱项。考察模块高频考点出现频率建议优先级JavaScript闭包、事件循环、Promise、防抖节流、this 指向极高必会Vue 3响应式原理、diff 算法、编译优化、组合式 API极高必会浏览器渲染流程、缓存机制、跨域方案、性能指标高必会工程化Vite/webpack 原理、构建优化、代码规范高重点准备组件与架构组件库设计、微前端、状态管理选型中高按需准备手写题实现 Promise、深拷贝、数组去重、函数柯里化中高必练场景题大文件上传、长列表优化、实时协作、监控上报中高重点准备从这张表可以看出来基础依然是重中之重。但要注意小红书这类内容平台的前端团队因为社区、笔记、视频等业务形态的特殊性对渲染性能、组件复用、图片加载、移动端适配这些场景问题问得特别多。你准备的时候不能只看通用八股还要把“内容型产品”可能遇到的性能问题过一遍。2. JavaScript 核心高频题2.1 闭包的底层逻辑与内存泄漏闭包几乎是必考题但很多人只背了“函数内部返回函数可以访问外部变量”这句话。面试官这时候一般会追问一句“闭包为什么能访问外部变量”如果你答不上来前面的分基本就丢了。闭包的本质是词法作用域链。JavaScript 函数内部有一个 [[Environment]] 属性指向函数定义时所处的词法环境。当外部函数执行完正常情况下它的执行上下文会被销毁但内部函数被返回并保存后外部函数的词法环境会通过内部函数的 [[Environment]] 被继续引用所以外部函数的变量对象不会被垃圾回收。这就是闭包能保持变量的根本原因。面试官还会接着问闭包的使用场景和内存问题。我的回答思路是这样的闭包常用于数据私有化、柯里化、防抖节流、单例模式内存问题则要区分是“正常引用”还是“意外保留”只要闭包本身还在使用就不算泄漏。如果闭包持有大量 DOM 引用或大数据对象且长期不释放那才是需要警惕的。可以提一个解决思路在闭包结束的地方显式把引用置为 null。另外面试官特别喜欢把闭包和 for 循环 var/let 区别一起问。这个经典题你要能讲清楚var 声明的 i 是函数作用域所有回调共享同一个 ilet 声明的 i 是块级作用域每次循环都会创建新的词法环境绑定。用闭包解决就是包一层立即执行函数传参本质是给每次迭代创建独立作用域。2.2 防抖节流的原理、区别与手写要点防抖节流是手写题里出镜率最高的一对。很多候选人能写出一个版本但被问到“为什么需要”“它们有什么区别”“分别适合用什么场景”就卡住了。防抖的核心思路是“事件停止触发后延迟执行”如果在这段时间里再次触发就重新计时。适合的场景是搜索框输入、窗口 resize 后的计算。节流的核心思路是“间隔时间内只执行一次”适合滚动加载、鼠标移动、按钮点击防连点。我在面试中比较注意的点是候选人会不会用this和事件对象。很多人的第一版写法直接丢掉了 this 绑定和 event 参数这是实际中必然出 bug 的。正确的防抖函数应该保留原函数调用时的 this并且把参数透传进去。节流的实现有两种常见方式时间戳版和定时器版两者的区别在于首次是否立即执行、最后一次是否还能补执行。一个完整的方案是组合两者保证首次立即执行且停止触发后还能再补一次。我建议你准备一个带 cancel 方法的版本。面试官如果追问“如果组件卸载了防抖任务还在怎么办”你能答出“设置一个 cancel 方法在 beforeUnmount 里调用来清除定时器”会很加分。2.3 Event Loop 与宏任务微任务的执行顺序这道题已经是前端的必考送分题但送分不代表你能丢分。面试官一般会给你一段代码让你说出输出顺序。表面上是考事件循环实际上是在考你对await、Promise、setTimeout、requestAnimationFrame、requestIdleCallback的掌握程度。回答的关键是把执行顺序的规则讲清楚同步代码优先执行遇到微任务进入微任务队列遇到宏任务进入宏任务队列当前宏任务执行完后会清空整个微任务队列然后才执行下一个宏任务。千万不要说“微任务先执行完再执行宏任务任务队列里的下一个”这种不精确的描述。await的处理是另一个容易错的地方。await右边如果是 Promiseawait 本身会先让出执行权等 Promise resolve 后await 后面的代码会被当作微任务继续执行。如果把await右边当成普通值执行时机会不一样。我见过不少候选人在这里翻车建议你多找几道这类题练习尤其是 setTimeout 里嵌套 Promise、多个 await 并列的场景。高频顺序题完全可以背下来同步代码先执行、微任务队列清空、宏任务逐个执行中间每执行一个宏任务就检查微任务队列。这句话背熟加上对 await 的理解顺序题基本不会错。2.4 Promise 基础与手写 promisePromise 相关题目也是高频中的高频。一面可能让你讲清楚几种静态方法二面可能直接让你手写一个 Promise/A 实现。手写题其实不要求你背出完整规范核心是想看你有没有理解状态机、链式调用、异步调度。我推荐你用三段式来回答先说明 Promise 的核心是状态机只有 pending、fulfilled、rejected 三种状态一旦改变就不能再变然后说明 then 方法的链式调用通过回调注册和返回值传递实现最后说明所谓“微任务”是通过调度器实现的。手写 Promise 的时候我的经验是从简单版本开始先把 resolve、reject、then 写出来再处理异步、链式调用、值穿透、静态方法。尤其要注意resolve一个 Promise 时的递归处理以及then返回值的兼容处理。如果你能在写之前先画 30 秒理清结构容易被人看出你是真理解而不是背的。还有一个常见追问是Promise.all当其中一个失败时其他 Promise 的结果是会被忽略还是仍然执行这道题考察的是对并发控制和快速失败机制的理解。你要能指出Promise.all采取的是快速失败策略失败后直接 reject但底层的 Promise 任务不会被取消它们仍然会继续执行只是结果不会被使用。3. Vue 3 高频原理题3.1 Vue 2 与 Vue 3 响应式方案的区别Vue 3 几乎是绕不开的必考主题。最常见的问法就是“Vue 3 的响应式相比 Vue 2 改了什么为什么这么改”。这道题背后想考察的是你对响应式设计思路的理解。Vue 2 用的是 Object.defineProperty只能拦截对象属性的读取和赋值所以对于新增属性、删除属性、数组索引变化的响应是无能为力的所以才需要$set、$delete这种补丁 API。Vue 3 改用 Proxy可以代理整个对象天然可以监听任意属性变化包括新增和删除。回答时一定要提到三个层面第一响应式 API 层面ref 和 reactive 的差异第二依赖收集层面Vue 2 用依赖数组Vue 3 用 WeakMap Map Set 结构解决对象不可枚举属性、性能、以及多次 track 顺序的问题第三性能层面Proxy 可以配合对象的惰性响应式避免像 Vue 2 启动时递归遍历所有属性带来的性能开销。面试官还会追问ref和reactive的区别。我的答法是ref是用来包装基本类型值的靠着getter/setter来实现响应式reactive是用来包装对象的直接基于 Proxyref内部遇到对象值时也会调用reactive所以本质上是一套协同方案。实际开发中建议普遍使用ref因为它引用传递方便、解构不会丢响应式组合式函数里特别好用。3.2 虚拟 DOM 与 diff 算法虚拟 DOM 和 diff 算法的题几乎不会缺席关键是考察你能讲到什么深度。只要你能说出“同层比较、双端比较、key 的作用”这几层基础分就能拿到但如果想拿高分就要把 diff 的优化策略讲清楚。我的回答框架是为什么要有虚拟 DOM直接操作真实 DOM 成本高虚拟 DOM 是一个轻量的 JS 对象通过 diff 找到最小变更集最后批量操作真实 DOM。Vue 3 的 diff 比 Vue 2 快是因为静态标记的存在。具体的 diff 过程说起来也不复杂比较两个 VNode 时先比较 type 和 key如果不同就直接替换如果相同就递归比较子节点。子节点比较时Vue 2 用了双端比较从两边往中间收拢Vue 3 在此基础上加入了动态节点的标记和 block 树可以直接跳过静态节点的对比。中间还会有一个“最长递增子序列”的优化用来处理移动节点的场景这个如果你能主动提出来面试官会明显感兴趣。需要特别注意的是 key 的设置。高频追问是“为什么不能用 index 作为 key”。你只要举一个场景就能说明白列表头部插入一条数据后用 index 做 key所有后续节点的 key 都变了导致 diff 无法复用原有节点只能全量重建。用唯一 id 做 keydiff 才能识别出哪个节点该插入、哪个节点该移动。3.3 Vue 3 编译优化与静态提升这道题是 2025 年面试里很有区分度的一道题。大多数人能讲响应式能讲 diff但对编译优化一知半解面试官问到这里往往就是为了筛选那批真正读过源码、或者深入理解过 Vue 3 的人。Vue 3 的编译优化包括静态提升、预字符串化、patchFlag 标记、动态节点收集、缓存事件处理函数。其中 patchFlag 是核心它会在编译阶段给每个动态绑定打上标记告诉运行时这个节点具体是什么类型的变化文本、class、style、props 等diff 时就可以只检查标记部分不用重新比较整个节点。回答时可以举个简单例子一个模板里有一个静态div还有一个动态绑定的:classVue 3 编译后只会给后者打上 patchFlag渲染时静态节点直接复用diff 时只处理有标记的节点。这就是 Vue 3 比 Vue 2 快的一个重要原因。面试官如果接着问“静态节点是不是完全不会更新”你要能补充静态提升会把静态节点提升到渲染函数外部变成常量但如果是组件节点里的静态部分还是会走组件更新逻辑只是不会重复创建 VNode。3.4 组合式 API 与选项式 API 的取舍Vue 3 已经出来好几年了但面试时还是会有人问组合式和选项式的区别。这种题看似简单其实考察的是你对代码组织方式的理解以及对复杂业务场景的抽象能力。组合式 API 的核心优势是“按功能组织代码”而选项式是按数据类型分类的。业务复杂了以后同一个功能相关的 data、methods、watch 被分散在文件各处阅读和复用都很费劲。组合式 API 则可以把同一功能的逻辑封装到一个函数里甚至可以跨组件复用这才是它真正的价值。面试官也比较喜欢问“组合式 API 和 mixins 相比有什么优势”。回答的思路是mixins 的合并规则容易产生隐式依赖、命名冲突而且多个 mixin 无法清晰地看到一个变量来自哪里。组合式函数天然避免了这些问题数据来源清晰、方法名不会自动合并冲突、还可以自由使用 ref 和 computed。实际面试中我会建议你准备一个基于组合式 API 封装的小例子比如封装一个useTableList或者useDebounce面试时主动说“我在项目中把列表页逻辑抽成了组合式函数”这就是一个不容易冷场的加分点。4. 浏览器与网络高频题4.1 从输入 URL 到页面渲染全流程这道题是浏览器相关问题里最经典的从一面问到三面都有可能。面试官不是想听你背一长串名词而是想考察你对“浏览器工作原理”是否有整体认知以及能否把网络、渲染、JS 执行串成一条线。一个完整的回答流程可以这样组织URL 解析与编码处理缓存检查强缓存优先命中就直接用未命中走协商缓存DNS 解析TCP 连接建立HTTPS 还需要 TLS 握手发送 HTTP 请求、接收响应浏览器解析 HTML 构建 DOM 树、解析 CSS 构建 CSSOM 树合成渲染树Render Tree布局Layout/Reflow绘制Paint合成Composite最后执行 JavaScript其中 script 标签会阻塞 DOM 解析所以有 defer/async 的区别。面试官常见的追问是CSS 和 JavaScript 的阻塞情况、DOMContentLoaded 和 load 事件的区别、为什么script建议放在/body前面但现在更推荐defer、还有preload和prefetch的区别。这些点我建议你都准备一遍不需要背得很深但要能说出大概逻辑。比如 defer 和 async 的区别defer 保证执行顺序、在 DOM 解析完后执行async 下载完就执行不保证顺序适合独立加载的脚本。4.2 浏览器缓存机制缓存相关的题覆盖面很广考点包括强缓存、协商缓存、缓存头字段、缓存位置、缓存失效场景。面试官常用的一道场景题是修改了静态资源文件但用户打开页面还是老版本怎么办回答的关键在于区分强缓存和协商缓存。强缓存通过Cache-Control里的max-age或过期时间字段生效命中时直接读取本地缓存不发请求。协商缓存则是每次都要请求服务器带上If-None-Match对应 ETag或If-Modified-Since对应 Last-Modified服务器判断资源有没有变化304 则复用缓存。实际业务中前端最常用的方案就是静态资源文件名加 hash配合Cache-Control: max-age31536000, immutable这样文件名一变浏览器自然会把旧的缓存当作新资源重新请求。HTML 文件用no-cache保证每次回源校验。这套方案几乎每个公司都在用你面试时能主动提出来说明你有真实项目经验。4.3 跨域方案与常见坑跨域也是必考但 2025 年面试官已经不太满足于“JSONP、CORS、代理”这几个词了。CORS 的细节会追问比如简单请求和预检请求preflight的区别还有常见的 CORS 报错怎么排查。先说 CORS跨域资源共享主要由服务端返回响应头来控制。Access-Control-Allow-Origin指定允许的源Access-Control-Allow-Headers、Access-Control-Allow-Methods控制允许的请求头和方法。当请求不是简单请求比如自定义 header、content-type 为 application/json、使用 PUT/DELETE 方法时浏览器会先发一个 OPTIONS 预检请求服务端确认允许后再发送真实请求。开发环境一般用代理解决跨域Vite 里有 server.proxywebpack 里有 devServer.proxy本质是让浏览器的请求指向同源的后端代理服务由代理去转发请求。生产上一般是 Nginx 反向代理统一转发或者服务端直接开启 CORS。你最好能顺带说一句“线上不建议用 JSONP因为只支持 GET 且安全隐患较多”有对比才显得有思考。4.4 前端性能优化指标与落地手段小红书这种内容型产品对性能的要求很高所以性能优化几乎是必问项。常见的提问方式是“如果你们页面 FCP 很慢你会怎么排查和优化”这类问题很开放想要拿高分需要你有完整的排查思路。我推荐的回答路径是先用工具测量指标比如 Lighthouse、Chrome 性能面板或者 Web Vitals然后按指标维度定位问题——网络层面看资源大小和请求数量渲染层面看是否阻塞了首屏JS 层面看主线程是否有长任务。优化的具体手段可以分几个方向来说资源加载方面图片压缩、懒加载、CSS/JS 代码分割、按需加载缓存方面合理使用 HTTP 缓存、Service Worker 做离线缓存渲染方面避免布局抖动、减少重排重绘、使用content-visibility跳过屏幕外渲染JS 方面减少长任务、拆分大计算到 Web Worker、用requestIdleCallback处理低优先级任务。说到性能优化这里必须提醒一句面试时最好不要只背优化手段列表要主动引入“量化”的概念。比如“我通过压缩图片后首屏图片体积减少了约 40%FCP 从 2.3s 提到 1.4s”这种带数字的表述比十句术语都管用。面试官听到数字会下意识认为你是真的做过而不是背的。5. 工程化、组件库与微前端5.1 前端工程化方向的高频考点工程化在 2025 年的面试中越来越重要因为它能反映一个人在大团队里的协作能力。Vite 和 webpack 的对比是高频题重点考察你对构建工具链的理解。Vite 的核心是开发环境用原生 ESModule esbuild 预构建不打包直接提供模块给浏览器所以冷启动非常快生产环境默认用 Rollup 打包。webpack 则是全量打包方案丰富的插件生态和配置粒度是它的优势但开发环境冷启动慢是硬伤。面试官常问“什么时候用 Vite什么时候用 webpack”比较好的回答是新项目优先 Vite老项目如果是复杂的多页应用或深度依赖 webpack 插件生态建议先评估迁移成本再决定。还有一个高频题是“你有没有做过构建优化”。准备的思路可以从几个角度入手提升构建速度用 esbuild-loader/parallel 提升打包速度、模块联邦共享依赖、减小产物体积代码分割、Tree Shaking、按需引入、缓存持久化缓存、Webpack 5 的 cache 配置。同样带上具体数字的项目例子比干巴巴列举效果好得多。5.2 组件库设计与设计系统小红书前端团队在组件库方向有一定积累面试时对组件设计能力也会重点考察。题目可能是“如果让你设计一个组件库你会怎么设计”也可能是“如何设计一个通用且可扩展的 Button”。设计组件库的思考链路大致是这样的从设计规范出发定义色板、字号、间距、圆角、阴影等设计 token然后确定组件分层一般是基础组件Button、Input到业务组件搜索框、点赞按钮等接着考虑主题定制能力CSS 变量是当前的主流方案还要考虑按需引入、TypeScript 类型提示、文档站点和自动化测试。Button 组件看似简单真正设计起来有很多细节。类名怎么用 BEM 规范比如l-btn l-btn--primary、颜色怎么从设计 token 取、不同尺寸怎么映射、loading 状态怎么处理、怎么支持 icon 插槽、怎么兼容原生 button 的 type 属性。面试官在追问这些细节时看的就是你有没有真正封装过组件而不是背设计模式。5.3 微前端方案对比与常见坑微前端在热词里出现了说明 2025 年它依然是被广泛讨论的话题。小红书这类大型业务前端团队多团队协作下的微前端实践会比较多。面试官常问为什么需要微前端、主流方案有哪些、它们各自的优缺点、以及你在实际项目中踩过什么坑。微前端的核心诉求是让不同团队独立开发、独立部署、技术栈隔离同时又能组合成一个完整应用。主流的实现思路有几种基座模式qiankun 为代表通过 JS 沙箱和样式隔离实现子应用接入模块联邦Module Federation更偏向于运行时共享模块还有 iframe 这种最简单但体验较差的方案。qiankun 的原理被问到的概率比较高你要能讲清楚它通过 proxy 拦截 window 访问、通过 import-html-entry 解析子应用 HTML、通过 CSS 沙箱处理样式隔离。常见的坑包括子应用的静态资源路径需要配置 base、全局事件没有被正确清理导致泄漏、多个子应用共存时样式冲突。最后这个坑的实际处理方案是约定样式前缀或使用 CSS Modules。如果你没有实际用过微前端面试时不如坦诚说“项目中没有落地过但我系统学习过也做过 Demo对方案选型有比较完整的思考”同时主动说出你理解的问题和取舍这比生硬地背概念要好得多。6. 手写题、场景题与面经避坑6.1 高频手写题清单与准备建议小红书的一面经常会抽取一两道手写题时间大概在 10 到 20 分钟。这些手写题不是只考你不会写也考察代码风格、边界处理和命名规范所以平时就要养成“一次写对”的习惯。我整理了一个高频清单你可以逐项打钩自测实现防抖函数带 cancel、实现节流函数带 cancel、手写深拷贝考虑 Date、RegExp、Map、Set、循环引用、手写 Promise.all 和 Promise.race、手写数组去重至少三种方法、手写 call/apply/bind、实现一个简单的发布订阅EventEmitter、实现一个 lazyMan考察链式调用和任务队列、用 reduce 实现 map。有几个实际经验想分享第一手写题时先想清楚 API 签名再动笔不要边写边改第二边界条件要主动处理比如空数组、空对象、循环引用第三尽量写纯函数不要修改入参。如果能做到这三点即使实现得不完美印象分也会高很多。6.2 场景题思路大文件上传、长列表优化、实时协作场景题是最能拉开差距的题型因为它既考基础又考业务思维。小红书这类内容平台有较多的图片、视频上传也有长列表、社区动态流等场景所以下面的三个场景题请务必认真准备。大文件上传是我在热词里看到的也是真实业务里频繁出现的需求。回答的核心是分片上传 并发控制 断点续传 秒传。先对文件进行分片比如每片 5MB然后计算整个文件的 MD5web-worker 里计算避免卡 UI上传前先向后端校验该文件是否已存在存在就直接秒传已上传过哪些分片则只传缺失的分片。并发控制你抢答一下“用 p-limit 或者自己封装一个并发池限制同时上传的分片数”然后再说失败重试、进度收集、最后通知后端合并。这就是一个完整的、有说服力的回答。长列表优化也是小红书业务的高频场景。除了虚拟滚动你还得有备选的优化思路分页懒加载、窗口化渲染、内容不可见时用content-visibility: auto跳过渲染、图片用懒加载和合适的尺寸格式、列表项用 memo 避免不必要的重渲染。如果面试官追问“虚拟滚动是怎么实现的”你的思路是外层容器固定高度、监听滚动、计算可视区起始索引和结束索引、只渲染可视区附近的列表项再加一段缓冲区域避免白屏闪烁。实时协作场景有时候也会出现比如多人在线编辑、评论实时更新。回答核心是通信方式选型短轮询、长轮询、SSE、WebSocket。WebSocket 适合双向实时交互SSE 适合服务端单向推送比如通知流你要能根据场景选择。6.3 面试表达与复盘建议最后这部分不是题目而是我在帮人做模拟面试时发现的高频问题。很多人挂不是技术不行而是表达方式有问题。第一个问题是“描述项目时只有功能没有数据”。说“我开发了某个后台管理系统”和“我主导了一个后台系统的前端重构优化了权限模块把页面加载时间从 3 秒降到 1.2 秒”后者明显更有说服力。建议你在面试前把能拿出手的项目都补上性能数据、业务结果数据。第二个问题是“遇到不会的题直接沉默”。实际上面试官很能理解你有不会的知识点关键是看你有没有分析思路。哪怕不能完全答出也可以用“我没实践过但根据我的理解这个问题应该是……”来过渡把能想到的步骤说一遍至少展示思考过程。第三个问题是“背题痕迹太重”。面试官不是听你背书而是和你交流。可以多用“我在项目里踩个坑”“当时我们是这么处理的”这种带有个人经验色彩的表述会让整体感觉自然很多。我自己在准备面试时有一个习惯每道题整理成“题目、核心考点、答法框架、追问方向、项目关联点”五段式笔记不管最后有没有考到这个过程本身就是一次很好的知识梳理。面完试以后当天就回忆记录面试官的问题尤其是自己没答好的部分一周内补充整理这样每一轮面试都能带来实际成长。2025 年的前端面试难度整体不低但准备的时候不需要焦虑。把上面这些高频题吃透再结合自己真实的项目经验做内化你面对面试官的时候会比大多数候选人更从容。