去年年底面完小米前端社招最后顺利拿到Offer。回酒店当天我就把面试中遇到的题目全部复盘记录了一遍因为每一轮面试结束我都有个习惯——趁记忆还热把没答好的点、面试官追问的方向、以及自己当时的回答全部写下来。今天这篇就是整理后的完整版2025年小米前端高频面试题从一面到HR面从基础八股到工程化架构从手写代码到业务场景全部覆盖。如果你正在准备大厂前端面试或者想知道小米这种体量的公司前端到底在考什么这篇内容能帮你少走很多弯路。我拆解每一类题目的考察意图、常见追问方式以及复盘后我认为更优的回答思路。注意我给的不仅是题目和答案更多是为什么面试官要这样问以及怎样答才能超出预期。1. 先看全局2025年小米前端面试的流程轮次与考察重心1.1 一面基础不是背八股是在追问链里看深度小米前端一面通常由未来同事或直属leader主持时长大概40到60分钟。考点覆盖JS核心、浏览器机制、网络基础、框架原理以及1到2道手写代码题。很多人以为一面就是背八股实际上完全不是。我经历的考察方式很少是你说一下闭包是什么这种开放式提问更多是面试官抛出一个结论然后顺着结论往下追问为什么还有呢如果换个场景还成立吗。比如闭包、原型链、this指向单独拿出来都不难但一旦串上执行上下文、作用域链、垃圾回收机制很多人就开始卡壳。所以准备一面基础题时不要背概念而是要把每个知识点串成一条原理链条。以闭包为例你的脑子里的知识结构应该是执行上下文 - 词法作用域 - 闭包的创建时机 - 闭包引用的变量存储位置 - 垃圾回收对闭包的影响 - 内存泄漏场景 - 工程中的应用。这样才扛得住连环追问。1.2 二面以项目为导向的综合深挖这一轮决定Offer层级二面更偏工程化和项目时长通常在60到90分钟。面试官会深挖你简历里写的某个项目从技术选型、架构设计、性能指标、踩过的坑逐一追问。同时也会涉及工程化话题比如构建工具、CI/CD、依赖管理、组件库设计、微前端、监控体系等。我二面时被追问最多的不是你做了什么而是当时为什么这么做换一个方案行不行上线后怎么验证效果。这其实是大厂面试里很核心的考察逻辑判断你是一个只知道写代码的执行者还是一个会做技术决策的工程师。这个阶段建议提前做一次完整的项目复盘把每一个技术选型都问一遍自己为什么。比如为什么用Vite不用Webpack为什么用Pinia不用Vuex为什么做组件拆分性能优化前后指标变化多少这些问题每个都要能给出有数据支撑的答案。1.3 三面与HR面综合判断候选人稳定性和业务视角三面一般由前端负责人或总监进行更多是业务视角和软素质考察你怎么理解前端在业务中的价值、如何处理技术债、如何跨团队协作、对新技术怎么看。这个环节没有标准答案但有一个基本原则不要只站在纯粹的技术角度回答要体现你对业务目标的理解。HR面则关注跳槽动机、稳定性、期望薪资、团队协作风格等。小米的面试节奏通常比较紧凑一面到HR面大概一到两周内完成。如果中间隔了太久没有反馈礼貌问一下面试状态是很正常的事情不用觉得不好意思。2. 高频基础题拆解闭包、事件循环、缓存与框架源码2.1 闭包题从能写出来到能讲清楚内存回收闭包是小米一面几乎必考的基础题但考法比我预想的要深。典型开场题是写一个计数器函数每次调用自增1这题很简单function createCounter() { let count 0; return function () { count; return count; }; } const counter createCounter(); console.log(counter()); // 1 console.log(counter()); // 2但关键的拉开差距部分在追问为什么内层函数能访问外层变量这背后的机制是什么count变量存在哪里栈还是堆闭包里的变量什么时候被回收如果闭包里引用了一个超大的对象会导致内存泄漏吗怎么解决Vue2响应式里每个属性是怎么通过闭包保存依赖的Vue3为什么能改进这些问题如果你能串起来回答说明真的理解了JavaScript的内存模型。我的建议是把执行上下文、作用域链、V8的GC机制、以及WeakMap的作用一并复习。有一个很加分的回答技巧提到引用的变量只要还有函数持有它就留在堆上这个本质比单纯背闭包是函数和其词法作用域的组合要高级得多。2.2 Event Loop一到追问就暴露水平的题另一道高频题是事件循环题目通常是console.log(script start); setTimeout(() console.log(timeout)); Promise.resolve().then(() console.log(promise)); console.log(script end);输出顺序是script start - script end - promise - timeout这是基础。真正的追问在下面宏任务和微任务的本质区别是什么为什么微任务优先级更高每执行完一个宏任务都会清空微任务队列这个队列的具体结构是什么requestAnimationFrame和它们是什么关系浏览器一帧渲染前做了什么Node 11以后的事件循环和浏览器有什么区别process.nextTick什么时候执行为什么Vue的nextTick优先用Promise而不是setTimeout能答到浏览器渲染进程里的任务调度流程这个层面基本就稳了。你需要理解主线程在每一轮事件循环里从任务队列取出一个宏任务执行然后清空所有微任务必要时渲染页面然后进入下一轮。微任务是在当前宏任务执行结束后、渲染之前执行的所以Promise回调天然比setTimeout回调先执行。这道题面试官真正想筛选的是你平时写代码时是否理解异步调用的执行时机而不只是背一道题。2.3 浏览器缓存性能优化题的开场白缓存题在小米面试里的出现频率也很高常见的问法是用户输入URL到页面展示缓存是怎么起作用的这道题要分强缓存和协商缓存两条线回答强缓存Cache-Control、Expires命中时状态码是200from memory cache或from disk cache协商缓存ETag/If-None-Match、Last-Modified/If-Modified-Since命中时返回304但如果停留在200还是304这个层面只能算及格。真正加分的是你能主动提到实际工程里的做法静态资源文件名加contenthashHTML文件不缓存或no-cacheCDN配置回源策略。这样才能保证发新版本后用户能拿到最新的文件同时已缓存的老文件又不会被重复下载。缓存类型关键字段命中状态适用场景强缓存Cache-Control: max-age200 from cache静态资源、图片、字体协商缓存ETag / Last-Modified304HTML、接口数据兜底禁用缓存Cache-Control: no-store每次都重新请求订单信息、用户数据面试官喜欢追问的一个点是如果页面引用了a.js服务端更新了a.js内容但文件名没变用户拿到的是旧的怎么办标准解法是构建时给文件名加hash同时保证HTML文件不做强缓存。能把这个闭环讲清楚这道题就过了。2.4 Vue/React框架题别停留在What的层面小米前端Vue和React都有涉及但面试里Vue的出现频率更高React至少要会基础。高频题目包括Vue2响应式原理与Vue3响应式原理的区别Object.defineProperty vs Proxy为什么Proxy能监听到数组索引变化和属性新增Vue3的ref和reactive的底层实现差异是什么Diff算法Vue2的双端比较、Vue3的快速Diffkey的作用是什么组件通信有哪些方式provide/inject是响应式的吗Vue Router的History模式和Hash模式各自的优缺点Pinia和Vuex的核心区别是什么答框架题的核心原则不要停留在怎么用要理解为什么设计成这样。比如Vue3为什么用Proxy因为Object.defineProperty只能拦截已有属性的get/set数组的push、pop以及动态新增属性都监听不到需要额外的hack方案。而Proxy可以对整个对象做代理天然支持属性新增和数组索引变化而且性能更好。我建议面试前把Vue3的响应式源码完整读一遍至少看懂reactive、effect、track、trigger这条链路。面试时你能从ref底层用了一个类内部通过依赖收集和派发更新这个层面回答就已经超过大多数候选人了。3. 工程化、组件库与微前端拉开差距的高分区3.1 构建工具Vite与Webpack的原理对比工程化是小米二面的重中之重构建工具是必问题。高频问题包括Vite为什么快核心在于开发环境用原生ESM做按需编译启动时不需要打包整个项目只用预构建依赖生产环境则交给Rollup。Webpack的完整构建流程是什么初始化配置、解析入口、构建模块依赖图、loader转换、plugin钩子、输出bundle。Loader和Plugin的区别是什么Loader是文件转换器处理具体文件内容Plugin是构建流程的钩子能介入打包的各个阶段。Tree-shaking的原理是什么依赖ESModule的静态分析能力只打包被真正引用的导出。日常项目里怎么优化构建速度比如用esbuild-loader、开启缓存、code splitting、按需引入。我在面试里讲了一个实际案例项目从Webpack迁移到Vite之后本地开发启动时间从30秒降到了3秒以内热更新基本可以做到毫秒级响应。原因是Vite的ESM按需编译机制决定了它不需要像Webpack那样启动时全量打包。这种有数据、有对比的回答明显比背概念更能打动面试官。顺带说一下pnpm。这道题最近两年出现频率很高因为团队都在做依赖管理优化。pnpm为什么省空间因为它用了符号链接结构同一个版本的包在全局store里只存一份node_modules里的依赖通过硬链接和符号链接指向store。这种结构不仅省磁盘空间还能避免npm和yarn时代的幽灵依赖问题。3.2 业务组件库字典管理、表格、水波纹进度条的设计思路大厂基本都有一套内部组件库面试官会问你怎么设计一个组件或者项目里的某个组件是怎么实现的。这里我重点说说字典管理因为这个词在小米的面试里出现过而且和我实际做的后台项目有很大关系。字典管理是管理后台系统里非常典型的业务抽象。比如订单状态有待支付/已支付/已发货/已完成/已取消这些状态在数据库里可能是数字0、1、2、3、4前端要展示成对应的中文文案。如果每个页面的代码里都硬编码一份枚举映射后续新增状态或者做国际化就得全项目搜索替换维护成本非常高。我当时的设计思路是后端提供统一的字典查询接口按字典code返回映射列表前端封装useDict的hook通过接口拉取字典映射并缓存到内存或localStorage对高频字典做版本号失效机制后端字典变更后前端通过版本号感知并更新封装DictionaryTag、DictSelect等组件业务代码只需要传入字典code就能渲染对应标签或下拉框这样设计之后新增一个状态只需要后端配置增加一条记录前端零改动。面试时把这类从问题到方案的完整链路讲清楚比泛泛而谈组件库提高了开发效率要有说服力得多。表格组件也是一个很好的考察点。一个成熟的表格组件至少要解决列配置驱动、插槽和自定义单元格渲染、拖拽排序、分页、虚拟滚动大数据量时只渲染可视区域、单元格合并等。水波纹进度条则是更有意思的实现题通常考察Canvas或CSS技巧这里放到手写题部分详细展开。3.3 微前端从是什么到你如何选型微前端几乎是大厂架构题的必问方向。题目的前半段通常为什么要微前端答案要落在解决巨石应用协作效率、独立发布、技术栈隔离这几个核心痛点上。后半段则考验你是否有真实的技术判断能力qiankun的原理是什么基于single-spaJS沙箱用Proxy做快照或代理样式隔离用shadow DOM或scoped样式。wujie和qiankun的区别是什么wujie用Web Components加iframe的组合方案天然隔离更彻底。Module Federation是什么Webpack 5原生能力运行时共享模块适合中后台的依赖共享场景。微前端之间的通信方案怎么做全局事件、状态管理、URL参数、自定义事件。微前端适合所有团队吗肯定不是小团队强行上微前端只会增加维护成本。这里有一个很重要的经验不要为了用微前端而用微前端。面试官非常反感候选人把微前端当银弹。最好能结合团队规模、产品形态来说明你选的方案并讲清它的代价。举个例子我当时项目里用的是qiankun主应用负责登录、权限和公共布局子应用按业务线拆分每个子应用可以独立开发部署。但也遇到了不少坑比如子应用之间的跳转、全局样式污染、公共依赖重复加载、沙箱在某些浏览器上的兼容问题。把这些真实经验讲出来比单纯背qiankun的原理要更有说服力。4. 手写题与机试环节大文件上传、Worker与特色组件实现4.1 手写题准备清单与答题节奏小米面试里的手写题不少一面几乎必考两到三道。根据我的复盘和身边朋友的面经高频手写题清单如下防抖debounce和节流throttle——必考且要能说明区别和适用场景深拷贝——要能处理循环引用、Date、RegExp、Symbol、Map、Set手写Promise.all / Promise.race / Promise.allSettled数组去重和扁平化函数柯里化instanceof的实现二分查找、链表反转、快排这些基础算法手写一个简单的EventBus答题节奏建议先和面试官确认输入输出说清楚思路和时间复杂度再动手写。写完主动用测试用例验证边界条件。比如手写深拷贝时面试官一定会追问遇到循环引用怎么办你需要回答用WeakMap存已经拷贝过的对象来打破循环。4.2 大文件上传一道综合了切片、并发、断点续传和Worker的大题大文件上传是这两年大厂场景题的热门方向因为它把JS异步、网络、浏览器API、性能优化全串起来了。小米可能因为业务里有大量视频和文件处理场景面试官对这道题明显有特别的兴趣。完整的大文件上传方案包含这么几个部分第一步切片。用file.slice()把大文件切分成固定大小比如2MB一个这样即使网络差分片失败只需要重传失败的分片不需要整个文件重来。第二步计算文件hash。前端用hash算法比如SparkMD5或hash-wasm计算整个文件的唯一标识发送给后端。后端如果发现这个hash已经存在就直接返回秒传成功不需要真的上传。第三步并发控制。如果几百个分片同时发出去浏览器会把带宽打满反而更慢。所以需要限制并发数比如同时最多2到3个请求。这里可以手写一个简单的调度器用任务队列加并发计数器实现。第四步Web Worker出场。计算大文件hash是比较耗时的操作如果是1GB的文件在主线程算hash页面会明显卡顿。把hash计算放到Web Worker线程里主线程只负责发消息接收结果这样用户操作页面不会卡。第五步断点续传。上传前向后端查询这个文件已经上传了哪些分片跳过已上传的只传缺失分片。这样即使上传中断下次继续不需要从头开始。第六步进度条。用xhr.upload.onprogress或者fetch的ReadableStream统计每个分片的上传进度汇总之后算出整体进度。我给一个简单的并发控制实现async function uploadWithLimit(files, limit 3) { const workers []; const queue [...files]; async function run() { while (queue.length 0) { const file queue.shift(); await uploadFile(file); } } for (let i 0; i Math.min(limit, files.length); i) { workers.push(run()); } await Promise.all(workers); }注意这个实现只是为了展示思路实际项目里还要处理失败重试、取消、任务优先级等逻辑。能把这个完整方案讲清楚面试官会认为你是真正做过复杂前端功能的人而不是只会调接口写页面。4.3 音视频与Canvas题目小米业务特色的代码考察小米有视频、电视、智能硬件等业务所以前端面试偶尔会出现音视频相关题目。我遇到的一道题是怎么实现一个水波纹进度条这是典型的Canvas加动画的考察。水波纹进度条的核心思路是先画一个圆形的进度弧线然后在弧线和圆形边缘之间画一层水波效果。水波的形状可以用正弦曲线来模拟通过不断改变相位角让波纹动起来。大致思路用Canvas绘制底层圆形弧线表示总进度根据当前进度计算水波覆盖的高度用贝塞尔曲线或正弦曲线绘制水波边界通过requestAnimationFrame驱动动画每次更新相位和进度裁剪区域限定在水波覆盖范围内让波纹看起来是灌满的效果另一类音视频题目是前端播放视频相关的比如前端播放视频怎么实现h264视频流前端怎么处理。这类题考察的是你对浏览器媒体能力的了解最简单的是直接用video标签播放浏览器原生支持H.264编码的MP4但是如果需要对视频做帧级处理比如把视频画面放到Canvas上做滤镜、水印、人脸识别就需要把视频逐帧绘制到Canvas如果要解码非浏览器支持的编码格式比如某些监控流的H.264裸流就得上WebCodecs或者WASM编译的ffmpeg.wasmWebCodecs是浏览器原生编解码API性能最好但兼容性有限WASM方案兼容性好但包体大、性能消耗高如果面试时遇到这类题不要慌。核心是展示你理解视频数据怎么通过浏览器API流转可以画一条链路拿到视频源 - 解码 - 获取视频帧 - 绘制到Canvas - 做后续处理。能把这个链路讲清楚就超过大多数候选人了。5. 项目深挖与业务场景题结合小米业务怎么答才有亮点5.1 项目介绍的话术与追问应对项目深挖环节我建议用STAR法则组织背景项目是什么、任务你负责什么、行动具体怎么做、结果量化指标。但很多人只停留在行动这层忽略了结果的量化。例如介绍一个后台管理系统不要说我负责订单管理模块的开发而是说这个系统日活用户约5000人订单数据量达到百万级别原来订单列表页打开要3秒以上。我接手后做了三件事第一用虚拟滚动解决DOM节点过多的问题列表渲染时间从2.8秒降到300毫秒第二把状态枚举硬编码改为字典管理方案新增状态不再需要前端发布第三通过路由懒加载和组件按需引入把首屏包体从1.2MB降到400KB。这段描述里每一项都有 问题 - 方案 - 量化结果面试官根本不需要追问太多因为你已经主动把关键信息全部给了。5.2 字典管理、多端适配这类业务场景题怎么切入如果面试官直接抛一个业务场景题比如后台系统里的字典管理一般有什么作用你需要从表面功能扩展到更深层的设计意图。表面看字典管理就是把0、1、2这样的数字映射成新建、进行中、已完成。但往深了想它其实是一套数据驱动的配置化方案把原本散落在前端代码里的枚举值变成后端配置的数据前端通过组件消费这些配置。这样做的好处包括新增状态不需要改前端代码减少上线次数字典key可以设计成一套通用编码方便做国际化和权限控制同一个业务实体在不同场景可以展示不同文案比如订单在用户端叫已付款在管理端叫已支付字典变更可以留下操作记录顺带满足审计需求多端适配也是小米业务里的常见场景一套业务可能同时存在H5、小程序、App内嵌WebView。回答时可以分几层适配方案rem/vw适配、媒体查询、刘海屏安全区、共享逻辑用uni-app或Taro这类跨端框架或者用monorepo抽公共业务逻辑、各端差异处理小程序没有DOM、Web有完整的浏览器API、WebView要处理JavascriptBridge桥接。5.3 2025年新增的AI工具与开发方式考察2025年的前端面试AI编程工具跟项目结合已经成了一个新方向。面试官可能会问你日常开发中用AI编程工具吗怎么保证生成代码的质量你如何在项目里用好Cursor、CodeBuddy这类工具我的经验是AI工具确实能提效但前提是你得会用。直接让它写一个表单页面通常只能得到demo级别的代码真正有效的方式是给它明确的输入输出边界并限定改动范围。比如可以这样告诉AI现有表单组件在src/components/Form/index.vue请参考其中已有表单的写法新增一个用户信息编辑表单不要修改公共组件和样式文件只新增组件文件和路由配置生成的代码遵守项目里的ESLint规则使用TypeScript类型定义这样做能避免AI生成大量多余代码。面试时如果能讲出我用AI辅助完成了某个真实工程需求并且做了哪些人工审查和调整会是一个很大的加分项。面试官想听的不是AI好用而是你对工程质量的把控能力。前端工程师的核心竞争力本来就不是写代码而是判断什么代码该写、怎么设计才能让系统长期可维护。准备小米前端面试我最深的体会是不要背题要建立原理到场景到取舍的思维方式。面试官每个问题背后都有一个考察目标你要做的是理解那个目标而不是机械地给出标准答案。我面试前两周每天刷一遍手写题周末完整复盘一次项目经历最后一周专门研究小米的业务形态和可能涉及的技术方向。这套题目和思路如果你能消化掉其他大厂的前端面试基本也能从容应对。祝准备面试的同学都能拿到理想的Offer。