这几年前端校招面试的卷已经不只是“背题”能应付的了。前阵子有个读者把某家做数字化业务的技术公司前端校招面试题整理发我让我帮忙做一次系统拆解。我本来以为又是个普通的面经汇总结果细看下来发现这套题对基础能力、框架原理、工程化认知都有相当深度的考察非常像一个中型团队当前真实的前端能力基准线。我花了点时间把题目逐类拆开连同自己面试别人的经验一起整理出来正好可以作为校招准备的一份参照。如果你正在准备前端校招或者刚入职不满一年、想系统补一遍基础这篇内容应该能帮你少走不少弯路。我会按前端面试最常见的四大板块来讲每一类都拆清楚考察意图、背后的原理以及什么样的回答能在面试官那里拿到高分。1. 前端校招面试的考察全景与应对思路1.1 一场校招前端面试的典型流程和筛选节奏先说流程。现在大部分中大型公司的前端校招基本都分三到四轮第一轮通常是基础笔试或在线编程题筛掉简历看起来不错但代码基本功不过关的人第二轮技术面会有面试官连续追问JS基础、浏览器机制、框架原理第三轮通常是项目面或综合面重点看你做过的项目、遇到问题后的排查思路第四轮是HR面或Leader面更多看软素质、学习能力和稳定性。这套流程看起来常规但每轮淘汰率都不低。根据我平时面试的经验第一轮笔试能淘汰掉接近一半的人第二轮技术面又要刷掉剩下的大部分。也就是说真正走到最后的往往不是简历上写了多少技术名词而是在基础问题上能经得住连续追问的那批人。1.2 校招和社招面试的核心差异校招面试和社招面试最大的区别在于社招主要看你能不能快速接手业务校招看的是你未来能不能成长起来。所以面试官问校招题的时候通常没那么关注你会不会某个具体库的API更多是看你建模能力和逻辑是否清晰是不是真的理解底层的运行机制遇到没做过的问题时能不能从零开始分析沟通表达能不能把思路完整讲出来。这就决定了准备校招的核心策略不要只背答案要把每个高频问题背后的原理链条打通。比如“防抖节流”这一题如果只是背出代码面试官再追问一句“为什么防抖要按时延执行”很容易哑火。准备工作做深一层面试时会有很明显的优势。2. 基础能力环节决定生死的第一道门槛2.1 JavaScript核心概念从原型链到事件循环这家公司的基础题考察得非常直接基本是校招标配变量提升、闭包、this指向、原型链、事件循环。先说闭包。很多同学喜欢背“函数内部返回一个函数就能访问外层变量”这种定义。但面试官真想听的是你对执行上下文和垃圾回收机制的理解。一个合格的回答应该是“函数定义时会绑定定义时的词法作用域即使外部函数执行完毕内部函数依然保留对外层作用域中变量的引用。如果内部函数被保存下来这层引用关系就不会被释放形成了闭包。也因此闭包用多了会带来额外的内存占据需要谨慎控制生命周期。”这样回答既解释了“是什么”也顺带提到了“代价”面试官很容易高看一眼。再看this指向。这几乎是必考考点而且通常配合箭头函数和普通函数的区别来问。最稳妥的理解方式就一条普通函数的this由调用方式决定箭头函数的this由定义位置决定。举例说明const obj { name: frontend, getName: function() { console.log(this.name); } }; const fn obj.getName; fn(); // undefinedthis指向window这种题答对了不算本事能把“为什么调用方式改变后this会丢失”解释清楚才算过关。核心在于函数体内部的this是在调用时通过执行上下文动态绑定的不是函数声明时就固定的。事件循环这题建议准备一整套回答链路同步代码优先执行遇到微任务Promise.then、MutationObserver会放进微任务队列遇到宏任务setTimeout、setInterval、I/O会放进宏任务队列同步代码执行完毕先清空微任务队列再取一个宏任务执行如此循环。手写代码和说出输出结果一样重要。考察点基础回答及格进阶回答加分闭包函数套函数内层访问外层变量词法作用域引用保留内存代价this谁调用指向谁动态绑定与执行上下文的关系事件循环先微任务后宏任务渲染时机、宏任务嵌套时的队列行为2.2 浏览器与网络知识缓存、渲染机制和跨域这个板块在这套题里比重不低面试官明显想筛掉只写过页面、不关心页面怎么运行的人。浏览器缓存通常从缓存位置和缓存策略两个维度问。静态资源通常会走强缓存Cache-Control配合ETag/Last-Modified做协商缓存。这里要特别注意很多候选人会把304和强缓存搞混。强缓存是浏览器直接从本地读不发请求协商缓存是资源过期后浏览器带着ETag或Last-Modified去问服务器能不能继续用本地缓存服务器返回304才表示可以。我用一句话帮所有来问我的人梳理“强缓存管的是什么时候不用问协商缓存管的是问了之后能不能少传点数据。”这一句话记住缓存相关的追问基本都能兜住。跨域考题也是高频。JSONP、CORS、反向代理这三板斧必须掌握还要能说清楚各自的局限。比如CORS是标准解决方案但复杂请求会触发预检OPTIONS请求JSONP只支持GET请求有安全风险开发环境的代理只在DevServer层面对前端生效线上环境还得靠后端配Header或网关转发。如果面试官追问“为什么会有跨域”要把同源策略保护用户数据安全的初衷讲出来这比背一百个解决方案都更能体现理解深度。2.3 高频手写题防抖、节流与深拷贝几乎每家公司的校招都会让候选人现场手写某类工具函数。这套题里出现了防抖、节流、深拷贝、数组去重、发布订阅。这些东西看似简单写出来不难写得好听却不容易。以下是我个人推荐的标准答案写法// 防抖最后一次触发后延时执行 function debounce(fn, delay 300) { let timer null; return function(...args) { if (timer) clearTimeout(timer); timer setTimeout(() { fn.apply(this, args); }, delay); }; } // 节流固定时间内只执行一次 function throttle(fn, interval 300) { let previous 0; return function(...args) { const now Date.now(); if (now - previous interval) { previous now; fn.apply(this, args); } }; }有几个细节是候选人最容易踩的坑定时器版本节流第一次触发会立即执行最后一次触发会被吞掉fn.apply(this, args)是为了保留调用方上下文很多代码写漏了这块防抖适合输入搜索场景节流适合滚动加载场景如果理解反了在业务落地时会被追问到漏洞。深拷贝这题不建议直接甩JSON快排。JSON.parse(JSON.stringify(obj))有明确的局限性不能拷贝函数、symbol、undefined会丢失循环引用且Date对象会被转成字符串。如果面试官让你手写完整版至少要能写出递归遍历、判断类型、处理数组和对象、用WeakMap缓存已拷贝对象的版本。这个基础代码一定要自己动手敲过几遍不是背下来就行的。3. 框架原理层面从“会用”到“理解机制”3.1 响应式原理Vue与React的设计差异面试题里出现频率很高的是“说说Vue3响应式原理”和“React为什么需要虚拟DOM”。Vue3的响应式可以用一句话概括通过Proxy代理对象的读取和修改操作在读取时收集依赖在修改时触发更新。这里最好还能补充对比Vue2的Object.defineProperty实现Vue2只能拦截已有属性的读写新增属性或删除属性需要用Vue.set/Vue.delete处理数组索引变动也覆盖不全Vue3的Proxy可以拦截更多操作包括has、deleteProperty、in等所以数组和动态新增属性更自然。如果你能继续说下去依赖收集的粒度是组件级别还是属性级别为什么全量重渲染性能吃紧就更容易过关了。React这边常被问“虚拟DOM一定是快的吗”这个题很考验理解。正确答案是虚拟DOM的意义不是比直接操作原生DOM更快而是让框架可以脱离浏览器环境做计算再用diff算法最小化真实DOM操作。在小页面场景下直接改innerHTML可能更快但规模一大虚拟DOM带来的可维护性和跨端能力才是价值所在。把“快”和“可控”分开理解回答会稳很多。3.2 组件通信与状态管理这部分的考察相当务实父子传参、事件总线、Provide/Inject、Pinia/Redux这些都要知道用什么场景。面试官问状态管理的时候听的不是你能背出几个API而是你能不能把事情说清楚“什么情况下需要全局状态”。我一般建议这么回答“状态管理工具本质是解决跨组件共享状态和状态被任意修改这两件事。如果没有数据流约束组件间状态一多就会变成蜘蛛网。引入集中式store之后状态变更路径变清晰配合devtools还能追踪每次修改。”如果候选人能进一步对比Pinia和VuexPinia去掉了mutations天然支持TS友好且每个store是独立模块写起来更清爽。这一下就能体现你是真的用过新东西而不是只看过文档。3.3 框架周边路由模式、生命周期和SSR路由是另一个高频话题。hash模式和history模式的区别不只是“history更美观”这么简单。要能讲出hash依赖浏览器地址栏锚点变化触发hashchange事件不发HTTP请求部署简单兼容老浏览器history依赖HTML5 History API改变路径不刷新页面但刷新页面时如果服务端没做回退会直接404所以history模式必须配合服务端配置Nginx的try_files或同等的路由回退规则。生命周期这块Vue考得最多的是被取代前的选项式生命周期与组合式API中的onMounted、onUnmounted对应关系。要理解为什么清除定时器、解绑全局事件要在卸载阶段做防止旧组件回调污染新页面。如果能补上一句“组合式API把同一段逻辑的相关生命周期聚合在一起更利于复用”基本上就满分了。SSR相关的题目通常是加分项不一定每个候选人都被问到。核心回答点首屏性能和服务端渲染能解决SEO问题但SSR也会带来服务器压力变大、部署更复杂、部分浏览器API不能用等副作用。准备一两个实际的SSR或预渲染案例会很有帮助。4. 工程化与项目面从代码到线上4.1 构建工具与打包机制这个板块在这套题里颇让人眼前一亮。它不直接问“Webpack和Vite哪个好”而是一上来就问“打包后文件过大怎么排查”这是非常有实战指向的问题。正常的排查思路分几步先判断是哪类资源过大。看构建产物里的bundle大小分析图比如Webpack的webpack-bundle-analyzerVite的rollup-plugin-visualizer把第三方库通过splitChunks或manualChunks单独拆包按需加载对图片等静态资源做压缩或迁移CDN并正确配置缓存策略对首屏最大的一块业务代码考虑路由懒加载把首屏体积降下来。顺带要被追问道“Webpack和Vite的原理区别是什么”这题要说清楚Webpack是按模块依赖图来做打包所有模块在开发阶段也要经过打包后浏览器才能运行Vite开发阶段利用ESModule原生解析按需启动服务真正做到秒级冷启动。但Vite在生产环境依然要用Rollup做打包所以它不是完全替代Webpack而是开发体验上的革新。4.2 如何把项目经验讲出层次感项目面往往是应届生最没底的环节。很多人上来就讲“我做了个管理系统用了Vue3和ElementPlus”几分钟就把面试官听困了。一个能让面试官记住的项目讲述结构应该是背景项目给谁用、解决什么痛点我的角色负责哪些模块不是“全程参与”这种含糊话业务复杂度哪个功能最复杂为什么复杂解决方案我做了什么技术选型和架构设计结果和复盘性能提升多少后续发现哪块当时想得不够深。举例做一个大型表格页如果只说“我用虚拟滚动解决了卡顿”没有体现对比数据和实现思路就浪费了一个好的亮点。你可以这样讲“表格查询模块需要支持5万行数据渲染刚开始直接渲染卡顿明显。我改成了虚拟滚动踩坑先计算出可视区域行数用固定行高估算总高度再只渲染可视区上下各若干行做缓冲。改造后白屏耗时从800ms降到了150ms交互滚动也明显顺滑。不过后来发现行高度不固定的时候虚拟滚动会出现跳动我在思考切换成动态行高测量的方案。”这段话里有问题背景、技术方案、结果数据还有后续思考完全符合面试官想听的“项目展示三要素”。项目未必多高大上能讲出深度才是关键。4.3 前端性能优化的标准回答套路性能优化这个必考题建议按标准链路准备首屏阶段资源体积、加载顺序、缓存命中率渲染阶段减少重排重绘、懒加载、虚拟化运行阶段事件处理、状态更新频率、内存释放。不管面试官具体问哪个点都可以说“我把性能优化分成加载性能、渲染性能、运行时性能三个维度”然后分别展开。这个结构本身就能体现系统化的思维方式。具体指标也有必要掌握LCP最大内容绘制反映首屏体验FID首次输入延迟/INP反映交互响应CLS累积布局偏移反映视觉稳定性。这几个指标在项目面里提到会和只会说“加载变快了”的候选人完全拉开差距。5. 算法与手写题速通5.1 校招算法题的常见难度与题型这家公司的算法题大约在LeetCode简单到中等难度之间很少考硬核动态规划但很爱考字符串处理、数组操作、链表和二叉树。最常出现的类型包括数组扁平化并去重实现一个发布订阅器两数之和链表中环检测二叉树层序遍历手写Promise.all或Promise.race。其中发布订阅器这题很有代表性写法很多我建议按最清晰的思路来class EventEmitter { constructor() { this.events {}; } on(name, fn) { if (!this.events[name]) this.events[name] []; this.events[name].push(fn); } emit(name, ...args) { if (!this.events[name]) return; this.events[name].forEach(fn fn(...args)); } off(name, fn) { if (!this.events[name]) return; this.events[name] this.events[name].filter(f f ! fn); } once(name, fn) { const wrap (...args) { fn(...args); this.off(name, wrap); }; this.on(name, wrap); } }面试官如果在写完后续问“能不能考虑重复订阅和取消订阅的边界情况”你只要把once实现中重新调用off这件事讲清楚就能展现出很强的细节意识。5.2 手写代码的三个实战技巧第一先问清约束再动手。比如深拷贝这一题可以反问“需要考虑循环引用吗需要处理Date、RegExp这类特殊对象吗”这会让面试官觉得你不是背题选手。第二不要闷头写边写边讲思路。轮流说“我先定义一个返回值”“这步主要是做类型判断”能让面试过程更像协作而非考核。第三写完一定要自行测试一个边界例子。例如数组去重后用[1, 1, 1, null, undefined, NaN]测试一次看结果是否符合预期。这个自测动作可以挽回很多小疏漏。5.3 一套算法速成路线图如果你目前准备时间有限建议按这个优先级刷题数组/字符串双指针、滑动窗口、哈希表链表反转、删除、合并、环检测二叉树前中后序、层序、最大深度、最近公共祖先手写题防抖节流、深拷贝、发布订阅、Promise相关递归与回溯排列组合、子集、岛屿数量。不需要追求每天刷一堆新题关键是把每种模板练到能默写。命题人从来不会直接考“模板”但你的模板熟练度决定了遇到变形题时的速度和稳定性。6. 常见问题与排查技巧实录6.1 候选人最容易倒下的四个瞬间第一个瞬间眼神飘忽地背概念。面试官只要追问一个“为什么”很多背答案的人会立刻卡住。我遇到过不少简历写得天花乱坠但连“事件循环中微任务和宏任务哪个先执行”都讲不清楚的候选人。这种问题在基础面基本是秒淘汰没有补救机会。第二个瞬间代码风格杂乱无章。手写题时会用中文变量名、不写分号、函数命名全是fn1虽然不影响功能正确性但面试官会很担心你进团队后的协作成本。好的代码习惯是平时就养成的不是面试前突击能改过来的。第三个瞬间项目讲得太浅。不停讲“我用了Redis做缓存、用了Nginx做负载均衡”一问到具体怎么配置、缓存命中率多少、有没有做过对比测试就顾左右而言他。这会让面试官对项目真实参与度打个问号。第四个瞬间跳进细节陷阱出不来。面试官问“如果列表有10万条数据怎么办”本意是考察是否了解分页或虚拟滚动但候选人在那里较真“数据是从哪里来的”“后端为什么不分页”白白把机会让给了别人。6.2 面试被问倒之后的正确应对方式在二面和三面里面试官有时会故意给一个超出候选人能力范围的问题想知道的就是你怎么处理未知问题。最优应对方式是先复述问题确认自己理解无误从已知的知识点慢慢推导敢于说“如果是线上环境我会先看监控指标”把思路说出来哪怕结论不一定正确分析框架要比硬猜一个答案可靠。有些候选人一旦发现自己不会马上沉默或叹气这其实非常吃亏。真正能展示潜力的时候恰恰是被问住之后的那几分钟。公司校招看重的不是已经会多少知识而是你是否具备把手头问题拆解清楚、快速学习补齐的能力。6.3 技术面之外的软素质加分项最后这几条看似与代码无关但确实能改变面试官的最终评价主动反馈和确认需求。面试官出一道手写题后先问“这个函数需要通过哪些用例”本身就是团队协作能力的体现。时间意识。两轮面试之间跟进一下反馈不催不闹给到合理预期。诚实。不会的技术点直接说“这里我没有实际应用经验但我理解它是基于XX原理”远比包装自己强。对岗位的稳定性感知。讲职业规划时如果能说“我想在前端工程化方向深入研究”比说“未来想转全栈”要更能让面试官放心。6.4 这套面试题告诉我们的行业信号从这套题目反推现在技术团队对校招生的期望已经不只是“能用框架写页面”而是希望新人具备扎实的底层认知、良好的工程习惯和对未知问题的系统化分析能力。说白了背一百道面试题不如清理一个真实线上问题。如果时间允许最好的准备方式就是自己从零搭建一个小型项目经历数据请求、状态管理、性能优化、打包配置这一条完整链路。面试时把这些真实经验讲出来比任何培训班的“标准答案”都有说服力。我自己在评估候选人的时候最在意的从来不是答案本身而是候选人听到问题后眼睛亮起来的那一下——那意味着他真的对前端有好奇心。保持这份好奇心比刷完一千道题重要得多。