2026年初我动了跳槽的念头。5年前端坐标一线城市投了一批简历前前后后加起来大大小小的面试差不多走了30场。有拿offer的也有被挂得莫名其妙气到想摔手机的。这个过程中我把各家面试官爱问的东西反复过了一遍发现这中间有很多共性的东西值得拿出来好好聊一聊。这篇文章就是我的5年前端面经总结。它不打算给你堆一堆能直接背的面试题答案而是要告诉你面试官问这些问题到底在考察什么他们心里期待什么样的回答以及你应该怎么准备才能把这些知识点讲得又深又稳。我尽量把重点放在那些“听起来像八股文但实际上有大实话”的问题上希望对正在准备前端面试、尤其是三五年经验想往上走一步的朋友能有些实实在在的帮助。1. 面试准备的核心思路先搞懂面试官想要什么1.1 五年经验这个坎面试官到底在筛选什么人很多朋友觉得五年经验面试考的东西应该很难、很偏。实际上我面下来的感受是面试官不是要找一个“会背答案的百科全书”而是在找一个能独立扛事、能说清楚为什么、能把项目讲明白的人。三年以内一般问“怎么做”五年一般问“为什么这样做”和“如果重来你会怎么设计”。这个差别特别关键。比如同样问Vue的响应式原理初中级可能只要说出Object.defineProperty和Proxy的区别就够了但五年经验的人会被追问依赖收集的时机是什么计算属性为什么能做到缓存组件更新时怎么避免没必要的重复渲染这些问题背后考察的不是记忆而是你对框架设计思路的理解。另外面试官会特别关注你踩过什么坑。我几乎每轮都被问“你项目中遇到过最难的问题是什么”这个问题的本质不是听你讲技术难点而是看你怎么定位问题、怎么排查、最后怎么解决。这是五年经验的硬通货平时写代码的时候就要养成记录问题、复盘问题的习惯面试前把这些真实案例整理成有头有尾的故事比背一百道题都管用。1.2 复习范围的取舍抓大放小分清主次五年经验面试知识范围确实大但完全没有必要什么都抓。我给自己定了一个复习优先级从高到低依次是项目深挖自己做的项目从架构设计到具体实现每一个技术选型都要有理由每一个性能指标都要有数据支撑。核心原理JS基础闭包、原型链、异步、事件循环、浏览器渲染机制、框架核心原理。工程化与架构构建工具链、微前端、模块联邦、CI/CD流水线、代码规范。性能优化从指标采集到具体优化手段能讲出完整的优化链路。前沿但不冷门比如AI辅助编码工具的使用经验、边缘计算、跨端方案这些可能不考但提一嘴是加分项。算法与手写代码高频题先过一遍比如防抖节流、深拷贝、数组去重、Promise.all之类的。我的建议是把时间的60%花在项目复盘和原理深挖上30%花在工程化和性能优化上10%留给手写题。天天刷那种“古早八股”性价比真的很低五年经验的面试官更在意你能不能说出个所以然来。1.3 有效复盘项目的三步法项目怎么复盘我给你一个我实测很好用的方法。第一步挑2到3个最有代表性的项目不要多贪多嚼不烂。挑的标准是这个项目里有你深度参与的技术决策而不是做了一堆就算。第二步把项目拆解成背景、方案、难点、成果四块每块用一两句话讲清楚。面试官对那种流水账式的项目介绍极其没有耐心他们想听到的是一句话总结“这个项目是做什么的”“我负责了什么”“我用什么方案达成了什么目标”。第三步也是最关键的一步——针对每个技术点预演三轮追问。比如你说了“用虚拟列表优化长列表”面试官可能会追问“虚拟列表为什么能快”“如果高度不固定怎么办”“滚动位置怎么保持”。每个点都问到自己答不上为止然后去补这块知识。这一轮下来你的项目才能扛得住深挖。2. 基础面试题里那些“藏猫腻”的点2.1 闭包、原型链、事件循环人人都问但大多数人答不到点上闭包、原型链、事件循环这三兄弟是前端面试的看家题目几乎场场不落。但同样一道题三年经验和五年经验的答案层次是不一样的。闭包如果只答“函数里返回一个函数能访问外层作用域的变量”这个对五年来说太浅了。更深一点要能讲到闭包与作用域链的关系、闭包带来的内存占用问题、闭包在模块化设计中的应用场景。有一次面试官问我“闭包能模拟私有变量吗它和ES6的#私有字段有什么区别”这个就非常考验理解深度光会背定义肯定不行。事件循环也是一样。基础回答是讲宏任务和微任务的执行顺序但面试官真正想听的是**一个宏任务结束之后是不是所有微任务一定执行完微任务里再派发微任务会不会卡死渲染请求AnimationFrame和事件循环的关系是什么**这些细节你如果平时没有真正研究过临时背是背不下来的。我的建议是别只背定义要动手在控制台里把各种组合跑一遍看输出结果想明白为什么会这样。这个调试过程比背诵有价值得多。2.2 浏览器渲染原理从URL输入到页面展示完整链路怎么说这道题几乎所有公司都会问形式可能是“输入URL回车后发生了什么”或者“浏览器怎么渲染页面的”。关键是回答要有层次。第一层网络层面DNS解析、TCP连接、TLS握手、HTTP请求、响应处理这些要能说得清清楚楚。第二层解析层面HTML怎么构建DOM树、CSS怎么构建CSSOM、两者怎么合成渲染树。这里要注意渲染树不等于DOM树display:none的节点不会进渲染树。第三层布局与绘制Layout回流、Paint绘制、Composite合成这三个操作分别怎么触发、代价多大要能讲出来。第四层也是加分项知道渲染进程和主线程的关系、了解合成器是如何工作的、知道transform和opacity为什么能触发合成而不触发回流。讲这个链路的时候别忘了提阻塞问题CSS会阻塞渲染吗JS会阻塞DOM解析吗defer和async的区别是什么这几个点几乎必考但很多人的理解是片面的。建议你亲手做一个实验页面用performance面板看各个阶段的耗时然后对照着去记忆效果会比死记好很多。2.3 小厂爱问的“八股文”大杂烩哪些该背哪些要理解现在网上有一堆“前端八股文汇总”我看了下质量参差不齐。有些确实是常考的基础但也有很多题目属于“考了也没意义”的。我根据自己的经验把这些题目分了个类一定要理解着记忆的HTTP缓存机制强缓存、协商缓存、跨域解决方案、事件委托、防抖节流、深拷贝、类型判断、New操作符原理、Promise原理、Async/await原理。这些题背后都有完整的设计思路理解了之后可以举一反三。建议背下来但也要能讲清楚背景的TCP三次握手四次挥手、HTTP状态码、常见安全攻击及防御XSS、CSRF、浏览器存储方案对比、前端路由原理。这些是“行业通用语言”你答不上来会显得基本功不扎实但答出来也未必加分属于“默认你要会”的题。可以战略性放弃的某框架特定版本的具体API写法、某构建工具的冷门配置项、古早时期的兼容性写法。这些题目要么太偏要么太旧五年经验面试很少考就算考了你回答“我以前用过但记不太清查文档就行”反而更显得实在。3. 框架原理、工程化与微前端的实战问答3.1 Vue 3和React 18/19原理题怎么答才出彩框架题是重头戏。现在市面上的主流选择大致是Vue阵营和React阵营如果你在主框架之外还了解另一套确实是加分项。让我分别说下两边的高频题。Vue这边最喜欢问的就是响应式原理。Vue 2的Object.defineProperty有什么缺陷Vue 3的Proxy为什么更好ref和reactive的区别是什么computed为什么能缓存watch和computed的区别组件通信有哪些方式等等。回答这些题的时候我建议多讲“设计意图”少背“执行流程”。比如面试官问ref和reactive你不仅要说出“ref处理基础类型reactive处理对象”还要说清楚“ref在底层其实会给基础类型包一层对象所以才能让模板自动追踪依赖”。React这边高频题包括Fiber架构是什么为什么要做时间切片setState是同步还是异步的useEffect的依赖数组原理useMemo和useCallback的适用场景Fiber这块是很多人头疼的难点我建议你用三个层次去理解第一层是为什么需要Fiber——因为React要应对复杂UI下的渲染卡顿需要把渲染任务拆成一个个可中断的小单元。第二层是Fiber是什么——一个保存了组件信息、状态、副作用、以及指向父节点、子节点、兄弟节点指针的普通对象。第三层是一棵树怎么被逐层遍历——从根节点出发结合beginWork和completeWork两个阶段走完整个工作循环。3.2 工程化到底是问什么工程化方向面的范围很广但核心就三五类。第一类是构建工具配置。Webpack的loader和plugin区别是什么、tree-shaking的原理是什么、SplitChunksPlugin怎么配置、Vite为什么快、ESBuild和Rollup各自在Vite里承担什么角色。这些问题你要能讲到配置层面不能只知道名词。第二类是代码规范与协作。这个直接对应了热搜里的“vue前端开发规范”“前端开发规范vue”。面试官会问你在团队里怎么推行代码规范、怎么用ESLint和Prettier保证代码统一、怎么设计Git分支协作流程、怎么处理代码Review。这里有个心得别说“我们用了ESLint”要说出你们怎么把ESLint嵌进提交流程里的比如用huskylint-staged做pre-commit检查这类落地的细节才是面试官想听的。第三类是组件库与设计系统。如果面试官问“前端组件库”你要能讲清楚从零搭建一个组件库需要哪些步骤、怎么设计统一的API风格、怎么处理主题定制、怎么发布和版本管理、怎么写文档和Demo。组件库不一定要做过但架构思路得说得出来。第四类是前端架构设计。包括项目目录怎么组织、状态管理怎么选型、Mock怎么做、接口层怎么封装、错误上报和监控怎么做、灰度发布怎么做。这类问题没有标准答案但一定要有清晰的取舍逻辑。比如我问你“为什么要封装请求层”你不应该只回答“方便统一处理token和错误提示”还应该想到扩展性、取消请求、接口缓存、埋点上报、多环境切换这些层面的东西。3.3 微前端面试中的双刃剑微前端是这几年高频考点尤其是大厂。你简历里如果写了微前端一定要做好被往死里问的准备。我问到过的问题包括qiankun的JS沙箱是怎么实现的样式隔离有哪些方案、各有什么坑微前端之间怎么通信主应用和子应用的生命周期怎么管理module federation和qiankun的区别是什么如何做灰度发布这里我必须提醒大家一个坑微前端听起来高大上但如果你只是“用过”没有真正深入原理面试官一问深就露馅了。比如有人会说“我们用qiankun做了微前端”但问他qiankun加载子应用用的什么、import-html-entry做了什么、proxySandbox和snapshotSandbox有什么区别立刻就没话了。我的建议是如果你在简历里写了微前端请把下面三个底层问题彻底搞明白否则慎写第一子应用怎么被加载进来的HTML Entry和JS Entry的差异动态Script加载的流程第二沙箱是怎么隔离全局变量的为什么需要with语句配合Proxy第三样式隔离为什么天然就很难做干净shadowDOM和scoped css各自有什么问题。3.4 手写题不翻车从实现到优化展示完整思路手写题是很多人的心理阴影但其实它有固定的套路。高频题我帮大家整理一下手写防抖节流但要能实现带leading和trailing选项的完整版本。手写深拷贝要能处理循环引用、Date、RegExp、Map、Set、Symbol。手写Promise.all/race/any关键是异常处理逻辑。手写发布订阅、观察者模式。手写call/apply/bind。手写数组常见方法如map、reduce、filter。手写虚拟列表/瀑布流的核心逻辑。手写useEffect/useState的简化实现这条偏React岗位。手写题的关键不只是写出来而是边写边讲。面试官不是要验收代码而是要看到你在处理边界条件和设计思路时的思考过程。所以哪怕你最后写得不完美只要你每一步都在思考边界情况、提性能优化方向、讲清楚时间复杂度和空间复杂度都很加分。我见过一个候选人写深拷贝代码写了一半但思路讲的极其清晰把循环引用、类型判断、特殊对象的处理全说了一遍面试官当场就给过了。4. 场景题与系统设计题这才是五年经验的决胜局4.1 大文件上传、并发控制的完整设计思路“前端使用worker上传大文件”这个热点我搜到了这确实是一个非常经典的场景题变体面试官往往会这么问“如果让你实现一个断点续传的大文件上传你会怎么设计”一般候选人会回答切片上传、计算hash、并发上传、失败重试这些点都能说到。但深度体现在几个地方切片策略每片多大默认建议1MB到5MB之间主要看网络环境移动端1MB、PC端5MB都不算错要给理由。hash计算全文件hash在计算大文件时很耗时怎么优化常见方案是用抽样hash首中尾各取一部分混合计算做快速判断再在服务端做完整校验。这里也可以引出Worker——把大文件的hash计算放到Web Worker里避免阻塞主线程这就是热搜词“前端使用worker上传大文件”的考点。并发控制不能一次把所有切片全发出去要控制并发数比如5到8个实现一个异步并发池。断点续传怎么知道哪些切片已经传过了前端可以把已传切片列表存在localStorage或IndexedDB也可以在上传前问一下服务端。秒传逻辑整体hash查询能匹配就直接返回上传完成这里的核心是服务端怎么高效比对hash可以考虑布隆过滤器。当你能把这五个环节都展开讲并且给每个环节一个具体方案、解释为什么选它这道题基本就稳了。4.2 长列表、水波纹进度条、表格编辑器常见页面场景的架构方案面试还有一类题是给你一个具体的页面场景让你说实现方案。这类题考察的是实战经验。我遇到的高频场景题有三个跟大家分享一下第一个是“长列表优化”。不要只回答虚拟滚动因为虚拟滚动是基础答案。你没被问到的点还很多滚动条怎么模拟做虚拟滚动时元素高度如果不定怎么办是测量后缓存还是预估后校准列表项里如果有图片图片加载会撑开高度怎么处理数据更新的时候怎么保证滚动位置稳定列表项有焦点和键盘导航时虚拟滚动会不会导致焦点丢失这些问题才是真正拉开差距的地方。第二个是“水波纹进度条”热搜里也有这个。它本质考察的是CSS动画和Canvas/WebGL的知识边界。水波纹效果既可以用CSS的关键帧配合径向渐变实现也可以用Canvas逐帧绘制波动曲线。面试官更想听到的可能是你对性能的理解CSS动画走合成器线程开销更小Canvas绘制灵活但容易造成主线程负担那么你要怎么平衡。如果你能提到用requestAnimationFrame结合Canvas重绘并把绘制区域限制在一个小矩形内做个遮罩那就是一个很实际的优化思路。第三个是“富文本编辑器或表格编辑器”比如“前端怎么使用onlyoffice”这个热搜词背后就是一个办公套件集成场景。这种题一般不会让你现场写代码而是问你选型思路自研还是集成开源如果集成OnlyOffice或类似套件部署方案、权限对接、文档类型兼容、多人协同冲突解决都需要怎么考虑。这些题考的不是某个具体API而是你面对一个边界很模糊的需求时拆解问题的能力。4.3 如果让你设计一个前端基础平台你会怎么做这类题一般来自终面或架构面可能叫“设计题”也可能叫“开放题”。面试官说“假设我们要做一个公司级的前端基础平台包含组件库、脚手架、低代码配置平台、埋点监控系统你怎么规划”我看到很多人面对这种题容易紧张总觉得要给出一个特别完整的PPT级别方案。其实面试官想考察的只有三件事第一你有没有全局视角——知道一个前端基础设施体系里应该有哪些模块第二你有没有排优先级的能力——在资源有限的情况下先做哪个后做哪个为什么第三你有没有风险意识——哪些是技术难点哪些是落地阻力这些你想过没有。我的回答思路是可以按三个阶段讲。阶段一搭基座先确定技术栈和规范、建私有npm仓库、把组件库和公共hooks沉淀出来、搭好脚手架目标是让团队能在一个统一的工程体系里写代码。阶段二提效能引入低代码或可视化配置能力把重复的后台管理页面用配置生成同时做一套埋点和错误监控系统让线上状态可观测。阶段三做生态开放插件机制支持业务团队自己接入和扩展做一个统一的上线和灰度发布流程。每个阶段讲清楚前置条件、交付物和衡量指标这就已经是一个很完整的架构思考了。4.4 前端AI化从工具到落地场景2026年面试AI工具的使用经验是一个绕不开的加分项。像CodeBuddy、Cursor这些AI辅助开发工具几乎已经成了日常标配面试官会问你怎么用AI提效甚至会有“用AI实现XX功能”的机试题。这部分我的建议是别光说“我用AI写代码”要量化地说出AI在你的工作流里做了什么。比如你可以说“我在项目里用CodeBuddy把重复的CRUD页面模板、通用组件生成和单测代码都自动化了大概能节省我三到四成的机械编码时间让我把精力放在架构和难点上。”还有一个很实用的经验给AI下指令的时候要写清楚输入输出结构、边界条件和代码风格要求否则AI生成的代码你需要花大量时间返工。这个点上能聊出方法论面试官会觉得你是真的在实践AI辅助开发而不是凑热点。5. 面试过程中的血泪教训与避坑指南5.1 我踩过的三个大坑希望你别再踩第一个坑是过度背题。我面过一个人项目讲得磕磕绊绊但背八股文特别流利。结果面试官把他的回答往深问了一层立刻卡壳。这给面试官的印象就是“应试型选手没有真正的实战深度”。面试本质上是一个交流场景比起完美的答案面试官更在意你是不是真的懂。所以准备的时候千万别光背题面一定要自己用白话把每个原理讲一遍能讲给3岁小孩听才算真懂。第二个坑是项目介绍没有峰值。很多人介绍项目是平铺直叙的“去年我们做了一个后台管理系统有订单管理、商品管理、权限管理我负责前端。”这种介绍毫无记忆点。正确的方式应该是先说结果“这个系统支撑了公司日均百万级的订单峰值首屏加载从最初的3.2秒优化到1.1秒前端稳定性从99.2%提升到99.95%。”数字是最有冲击力的先用结果给面试官一个锚点然后再讲细节。第三个坑是不会说“我不知道”。面试遇到不会的问题太正常了但不要假装会。有一次我被问到WebGPU的具体API我当时确实不了解这个就如实说了“这一块我没有深入了解过简单说下我的认知可能不够准确”——然后我从比较底层能聊到的部分说了一点思路。面试官反而觉得这个状态很好。比硬编一个答案好太多了。5.2 机试题到底怎么准备有哪些常见题型2026年的前端面试机试还是很大概率出现。除了“登录表单接口请求列表渲染”这种传统的业务机试我预判今年会更倾向于这几个方向一是组件封装题给你接口文档让你实现一个可复用的表格组件支持筛选、排序、分页、多选。这种题重点看组件设计的扩展性不是看能不能跑。 二是性能优化题给你一个现成的页面可能有几十个图片、大量DOM节点、频繁更新的状态让你优化首屏性能。需要现场分析、现场改代码。 三是算法与业务结合题比如实现一个带并发控制的请求函数、实现一个LRU缓存、实现一个简单的虚拟列表。 四是AI辅助开发题给出需求描述允许使用AI工具辅助实现最终提交成品。这种题考察的是你“驱动AI”的能力以及评估AI产出代码的能力。准备机试的时候我建议把你常用的组件封装成自己的“轮子库”比如请求封装、表格组件、表单组件、上传组件。机试时间有限能把基础轮子快速组合出来你就赢了一半了。5.3 谈薪与Offer选择技术面之外的博弈面了30场、拿了几个offer之后你会发现技术面试只是第一步后面的谈薪和选offer同样重要。这里有几个血泪教训分享给大家。第一薪资涨幅要和“市场行情你当前薪资水平”挂钩。2026年头部公司前端岗位的薪资水平比前两年稳定了不少但如果你是从中小厂往大厂跳30%到50%的涨幅还是一个合理的预期范围。面得好的话可以争取更高但不要漫天要价否则offer可能在谈薪阶段谈崩。第二除了薪资要谈股票/期权、签字费、住房补贴、试用期薪资比例、年终奖基数也要问清楚。我朋友就吃过一个亏口头谈好的是总包但实际签约时发现年终奖是有绩效系数打折的总包直接缩水了20%。所以能写进合同都不要靠口头承诺。第三选offer的时候不要只看薪资。交通时间、团队技术氛围、业务稳定性、直属Leader的风格都非常影响你一年后的状态。技术上成长快的团队有时候比一年多出几万块更重要。我把薪资放在最后一位来比较因为如果你能在团队里成长下一份工作的薪资涨幅远大于这一点差距。6. 面经高频题目速查表为了让大家复习更方便我把面试中问到我频率最高的题目整理成了表格。这些不是全部考点但能覆盖很大一部分核心场景。类别高频题目核心考察点JS基础闭包是什么闭包会造成什么问题作用域链、内存、模块模式JS基础事件循环的执行机制宏任务、微任务、渲染时机JS基础手写深拷贝循环引用、特殊类型、数据不可变浏览器从URL输入到页面展示的过程网络、解析、渲染、合成链路浏览器浏览器缓存机制强缓存、协商缓存、启发式缓存浏览器回流和重绘的区别Layout、Paint、触发机制网络跨域是什么怎么解决CORS、JSONP、代理、postMessage网络HTTPS和HTTP的区别TLS握手、证书、对称非对称加密安全XSS和CSRF的原理与防御输入过滤、CSP、token同源检测VueVue3响应式原理Proxy、依赖收集、computed缓存Vue组件通信方式props、emit、provide/inject、状态库ReactFiber架构解决了什么时间切片、可中断渲染、并发特性ReactsetState执行机制批量更新、异步和同步的边界工程化Webpack构建流程loader、plugin、编译流程工程化Vite为什么快原生ESM、依赖预构建、缓存微前端qiankun沙箱原理JS沙箱、样式隔离、生命周期性能首屏优化手段资源压缩、懒加载、CDN、骨架屏架构大文件上传/断点续传切片、hash、并发控制、秒传架构前端基础平台设计组件库、脚手架、监控、低代码场景长列表性能优化虚拟列表、动态高度、滚动锚定这个表可以从头到尾过一遍能自己把每个条目讲出一段完整逻辑面试的基本盘就稳了。不要只背表格里的词要把每个条目当成一个“讲述任务”用大白话加案例让一个不懂前端的人也能听懂才算过关。7. 面试心态与临场发挥的几点私藏心得技术准备得再充分心态崩了照样发挥不出来。面试到后期我明显感觉到自己整个人的状态对结果的影响甚至比技术范围大得多。首先把面试当成一次技术交流而不是考试。你是在和你的同行聊天你不是在被审判。我面到最后几场心态上已经完全放松了遇到不会的技术直接说“这个方向我没深入研究过不过我的理解是……”面试官不但没有给差评反而觉得这个沟通方式真诚又专业。其次要学会带着面试官走。你完全可以在介绍项目的过程中主动抛出你擅长的技术点引导面试官往你准备充足的方向提问。比如你说“这个项目里我们用Web Worker解决了大数据量计算阻塞主线程的问题”面试官大概率会顺着问你Web Worker的原理这比随机抽题舒服多了。这是一种可以事先设计的节奏控制。再者代码题卡住了不要慌、不要沉默。在写不出来的时候更要保持交流。说说你现在在想什么、你卡在哪个点、你有什么备选方案这些信息比最终代码值钱得多。面试官最怕的不是你不会而是你闷头写了半天不吭声最后交出一坨连自己都没跑过的代码。最后面试其实是一个双向选择的过程。你也在面试这家公司、这个团队、这个Leader。多问技术栈、团队协作方式、项目情况、技术氛围这些问题不仅帮你收集信息还会让面试官觉得你对自己的职业发展负责任。我面到最后一个经验是如果面试过程让你觉得舒服、有挑战又有收获那这个团队大概率靠谱如果面完你感觉对方全程都在敷衍、提问毫无逻辑那即使发了offer你也要三思。从准备、实战到复盘这30场面试走下来我最大的感受是五年经验只是一个虚的标签真正让你值钱的是你对自己做的每一个技术决策的深度理解。面试官不傻你到底是真懂还是背的几轮追问就能聊出底细。所以与其花时间去找“标准答案”不如踏踏实实把自己做过的项目、写过的代码、踩过的坑全部重新过一遍想明白每一个环节的为什么。当你做到这个程度写不写在简历上都会发光。