微软前端 一面二面三面面经
2026-10-25 17:12:17
- 自我介绍与项目相关：面试开场通常会要求自我介绍，重点在于清晰阐述个人技术栈、项目经历及在项目中的角色与贡献。项目相关问题会深入挖掘技术细节，例如项目架构设计、遇到的技术难题及解决方案等，以此考察实际项目能力与问题解决能力。
- 深浅拷贝理解：
浅拷贝：只复制对象的第一层属性，若属性为引用类型，复制的仍是引用地址，新旧对象会共享该引用类型数据。实现方式有Object.assign({}, obj)、展开运算符{...obj}等。
深拷贝：递归复制对象的所有层级属性，新旧对象完全独立。可通过JSON.parse(JSON.stringify(obj))（存在局限性，无法处理函数、Symbol等特殊类型）或递归实现自定义深拷贝函数。
- 手写事件循环输出题：考察对JavaScript事件循环机制的理解，包括宏任务（如setTimeout、setInterval、I/O操作）和微任务（如Promise.then、MutationObserver）的执行顺序。需准确写出代码在不同任务调度下的输出结果。
- 节流防抖场景与手写：
节流（throttle）：规定在一个单位时间内，只能触发一次函数执行。适用于如滚动事件、窗口调整等高频触发场景，减少不必要的计算。
防抖（debounce）：触发事件后，在n秒内函数只能执行一次，若在n秒内又触发了事件，则重新计算函数执行时间。适用于搜索框输入联想等场景，避免频繁请求。
- SSR相关：服务端渲染（Server-Side Rendering），将组件在服务器端渲染成HTML字符串，直接发送到浏览器，提高首屏加载速度和SEO优化。需了解其原理、优势及与客户端渲染（CSR）的对比。
- React18新特性：
自动批处理：减少不必要的渲染，提高性能。
新的API：如startTransition，用于区分紧急和非紧急更新，避免界面卡顿。
并发渲染：允许React同时准备多个版本的UI，根据优先级进行渲染。
- Hook在判断条件中执行问题：Hook不能在判断条件、循环或嵌套函数中执行，因为React依赖调用顺序在每次渲染时保持一致，否则会导致状态混乱。
- 副作用函数与普通event区别：
副作用函数：如useEffect，用于处理组件渲染后的副作用操作，如数据获取、订阅等，可指定依赖项控制执行时机。
普通event：用于处理用户交互事件，如点击、输入等，与组件渲染无直接关联。
- Vue响应式原理：通过Object.defineProperty（Vue2）或Proxy（Vue3）劫持数据变化，当数据变化时，通知依赖该数据的组件进行更新。
- 手写reactive：实现一个简单的响应式函数，使用Proxy或Object.defineProperty对对象属性进行劫持，在属性访问和修改时触发相应操作。
- Diff原理：React和Vue都采用虚拟DOM的Diff算法，通过对比新旧虚拟DOM树的差异，最小化更新真实DOM。React采用同级比较策略，Vue采用双端比较策略。
- 双向链表：一种链表结构，每个节点包含指向前驱和后继节点的指针，可实现高效的插入、删除操作。需了解其基本操作和实现方式。
- 实习相关：深入询问实习期间的项目经历，包括项目背景、技术选型、遇到的问题及解决方案等，考察实际工作经验和团队协作能力。
- 埋点实现：埋点用于收集用户行为数据，手动加点位是一种简单方式，但存在维护困难、易出错等问题。更优方案可采用自动化埋点工具或框架，如通过装饰器、AOP等方式实现。
- SSR同构问题：同构应用指一套代码既能在服务器端运行，又能在客户端运行。需解决如环境差异、生命周期处理、状态同步等问题。
- 打包优化：
Loader和plugin区别：Loader用于对模块的源代码进行转换，如将ES6代码转换为ES5代码；Plugin用于扩展webpack功能，如优化打包结果、资源管理等。
优化策略：包括代码分割、压缩代码、使用CDN加速、缓存等。
- Zustand使用原因：Zustand是一个轻量级的状态管理库，相比Redux等，它更简单易用，无需编写大量的样板代码，适合小型到中型项目。
- Token与Refresh Token：Token用于身份验证，Refresh Token用于获取新的Token。若发现用户异常行为，可通过服务器端使Token过期，要求用户重新登录。
- 安全问题：
CSRF：跨站请求伪造，攻击者通过伪造用户请求，执行非用户本意的操作。防御措施包括使用CSRF Token、验证Referer等。
XSS：跨站脚本攻击，攻击者在页面中注入恶意脚本，窃取用户信息。防御措施包括对用户输入进行过滤、使用CSP等。
- Vue和React区别：包括响应式原理、虚拟DOM实现、组件化方式、生态等方面。
- Vue2更新机制：Vue2的更新是component级别的，当数据变化时，会触发整个组件的重新渲染。可通过shouldComponentUpdate或计算属性优化性能。
- usePrevious实现：使用useRef保存上一次的值，在每次渲染时更新ref.current为当前值，返回ref.current的旧值。
- TypeScript泛型工具Exclude：Exclude<T, U>用于从类型T中排除可赋值给类型U的类型，返回剩余类型。
- 版本号比较：需实现一个函数，比较两个版本号的大小，版本号格式通常为x.y.z。
- 现场起自己项目：要求现场搭建一个简单项目，考察实际编码能力和项目搭建能力。
- 项目相关：深入询问项目细节，包括技术选型原因、项目难点及解决方案、项目优化等。
- 前端负载和选择冲突问题：前端负载问题可通过代码分割、懒加载、缓存等策略解决；选择冲突问题可通过状态管理、组件通信等方式协调。
- 技术选型对比：对比Vue和React的优缺点，根据项目需求选择合适框架。
- Vue双向绑定：Vue2通过Object.defineProperty实现双向绑定，Vue3通过Proxy实现，性能更好。
- Vue2生命周期：包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。
- Vue2和Vue3区别：包括响应式原理、虚拟DOM、组合式API、性能优化等方面。
- SSR项目介绍：介绍SSR项目的架构、技术栈、优化策略等。
- 打包优化：进一步探讨打包优化策略，如使用Tree Shaking、动态导入等。
- 手写HTML+CSS实现鼠标hover悬浮层：使用CSS的:hover伪类实现鼠标悬停时显示悬浮层效果。
- 判断链表有环：可使用快慢指针法，快指针每次移动两步，慢指针每次移动一步，若快指针追上慢指针，则链表有环。
热门标签
