本次面经共 2 轮。每轮单独成文；轮次标题重复时，以“第 N 轮”和稳定的轮次 ID 区分。
轮次导航
- 第 1 轮 · 一面（16 道题）
- 第 1 轮 · 二面（10 道题）
阿里巴巴-社招-1年 · 第 1 轮 · 二面
← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮要点： react hooks、性能优化 本轮共 10 道题。答案默认折叠，便于先自行作答。 1. 你们项目为什么选Redux而非MobX 题目要点 Redux 强调可预测性、单向数据流、纯函数 reducer，适合复杂项目 丰富的调试工具和社区中间件支持开发效率和可维护性 MobX 响应式自动追踪，适合快速开发，但隐式依赖增加调试难度 团队规模和项目复杂度是选择状态管理方案的关键因素 现代 Redux 已大幅简化，代码冗余感降低 参考答案 一、考察点 是否理解 Redux 和 MobX 两种状态管理库的设计理念与差异 是否能结合项目实际需求，论述选择某一方案的合理性 是否掌握 Redux 在复杂状态管理中的优势与局限 是否能表达对团队协作、维护性和性能的综合考虑 二、参考答案 1.1 原理说明 Redux 基于 Flux 架构思想，使用单一全局状态树（Store） 状态只读，通过派发（dispatch）纯函数（Reducer）更新状态 强调不可变数据和纯函数，方便调试和时间旅行（time-travel debugging） 侧重于可预测性和可维护性 MobX 采用响应式编程思想，通过可观察（observable）数据和自动追踪依赖实现状态同步 支持隐式状态更新，使用更接近传统面向对象编程 适合快速开发，较少样板代码 1.2 选择 Redux 的主要理由 1）明确的状态流向和可预测性 Redux 的单向数据流和纯函数 reducer 让状态变化过程清晰、易追踪 在多人协作中，可以方便定位状态更新的具体原因，减少调试成本 2）强大的开发者工具支持 Redux DevTools 提供时间旅行、快照对比、action 日志等，极大提升调试体验 有丰富的中间件生态（如 redux-thunk、redux-saga），便于处理复杂异步逻辑 3）适合大型复杂项目 状态结构复杂时，Redux 更便于组织和维护，模块化拆分 reducer 明确职责 明确的规范和社区共识，团队成员易于理解和统一编码风格 4）可测试性强 Reducer 是纯函数，易于单元测试，保证业务逻辑可靠 1.3 不选 MobX 的考虑 1）隐式依赖难以追踪 MobX 的自动依赖追踪机制带来状态变化的隐式性，可能导致调试困难 团队成员对响应式原理不熟悉时，维护成本升高 2）状态变化不够可预测 MobX 允许任意地方修改状态，可能出现难以预料的副作用 不利于实现严格的状态管理和权限控制 3）社区规范和中大型项目生态 Redux 生态成熟且社区规范丰富 MobX 在某些复杂场景下不够透明，团队风险较大 1.4 常见误区或面试陷阱 ❌ 误区一：认为 MobX 性能一定优于 Redux 实际性能差异因项目而异，合理使用 Redux 也能实现优秀性能 ❌ 误区二：Redux 代码一定繁琐难写 现代 Redux 工具（如 Redux Toolkit）极大简化开发体验，减少样板代码 ❌ 误区三：认为 MobX 是“魔法”，不需要学习状态管理原理 响应式原理本身也需要深入理解，否则容易导致维护难题 2. 项目中提到“首屏加载优化1.5秒”，具体如何实现 题目要点 首屏加载优化核心在于减少首屏资源体积和请求数量 结合 SSR/SSG 预渲染，缩短白屏时间 动态拆分代码，懒加载非关键资源 充分利用浏览器缓存和 CDN 监控指标涵盖 FCP、TTI，持续迭代优化 参考答案 一、考察点 理解首屏加载的定义及关键性能指标（如 FCP、TTI） 掌握多种前端性能优化手段，涵盖资源、网络、渲染等层面 能结合具体技术和业务场景，说明优化实施细节 理解优化过程中的权衡与监控方法 二、参考答案 1.1 首屏加载的概念与性能指标 首屏加载：用户打开页面到看到页面主要内容（首屏内容）完整渲染的时间 ...