最近好多读者在私信里问我年后想跳槽前端岗位到底该怎么准备正好手头有一份新鲜出炉的有赞前端面经一面、二面、HR面完整记录时间就在 2026 年 1 月 13 日。我把它掰开揉碎结合前端八股文和实际面试场景给你做一次深度解析讲清楚每一轮考察的重点、面试官真正想听什么以及每一步该怎么准备。这篇不是简单罗列题目而是把题目背后的考察逻辑、回答框架、坑点全都讲透无论你是准备校招、社招还是纯粹想检验自己的前端基础是否扎实这份解析都值得花二十分钟认真读完。前端面试这两年变化很大但万变不离其宗。八股文依然是敲门砖项目经历是放大器工程化能力和软素质决定你能不能走到最后。有赞这家公司的技术栈以 React 为主前端团队对基础功底、性能优化、工程化建设都比较看重。从这份面经能明显看出来一面侧重基础深度二面侧重综合能力和业务落地HR 面则考察稳定性、沟通和薪资匹配。下面我按照实际面试流程把每一轮的细节拆给你看。1. 面经全景拆解有赞前端面试的整体脉络1.1 从一面到HR面每一轮到底在筛什么人先把整场面试的节奏梳理一下。有赞的面试流程一般是技术一面、技术二面、HR面有些岗位还会有交叉面或终面但这次记录的是标准的三轮流程。一面通常是技术面面试官一般是你未来直属团队里的资深开发或技术组长。这个阶段的核心目的是确认你的技术底子是否扎实能不能干活基础概念是不是真懂。八股文在这一轮占比最重但不是死记硬背的考法——面试官会从一个点切入不断追问看你到底理解到哪一层。二面一般是团队负责人或技术总监面重点从会不会转向好不好。这个阶段的题目往往没有标准答案考察的是你面对复杂问题的分析思路、方案选型能力、以及是否能站在更高维度思考技术对业务的价值。工程化、性能优化、项目难点深挖是这一轮的重头戏。HR面看起来最轻松实际上淘汰率并不低。到了这一轮技术能力已经得到认可HR 主要验证三件事你的求职动机是否真实、入职后的稳定性如何、薪资期望是否在预算范围内。很多技术能力强的人挂在 HR 面往往是栽在过度包装或者表达随意上后面我会详细说。1.2 有赞前端岗位的考察偏好分析结合这份面经和之前多份有赞面经来看这家公司的前端面试有三个明显偏好。第一非常重视 JavaScript 基础原理。闭包、原型链、事件循环、this 指向这类问题出现的频率极高而且问法很活不是直接问闭包是什么而是给你一段代码让你说输出结果再逐步提高难度。这说明他们真正考察的是你对 JS 运行机制的理解是否深入而不是背概念的能力。第二前端工程化内容占比高。Webpack 构建流程、Vite 原理、模块化方案、代码规范与质量保障这些内容一面二面都会出现。有赞的前端团队规模不小中后台业务多工程化能力直接决定团队的交付效率所以面试官会重点考察你有没有实际搭建过项目、有没有做过构建优化。第三场景题和项目深挖紧密结合。他们不喜欢听你背八股文式的项目介绍而是会挑你简历里的一个技术亮点从技术选型到落地细节一路追问到底。如果你没有真正做过或者只是被动参与很容易在第二轮追问中露馅。2. 一面深度解析前端八股文的核心考点与答题框架2.1 JavaScript 基础从知道到讲清楚一面开场一般是自我介绍加基础题JavaScript 是绕不开的重头戏。有赞这次面经里第一道技术题就是关于闭包和事件循环的。先说闭包。很多人的回答停留在函数内部可以访问外部变量这个层级只能说及格但不够出彩。面试官接下来一定会追问闭包有哪些应用场景闭包会造成什么问题怎么解决你要答到这么一层才算到位闭包的本质是函数与词法作用域的组合它在函数创建时就被确定了。应用场景包括函数柯里化、防抖节流、模块化封装私有变量。内存泄漏的根本原因是外部函数执行完成后内部函数仍被外部引用导致垃圾回收无法释放解决方式是不再使用时手动置为 null。再说事件循环。有赞喜欢考输出顺序题比如 setTimeout、Promise、async/await 混在一起的代码让你从上到下写出执行顺序。这类题的关键是要把宏任务、微任务、执行栈的关系梳理清楚。我给你一个最稳的回答框架先说明 JS 是单线程语言通过事件循环机制处理异步再按顺序讲清同步代码先执行、遇到宏任务放入宏任务队列、遇到微任务放入微任务队列、当前宏任务执行完毕后清空微任务队列然后再取下一个宏任务。回答这类题时不要只给结论要把你的推导过程、每一步为什么放到任务队列、到达哪个阶段被取出来讲清楚这才是面试官真正考察的东西。2.2 浏览器与网络性能优化路上的必修课前端面试里浏览器和网络知识几乎必考这次记录到的知识点包括浏览器渲染流程、HTTP 缓存、跨域方案。浏览器渲染流程建议按这个顺序答解析 HTML 生成 DOM 树、解析 CSS 生成 CSSOM 树、两者合并生成渲染树、计算布局、绘制。面试官如果追问为什么说 JavaScript 会阻塞页面渲染你要能讲到脚本执行会阻塞 DOM 解析以及现代浏览器对 async 和 defer 的处理差异。这个知识点直接关系到实际性能优化值得你多花时间吃透。HTTP 缓存考察的频率也非常高。直接建议你从强缓存和协商缓存两个大方向入手分别记住对应的头字段。强缓存的关键字是 Cache-Control 和 Expires协商缓存的判断依据是 Last-Modified/If-Modified-Since 和 ETag/If-None-Match。如果面试官问为什么需要 ETag你要答出 Last-Modified 只能精确到秒当文件在毫秒级别内被修改时无法感知同时某些场景下服务器可能会故意改变文件内容但保持修改时间不变。跨域问题的答题框架也要提前准备。先解释浏览器同源策略是什么再说明跨域场景出现在哪里最后列举几种常见方案并对比优劣JSONP 只支持 GET、CORS 需要服务端配合设置响应头、代理方案适合开发环境、postMessage 适合跨文档通信。每一种方案各自适合什么场景、有什么缺点最好能结合你实际项目里的使用经验来谈。2.3 浏览器存储与前端安全高频易漏的细节浏览器存储这块有赞这次也考察到了。localStorage、sessionStorage、cookie 三者的区别几乎是送分题但面试官往往会在象征性听完你的回答后继续追加一个问题比如cookie 的大小限制是多少哪些场景下必须使用 cookie你最好把细节背牢cookie 单个大小限制在 4KB 左右每次请求都会自动携带到同源域名下localStorage 容量一般在 5MB 左右永久保存适合存储不经常变化的业务数据sessionStorage 标签页关闭即销毁适合临时会话数据。再进一步你需要意识到 localStorage 是同步读取的当存储大量数据时主线程解析会耗时。顺便提一句indexedDB 也是面试加分项它适合存储结构化数据和大量文件。前端安全相关的内容也需要准备。XSS 和 CSRF 是两道必背题。XSS 的核心是攻击者注入恶意脚本防御思路是输入过滤与输出编码、使用 CSP 白名单、对 DOM 操作做转义。CSRF 的核心是冒充用户发起请求防御思路是校验 Referer、使用 CSRF Token、设置 SameSite 属性。建议不要分开背这两道题因为面试官经常连续追问如果既存在 XSS 又存在 CSRF你会怎么综合防御提前把两个概念打通回答起来就会很流畅。2.4 React 核心原理从会用到理解设计有赞前端以 React 技术栈为主React 相关问题自然是重头戏。这次面经里出现的都是很经典的问题比如虚拟 DOM、diff 算法、组件生命周期、Hooks 原理。虚拟 DOM 的回答要突出为什么需要直接操作真实 DOM 成本高因为每次修改都会触发浏览器重排和重绘虚拟 DOM 是 JS 层面的对象表示通过 diff 算法计算最小变更再批量更新到真实 DOM。但要注意虚拟 DOM 不是更快的代名词它的核心价值在于提高了开发体验和跨平台能力所以网速慢、交互复杂场景下的性能收益需要辩证看待。diff 算法需要说清楚三点同层比较、key 的作用、双端比较。面试官常问一个非常刁钻的问题key 用数组下标会有什么问题你除了说列表变更时可能导致复用错乱还要补充说明当列表仅做尾部插入时用 index 做 key 理论上没问题但一旦中间插入或者逆序操作React 会重新渲染产生性能问题和状态错乱风险。Hooks 相关的问题比如 useEffect 的依赖数组原理、useMemo 和 useCallback 的区别、为什么 Hooks 不能在条件语句中调用都要准备到位。有一个很高效的记忆方式把这些问题的回答都统一到Hooks 依赖顺序是固定的React 按顺序调用才能保证 state 对应关系正确这个核心逻辑上理解了这一点上面三个问题就能自然串起来回答。3. 二面进阶解析工程化、性能优化与系统设计3.1 前端工程化从 webpack 配置到效率工具链二面拉开差距的往往是工程化问题。有赞这类公司对前端工程化建设的投入比较重视面试官大概率会问你做过哪些构建优化Webpack 和 Vite 的区别是什么你怎么管理项目里的公共代码Webpack 的构建流程要能用大白话讲清楚从入口文件开始递归解析依赖将文件交给对应 loader 处理再通过插件在生命周期中做额外工作最后根据配置生成 chunk 并输出。优化手段也需要形成自己的方法论从几个维度来组织答案提升解析速度用 cache-loader、thread-loaderHMR 开启 happyPack当然现在新项目更推荐直接用 Vite减小打包体积用 tree-shaking、按需引入、代码分割压缩产物用 TerserPlugin静态资源优化用 CDN 和压缩插件。如果面试官进一步问 Vite你要重点讲清楚它为什么快。关键原因是开发环境利用了原生 ES Modules浏览器直接请求模块文件Vite 只需要对 node_modules 中的依赖进行预构建省掉了 Webpack 冷启动时需要全量打包的过程。生产环境 Vite 依然会打包底层 Rollup 做生产构建保证了兼容性和性能。有赞这类逐渐迁移到 Vite 的团队特别喜欢听你对比两种构建工具在不同场景下的取舍这个回答能体现你的工程实践经验。3.2 性能优化回答不只是背优化手段性能优化是二面的高频考察方向想要拿到高分背手段没用你需要有采集-分析-优化-验证的完整闭环思路。这次面经涉及到的性能题目我按场景给你梳理一套回答框架。先说首屏优化。先别急着上来讲懒加载应该先把首屏时间定义清楚再逐项排查白屏时间怎么量化、网络请求耗时多少、JS 解析时间多少、静态资源体积多大。优化方案按优先级排列最关键的是减小入口 JS 体积通过路由懒加载和第三方库按需引入实现然后考虑静态资源 CDN、JS/CSS 压缩、图片懒加载与适当压缩最后是 SSR 或预渲染方案。再补充一个容易被忽略但很有用的点性能优化要有数据支撑。你可以说自己在项目里接入了 Performance API 和 Lighthouse 做前期排查用 PerformanceObserver 来监控真实用户环境下的性能指标LCP、CLS、INP然后建立上报机制定时巡检。这种用数据驱动优化的思路往往比背出十个优化手段更能让面试官记住你。3.3 场景设计与手写题思路比答案更重要二面里比较吓人的是现场手写题和场景设计题。这次面经记录到的手写题包括防抖节流、深拷贝、Promise 相关实现。很多人在这一环节翻车不是因为代码不会写而是写完之后没有自测、没有分析边界条件。以手写防抖为例给你一个标准答题流程先解释防抖的使用场景搜索框输入、窗口 resize再说核心思想是每次触发都重新计时然后快速写出代码。写完之后面试官大概率会追问如果希望第一次触发立即执行怎么办如果希望最后一次触发后能带参数执行怎么办你需要提前准备好带 leading 和 trailing 选项的完整版实现。这就是我常说的答题带框架——不仅仅给答案还要说明你的答案是怎么演变过来的。场景设计题比如你会如何设计一个前端错误监控系统考的不是代码而是架构思维。建议按照采集-上报-聚合-告警-查询五个链路来答。采集端捕获 window.onerror、unhandledrejection、资源加载错误上报端优先使用 sendBeacon 或者降级为图片打点聚合端按错误信息指纹归类展示端要能按版本、浏览器、渠道筛选并支持查看完整调用栈。能把这套框架讲清楚基本上就碾压了大多数人。4. HR面关键点别让小细节毁掉整场面试4.1 HR面到底问什么、怎么答技术面之后进入 HR面很多人以为随便聊聊就行但 HR 手里其实有一份标准化考察表。这次有赞 HR面问到的核心问题包括你为什么选择有赞、你未来三年的职业规划、你如何看待加班、你的期望薪资是多少。回答为什么选择有赞时最忌讳的是只谈待遇和大厂光环。更好的思路是结合业务和技术说有赞的 SaaS 业务模式决定了前端会面对大量复杂的中后台场景对工程化要求高这些都能帮助自己快速成长现有技术栈是 React 全家桶和自己过去项目经验匹配度高能快速产出价值。注意表达真实感不要背稿。职业规划的回答核心是稳定性 成长性。HR 最怕招进来的人半年后因为看不到发展就离职。你最好表达出自己希望在一个领域持续深耕对未来两三年有清晰但不刻板的预期比如向资深前端或前端架构方向发展而不是说我打算一年后转管理之类容易被理解为不安分的表述。4.2 薪资谈判与期望管理薪资问题是 HR面最容易翻车的环节。说高了可能超出预算被挂说低了显得对自己不自信。最好的策略是提前通过招聘平台、面经网站了解有赞前端岗位的薪资范围再结合你现有薪资和涨幅预期给出一个区间而不是一个固定值。举个例子如果你当前月薪 20K跳槽期望涨幅在 20% 到 30% 之间可以直接说我目前的薪资是 20K综合考虑岗位职责和行业水平我期望月薪在 24K 到 26K 之间。这样既表现出你有市场认知又给了 HR 谈判空间。还有一个重要的点当 HR 问你还有其他 offer 吗不要撒谎但也不要暴露底牌。如果确实有其他 offer可以说目前确实有另一家公司在走流程但今天和有赞的面试体验很好我有赞的意向更强。这句话既抬高了自己的价值又给了对方安全感。4.3 沟通表达与软素质的隐形加分项HR面考察的另一个维度是沟通表达。很多技术出身的人容易说话过于简短或者相反过于啰嗦没有重点。建议遵循 STAR 原则来组织所有项目类问题的回答一句话说明任务背景和目标具体做了什么事遇到的最大困难是什么通过什么方式解决带来了什么可量化的结果。有一个实操心得提前准备 3 个完整的项目故事分别对应技术攻坚型团队协作型推进落地型。HR 问到任何一个项目相关的问题你都能从这三个故事里找到合适的素材并且控制在 2 分钟之内讲完突出重点不散不偏。这比临场组织语言要稳定得多。5. 实战复盘从面经中提炼一套可复用的备考路线5.1 针对有赞面试特点的备考优先级排序把这次面经里的所有考点分类统计后你会发现一个清晰的备考优先级。JavaScript 基础原理、浏览器与网络、React 内部机制是第一优先级三者加起来的出现频率超过 60%每一道题都值得你花时间做延展性追问练习。工程化与性能优化是第二优先级这部分内容多、考察深但出题范围相对固定你把 Webpack 核心流程、Vite 原理、性能优化闭环思路准备到位基本可以覆盖 80% 的考点。CSS、Node.js 基础、前端安全属于第三优先级考察频率较低但一旦被问到就要答得漂亮所以时间充裕时可以捡起来。还有一个特别的提分点有赞对候选人是否了解业务很在意。面试前建议研究一下有赞的商家服务中后台产品能说出他们的后台业务形态、面向的商家群体、数据复杂度等在你对我们公司有什么了解这个问题上就能明显加分。5.2 一个可复制的面试模拟训练法最后送你一个我自己用了很多年的备考方法——录音复盘模拟面试。找一块安静的地方把常见面试题都整理成卡片按面试流程给自己模拟一轮全程录音。答完以后回放录音你会发现两个问题一是很多地方答得逻辑混乱二是口头禅多到让你想钻地洞。用两到三周时间每次模拟面试控制在 40 分钟内然后花 20 分钟复盘录音把回答得不好的题目重新组织语言再模拟一轮。这个方法比单纯背题效率高很多因为面感是练出来的不是背出来的。我在带教的时候发现绝大多数最后顺利拿到 offer 的候选人都至少认真做过三轮这种模拟训练。根据我个人的经验面试前端岗位最核心的竞争力不是刷了多少题而是你能否用自己的语言把每一个技术点讲得让面试官点头。八股文背熟是基础真正的加分项是你对原理的理解深度、面对追问时的从容态度以及把知识落地到实际项目里的能力。这套整理下来的备考思路希望你能认真用起来。