2026年3月5日春招和跳槽季正好撞在同一条时间线上。白天投简历、约面试晚上回来复盘我把这两个月里所有前端面试遇到的问题、答得不好的地方、以及后来补齐的知识点整理成了一份笔记。这份笔记不是什么“标准答案合集”更像一段真实的准备过程记录简历打磨、基础复习、框架原理、场景题手写、项目追问、HR面每一条都配了具体例子和回放。如果你正在准备前端面试或者想系统梳理一遍自己的知识盲区这份笔记可以直接拿来当路线图用。1. 面试前的准备简历、知识地图和项目复盘一个都不能少1.1 简历不是技能堆砌而是“量化结果”我见过太多简历一列就是十几个技术名词Vue、React、Webpack、Vite、Node、小程序、Flutter……看起来什么都会但面试官扫一眼就知道没有重点。真正能约到面的简历是每个项目都能说清楚三件事我解决了什么问题、我用了什么方案、最终结果是什么。拿“优化首屏加载”来说这种描述太虚了。改成“通过路由懒加载、图片压缩和接口并行请求把首屏时间从2.3s降到1.2sLCP下降48%”信息密度完全不同。写“封装了通用组件库”不如说“基于业务沉淀了12个通用组件复用率超过60%新页面开发时长缩短约30%”。面试官看简历时其实在找“这个人有没有结果意识”而不是在数你会几个框架。我自己的做法是给每个项目准备两张卡片。第一张写项目背景和我的角色第二张写“亮点、难点、遗憾”三个词。亮点是技术上的得意之处难点是卡住我好几天的问题遗憾是当时没做好的设计。后来面试时绝大部分项目追问都逃不出这三类问题。原简历描述问题改写后负责公司前端开发没有信息量看不出个人贡献独立负责3个业务模块的前端架构与交付主导升级Vue3并沉淀公共组件库优化了页面性能缺少量化无法感知效果首屏时间从2.3s优化到1.2sLCP下降48%核心页面留存提升约10%熟悉微前端罗列名词没有深度基于qiankun完成3个子应用的业务隔离与渐进式迁移解决公共依赖和路由冲突问题纯前端、纯静态的项目如果想展示给面试官看也可以用GitHub Pages、Vercel、Netlify这类免费托管平台快速部署上线。面试前能拿出几个线上可访问的demo比口头说得再好都管用。1.2 知识地图怎么画按“高频、中频、低频”排优先级前端面试范围太广全铺开复习基本不现实。我按出现频率把考点分成了三档这样至少能保证投入产出比。优先级考点范围准备深度高频事件循环、闭包、原型链、深拷贝、防抖节流、Promise、浏览器缓存、HTTP状态码、Vue响应式原理、组件通信、Webpack打包流程脱稿讲十分钟以上能现场手写核心代码中频性能优化、前端安全、微前端、移动端适配、SSR、TypeScript进阶、CI/CD、Monorepo能讲清原理能配合项目经历举例低频WebGL、音视频、跨端框架、WebAssembly、AI辅助开发了解基本概念遇到不会的坦诚承认并尝试推理高频考点几乎每轮必出现必须达到“能脱稿讲十分钟”的程度。中频考点视公司和岗位而定面试官往往会从简历里挑一两个深挖所以简历里写到的技术一定要准备到“能讲清原理”的深度。低频考点属于加分项答出来是惊喜答不上来也不致命。今年我明显感觉到AI相关的问题变多了面试官会问“你用没用过AI编程工具”“AI生成的代码你怎么保证质量”。这种问题没有标准答案但能看出一个人的学习习惯。我提前准备了一个真实的使用案例用AI辅助生成列表页模板但必须自己把边界条件补全再让同事做code review。如果是刚入门的前端学习路线大体是HTML/CSS基础 → JavaScript核心 → 框架 → 工程化 → 项目实战 → 性能与安全。按这条线走基本能覆盖90%的面试场景。1.3 项目复盘比背八股文更重要的准备很多人花大量时间背面试题却对自己做过的项目讲不清楚。其实面试官最想听的是你有没有独立解决问题的能力。我给每个项目都准备了“STAR”式描述背景、任务、行动、结果。更重要的是每个项目都要准备一个“如果重做一次哪里会改”的回答。比如我之前做过一个中后台系统当时直接用表格渲染几千行数据页面卡得不行。后来做了虚拟滚动才解决。复盘时我会主动说“如果重来我会在设计阶段就确认数据量级提前用虚拟列表而不是等用户反馈后才去优化。”这句话比背十道面试题都管用因为它展示了你具备“设计期预判问题”的思维。项目复盘还有一个小技巧列出每个项目里的“反差点”。所谓的反差点就是“常规方案大家都会但你在某个环节做了不同的选择”。比如同样是excel导入导出别人用前端插件直接处理你在数据量大的场景下改成了服务端解析再比如同样是图片上传别人直接丢给OSS你在大图场景下加了压缩和分片。这些反差点就是面试官记忆最深刻的地方。2. 基础考点没有“过时”一说HTML/CSS/JS怎么答才不吃亏2.1 浏览器与HTML渲染流程、回流重绘、验证码输入框只要面前端渲染流程就是必问的。回答时可以按这个顺序展开从输入URL开始DNS解析、建立TCP连接、HTTP请求、拿到HTML后构建DOM树、解析CSS构建CSSOM、两者合并成渲染树、布局、绘制、合成。中间可以插入“回流和重绘的区别”以及什么属性会影响渲染性能。这里有个小技巧回答时把“减少回流”落到具体操作上比如批量修改DOM、使用transform代替top/left、读写分离避免强制同步布局。面试官想听的不只是名词解释而是你确实用它解决过问题。哪怕只是说“列表滚动时用requestAnimationFrame控制位置更新”也比你干巴巴背出“回流会引起重绘”强得多。HTML部分还有一个容易翻车的交互题“验证码输入框怎么实现”。看似简单但涉及光标管理、粘贴事件、自动跳下一格、删除回退。常见方案是用一个隐藏input接收真实输入再用N个div显示每个字符粘贴时用ClipboardEvent拿到整段验证码后拆分填充。回答时如果能提到“移动端需要处理数字键盘”和“无障碍读屏”基本就是加分项。2.2 CSS从两栏布局说到Container QueriesCSS看起来是面试里最简单的一环但想答出层次也不容易。两栏布局大家都背过Flex、Grid、浮动加BFC、绝对定位。我在面试里会补充说明每种方案的适用场景——比如浮动布局现在已经很少用因为浮动容易引发父元素高度塌陷还要花心思清理浮动Flex是日常首选一行代码解决侧轴对齐Grid更适合整体页面骨架。2026年面试里容器查询Container Queries出现频率明显上升。以前做响应式只能监听视口容器查询可以监听父容器尺寸。我说“当卡片组件放在侧边栏和主内容区时能根据容器宽度自动调整图文排版”面试官一般就会点头。能答到这个层面说明你紧跟CSS版本演进而不是只写样式不关心规范变化。CSS还有一个经典考点层叠上下文。很多人只知道z-index越大越靠前但真正理解“层叠上下文”的人不多。我会用一句话总结position z-index、transform、opacity、filter这些属性都会创建新的层叠上下文给元素加transform可能影响它在页面里的层叠顺序。分析这类问题很训练前端基本功。2.3 JavaScript事件循环、闭包、深拷贝的“递进式回答”事件循环是前端面试的“钉子户”。基础答法是宏任务、微任务、执行栈、任务队列再配合setTimeout和Promise的执行顺序。想答得更好可以补充浏览器渲染时机微任务在每一帧前清空requestAnimationFrame在渲染前执行requestIdleCallback在空闲时间执行。能说到这一层说明你不是背题而是真的理解“JS线程和渲染线程的协作关系”。闭包也是万年考点。除了“函数嵌套函数、内部函数引用外部变量”这种定义我会主动讲到内存泄漏场景比如在事件监听回调里引用了大对象解除监听不及时就会导致GC无法回收。再补一个实际例子给列表绑定点击事件拿到索引用let声明变量或者用闭包保存索引这也是经典的“闭包陷阱”题目。深拷贝同样建议用递进式回答。第一步说清楚JSON.stringify的局限丢函数、丢undefined、丢Symbol、循环引用直接报错第二步写递归版本处理数组和对象并解决循环引用用WeakMap第三步处理Map、Set、Date、RegExp这些特殊类型第四步提“如何用结构化克隆算法structuredClone快速实现大部分场景以及它的边界”。从第一步到第四步面试官能直观看到你对边界问题的敏感度这比背出完整代码重要得多。3. 框架与工程化Vue、微前端、构建工具的真实问法3.1 Vue3 vs React对比题不要背八股这道题几乎必被问到但背结论很危险。我会从三个维度现场组织回答数据驱动方式、更新机制、生态与业务场景。Vue3的响应式是基于Proxy的依赖追踪粒度更细日常开发里ref和reactive的分工清晰React是单向数据流加上不可变数据状态变化靠组件重新渲染。Vue3的computed和React的useMemo都有缓存但前者基于依赖追踪后者需要你手动声明依赖数组。讲到这里面试官通常会追问“既然Vue3自动追踪依赖那React为什么要手动声明依赖”这个问题其实是想考察你对Hooks闭包陷阱的理解——useMemo写错依赖拿到的就是旧值这是React函数式渲染模型下的必然产物。对比维度Vue3React数据驱动基于Proxy的依赖追踪自动收集更新单向数据流setState触发re-render缓存方案computed自动追踪依赖useMemo手动声明依赖数组模板与JSX模板语法指令丰富JSX更灵活逻辑与UI同层适用场景中后台、模板化团队开发大型应用、精细控制渲染流程回答的收尾我会落到选型上中后台项目、团队以模板开发为主Vue生态更省心跨端、大型应用、需要精细控制渲染流程React的可组合性更强。有业务场景支撑的对比比念PPT式回答高级得多。如果被问到Flutter和其他前端框架的优缺点核心其实是“跨端技术的选型逻辑”。Flutter用自绘引擎保证UI一致性但包体积偏大和前端技术栈的互通成本也高RN和uni-app本质上是JS驱动原生组件。回答这类问题的关键是不要陷入技术之争要说清楚什么场景选什么方案。3.2 微前端qiankun的原理要讲到什么深度简历里写了微前端就要准备好被连环追问。qiankun核心要讲清楚三件事HTML Entry、JS沙箱、样式隔离。HTML Entry的意思是主应用通过fetch拿到子应用的HTML字符串解析出其中的script和style后动态执行。JS沙箱是qiankun的重点老版本用Proxy给子应用创建一个伪造的window对象把document、location等全局属性代理进去子应用访问全局变量时命中沙箱避免污染主应用。如果面试官继续问“那么模块加载之后子应用如何卸载干净”可以答沙箱会在应用切换后回收事件监听需要子应用在生命周期里自己清理。样式隔离方面虽然qiankun给子应用根节点加了前缀但碰到第三方组件的内联样式、动态插入的style标签还是会有漏网之鱼。我面试时主动说“样式隔离做不到100%所以子应用内部要约定禁止写全局样式”反而让面试官觉得你有实战经验而不是背文档。最后补一句适用场景微前端解决的是多团队、多技术栈、渐进式迁移的问题单应用单团队根本不需要用。微前端还有一个容易被追问的点子应用之间怎么通信。我的回答是不要滥用全局状态优先用URL参数传递核心信息需要共享登录态就统一放在主应用通过props注入复杂的跨应用状态尽量收敛到eventBus或者发布订阅里但一定要有明确的命名规范和数据清理机制。3.3 构建与发布Webpack、Vite、版本号强制刷新构建工具的题也常出现。Webpack要能说清打包流程入口、依赖解析、loader转换、plugin扩展、代码分割、产物输出。Vite要能说清开发期为什么快基于ESM的按需编译不用打包整个项目生产环境用Rollup打包。面试时我一般会主动讲“Vite开发快但首屏慢因为依赖预构建和浏览器请求数”显示我不只会喊口号。还有一个实战问题容易被忽视“通过版本号的变更让前端强制刷新页面”。这个需求很常见方案是构建时生成一个版本号文件前端启动时请求这个文件并对比本地缓存的版本号不一致就弹窗提示用户刷新。这个方案虽然简单但能覆盖静态资源缓存更新不及时的核心场景。我贴一个简化实现// 构建脚本中生成 version.json // { version: 20260305-001 } async function checkUpdate() { const res await fetch(/version.json?t${Date.now()}); const remote await res.json(); const local localStorage.getItem(app_version); if (local local ! remote.version) { // 提示用户刷新清除旧缓存 localStorage.clear(); window.location.reload(); } localStorage.setItem(app_version, remote.version); }这道题的关键点在于版本文件本身不能被缓存所以请求时要加时间戳参数。能说出这个细节说明你真的在线上环境踩过坑。另一个细节是这个检查要放在应用入口的最前面而且不能阻塞主流程太久最好做成异步检查、同步提示别让用户等一个接口响应才能进页面。4. 高频场景题手写题、大文件上传、前端安全一次说清4.1 手写题的“递进式”解法从深拷贝到防抖节流手写题再常见不过。深拷贝和防抖节流是两大主力。防抖和节流容易搞混我的记忆方法是防抖是“技能冷却后重新计时”适合搜索框输入、窗口resize节流是“固定时间间隔内只执行一次”适合滚动加载、按钮点击限频。手写时先把这种说明带上展示你理解应用场景再开始写代码。防抖的标准写法function debounce(fn, delay 300) { let timer null; return function (...args) { clearTimeout(timer); timer setTimeout(() fn.apply(this, args), delay); }; }写完一定要补一句返回的函数要用箭头函数或者保存this否则事件处理函数里的this会丢失。很多人在白板上写对了框架就栽在这个细节上。还有一点不需要立刻执行的场景用这个版本搜索框就是典型需要第一次点击立即执行、后续等待冷却的要加immediate参数。节流加一个立即执行版本function throttle(fn, interval 300) { let last 0; return function (...args) { const now Date.now(); if (now - last interval) { last now; fn.apply(this, args); } }; }节流的另一个写法是定时器版本两者差异在于“最后一次触发会不会执行”。我在面试时会主动指出“时间戳版本保证每隔固定时间执行一次定时器版本保证停止触发后还会补一次。”能说出这种细节差异面试官就知道你是真练过而不只是背模板。4.2 大文件上传分片、并发、断点续传、Worker“前端使用Worker上传大文件”是这两年新出现的问法。大文件上传的高频方案是将文件切片、并发上传、服务端合并。切片用Blob.prototype.slice断点续传靠计算每个分片的hash服务端记录已接收的分片前端启动时查询“哪些分片已经存在”跳过已上传部分。秒传的做法是计算整个文件的hash服务端发现同名同hash文件已存在就直接返回成功。并发控制是必考点。直接一次性发100个请求会把浏览器和服务端打爆需要实现一个并发池比如限制同时最多5个请求。async function uploadWithConcurrency(tasks, limit 5) { const results []; const queue tasks.slice(); const workers Array.from({ length: limit }, async () { while (queue.length) { const task queue.shift(); results.push(await task()); } }); await Promise.all(workers); return results; }代码不复杂但面试官想看你会不会处理失败重试。可以给每个分片设置最大重试次数失败后重新入队。还有进度显示不能靠单个请求完成回调估算要汇总所有分片的已上传字节数这样才能显示真实的总进度。Worker在这里的价值是计算大文件hash时需要读取整个文件如果在主线程做页面会卡死放在Worker里算hash既能算又不阻塞UI。能从这里说到“分片hash是CPU密集任务应该交给worker”面试官会认为你思考过真实场景而不只是背了分片上传的流程。4.3 前端安全XSS/CSRF之外防爬虫和源码保护的真实边界前端安全被问到的概率越来越高。XSS要答出存储型、反射型、DOM型三种以及对应的防御思路输入过滤、输出编码、CSP白名单。CSRF要答出攻击流程和防御手段SameSite Cookie、Token校验、自定义Header校验。这些都是基础不展开。比较有意思的是“怎么在前端防止爬虫、防止查看页面源码、防止打开”这类问题。先说结论纯前端无法绝对防住只能增加门槛。你能做的包括接口增加签名参数由服务端校验对关键JS逻辑做混淆提高逆向成本页面加验证码、频率限制敏感数据不放在前端静态代码和localStorage里。我见过一些人把精力花在“禁用右键”“禁用查看源码”上这基本是心理安慰。真正有价值的思路是“默认后端才是信任边界”。面试时如果能说出“前端反爬的本质是增加攻击成本而不是杜绝爬虫”证明你懂安全工程的边界感这比堆一堆加密手段高级得多。如果被问到“防止打开页面”我一般会说可以通过登录态校验配合路由守卫实现访问控制但这属于业务权限不是安全防御。5. 项目面试实录直播H5和中后台项目被追问的过程5.1 直播H5项目技术选型和弹幕性能如果你简历里写过直播相关页面那就要准备好被往深里问。很多“直播H5”其实只做了壳子真正的直播流媒体用的是WebRTC或HLS。面试官考的不是你知道多少协议而是做技术选型时有没有考虑延迟、兼容性、成本。我准备了一套自己的回答框架。先说业务形态是秀场直播还是教育直播观众规模多大延迟要求多高。然后说协议选型HLS兼容性好但延迟高适合对实时性要求不高的场景WebRTC延迟低但需要信令服务和SFU服务器如果只是播放别人提供的流可能用flv.js配合HTTP-FLV也能满足需求。最后说前端工程播放器怎么封装、断网重连怎么实现、上线后怎么监控播放失败率。弹幕是另一个高频追问点。几百条弹幕如果用DOM渲染帧率会掉得很厉害。常见的优化方案是把弹幕画在Canvas上或者用CSS的will-change提升为独立图层。还可以提到“弹幕轨道分配算法”比如按高度分轨道、相同轨道内弹幕不重叠。能聊到这个程度面试官基本会确信你做过真的直播页面。还有直播中的IM消息比如聊天室、点赞、礼物消息。这个点可以连着WebSocket一起问。我的回答套路是WebSocket负责长连接心跳检测用定时器断线后指数退避重连消息量大的时候前端要合并渲染比如1秒内的多条点赞消息只更新一个数字。5.2 中后台项目权限、动态表单、ECharts闪烁排查中后台项目是我简历里的主要项目也是面试官最容易追问的一类。权限控制是最常考的点登录后后端返回路由权限表前端动态注册路由按钮级别权限通过指令或自定义函数控制。讲的时候我会复用“人力资源后台管理”这个项目作为例子不同角色看到的菜单和按钮都不一样接口层还要二次校验。动态表单也是亮点。表单配置化之后组件库的价值就体现出来了把日期选择、下拉、级联、上传封装成配置项后端下发JSON前端渲染。我面试时会强调一个坑表单字段之间往往有联动逻辑比如“选了A选项B字段才显示”。这块要在配置协议里提前设计好否则后期全是补丁。还有一个坑是表单校验规则不能全写死在组件里要支持配置式声明否则每接一个业务都要改组件代码。ECharts闪烁的问题是真实遇到的。有一次线上图表在切换Tab后疯狂闪烁查了半天发现是容器宽度在切换时从0变成正常值resize监听事件没有正确销毁导致ECharts实例重复resize。解决方式是统一封装一个图表组件在init时记录实例在beforeDestroy时dispose并确保resize监听器只绑定一次。我把这个案例写进项目复盘里面试官反馈说“这种踩坑细节比背原理更能证明实战能力”。如果项目里还要做长文本预览可以用markdown-it渲染大量文字。这里要关注的是渲染性能几万字的markdown一次性渲染成整个DOM树页面会卡。常见的处理方式是分批渲染、懒渲染或者配合虚拟滚动只渲染可视区域。面试时能主动提到这种问题说明你不是只调过接口、写过页面而是真在性能和体验上花过心思。5.3 被问倒之后诚实、推理、补答案没有人能所有问题都答上来。遇到完全不会的题我的处理方式是承认“这个方向我了解得不多”然后尝试拆解把问题拆成几个子问题说出我能理解的部分再让我不会的地方明确暴露出来。面试官往往会给提示这时候要接住提示继续推理。最怕的是沉默或者不懂装懂绕圈子。有一次面试官问我“Vue2前端怎么获取当前机器的MAC地址”这个问题其实是个陷阱。浏览器出于安全限制JS拿不到客户端的MAC地址除非在ActiveX控件环境下或者通过客户端原生能力中转。我的回答是“前端不允许直接获取MAC这个是浏览器安全模型决定的。如果业务确实需要一般要配合桌面端或者专门开发的插件。”面试官听完点头说“要的就是这个边界感”。面试结束后我习惯把没答上来的题完整记下来当天就把答案补上然后给面试官发一封简短感谢信顺便附上补充后的思路。有几次对方回复“态度很加分”。同样如果面试官问到一个你项目里确实没做过的方案比如“这个项目为什么不用虚拟列表”不要嘴硬说“没必要”可以说“当时数据量还没到那个级别如果后续增长我会用虚拟列表重构”这既诚实又不露怯。6. 现场表达与HR面软实力也是硬通货6.1 写代码前的“讲思路”环节很多人手写题翻车不是代码写得烂而是上来就写写着写着发现自己方案选错了。我现在的习惯是拿到题先花几十秒跟面试官对思路。比如“这个防抖我准备用时间戳记录last时间再配合闭包保存状态您看可以吗”。这既是确认需求也是展示思维过程。面试官大多会表示“可以你写吧”这几十秒不会扣分反而显得稳。写完之后一定要自查两件事边界条件和命名。边界条件比如输入为空、参数类型不合法、数组长度为零命名如果一开始用foo、bar面试体验会很差。用有语义的变量名写完后口头跑一个简单示例比如防抖里“连续点击5次只会执行最后一次”让面试官直观看到你验证过自己的代码。还有一个被忽视的细节写完代码要主动说“这段代码的复杂度是多少”。比如防抖是O(1)深拷贝递归是O(n)并发控制是O(n/limit)。哪怕你只说个大概也在暗示自己具备工程思维而不是刷题机器。6.2 反问环节和HR面避坑清单反问环节不要问“你们加班多吗”这种第一印象不好的问题。可以问团队技术栈、代码审查流程、线上监控体系、前端团队最近在解决什么问题。我一般会问“咱们团队对前端工程质量有哪些硬性要求”这个问题能看出团队是不是认真在做事。HR面问离职原因时统一原则是“说客观原因不说前公司坏话”。可以讲职业发展空间、技术方向调整、通勤距离变化。薪资谈判不要只看数字要把福利、公积金比例、年终奖规则、加班补偿一起算总包。如果对方问“你什么时候能入职”给出一个明确的入职时间比含糊其辞更专业。外包岗面试还有一个特殊点不是所有外包岗位都低人一等但面试时要问清楚项目甲方、技术栈版本、是否有转正机会、是否接触核心业务。技术能力准备可以和自研岗一样认真毕竟面试官考察的还是你的基本功。很多人对外包岗有顾虑但实际里面试流程更看重基础稳不稳常见考点反而更偏向Vue/React、组件通信、浏览器原理这类硬通货。如果被问到“前端开发要不要学Java”这类技术路线问题我的答案一般是前端不是必须学Java但一定要有服务端思维至少能看懂接口设计、理解数据库的基本概念。面试官问这个问题的潜台词往往是“你愿不愿意为业务写一点Node层逻辑”所以回答重点应该放在“我有跨端协作的意愿和能力”上。最后分享一个让我受益很多的小习惯每次面试完当天晚上就把所有问题按“秒答、思考后答出、没答上来、答错”四类归档周末集中补一遍。几轮面试下来你会形成一本自己的错题集后面再面试会越来越稳。面试不是审判而是一次次带着反馈的练习把每一轮都当成查漏补缺的机会最终结果都不会太差。