本次面经共 4 轮。每轮单独成文；轮次标题重复时，以“第 N 轮”和稳定的轮次 ID 区分。
← 第 1 轮 · 返回本次面经 · 已是最后一轮 → 本轮共 7 道题。答案默认折叠，便于先自行作答。 1. 离职的原因是什么 题目要点 略 参考答案 略 2. 你熟悉 VUE 吗 题目要点 略 参考答案 略 3. 学习一些新技术，或者是业务中碰到的一些难题，你是针对性去解决会比较多一些，还是说你有系统的学习的一些规划呢 题目要点 略 参考答案 略 4. 工作过程中哪些成长比较大，遇到过哪些难题，怎么解决的 题目要点 略 参考答案 略 5. 你们的加班强度怎么样 题目要点 略 参考答案 略 6. 你如何看待团队合作 题目要点 略 参考答案 略 7. 离职的时候你怎么处理跟前同事的关系的 题目要点 略 参考答案 略 ← 第 1 轮 · 返回本次面经 · 已是最后一轮 →
← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮共 7 道题。答案默认折叠，便于先自行作答。 1. 请用3分钟介绍魔方组件项目，突出技术决策过程 题目要点 略 参考答案 略 2. 项目中遇到的最大技术挑战及解决思路 题目要点 略 参考答案 略 3. 性能优化项目的ROI如何评估 题目要点 性能优化 ROI 是投入产出比的度量，结合成本和业务收益评估 需明确优化目标、估算投入、预估收益，计算合理 ROI 关注性能指标与业务指标的映射关系，结合数据分析 兼顾技术收益和用户体验提升，避免盲目优化 持续跟踪优化效果，动态调整投资策略 参考答案 一、考察点 理解性能优化的投入与收益关系 掌握定量和定性评估性能优化效果的方法 了解业务指标与性能指标的关联性 能结合项目实际情况合理规划和衡量优化价值 二、参考答案 2.1 ROI 的定义与核心思想 ROI（Return on Investment）即“投资回报率”，衡量投入资源与产出收益的比率 性能优化的 ROI 评估即衡量优化投入（时间、人力、成本）与带来的业务或技术收益是否成正比 目标是确保资源有效利用，避免盲目优化 2.2 性能优化投入的量化 开发成本：开发和测试性能优化方案所需的人力、时间 基础设施成本：可能新增的硬件资源或第三方服务开销 维护成本：优化方案上线后的维护和升级投入 2.3 性能优化收益的量化 业务指标提升：如转化率、用户留存率、页面访问量、用户满意度等 技术指标改善：首屏时间（FCP）、最大内容渲染时间（LCP）、交互响应时间、错误率降低等 运营成本降低：服务器压力减轻、带宽节省、用户投诉减少等 2.4 关联业务价值与性能指标 通过数据分析建立性能指标与业务指标的映射关系，比如： 首屏加载时间缩短 1 秒，转化率提升 5% 页面响应延迟减少，用户流失率降低 结合历史数据或行业调研，预估性能改进带来的经济效益 2.5 评估流程示例 明确优化目标：确定需优化的性能瓶颈和预期改进幅度 估算投入成本：评估开发时间、人力、资源等投入 预估收益：基于数据和业务指标推算收益大小 计算 ROI：收益 / 投入，判断是否值得投资 持续监控：优化上线后跟踪实际效果，调整策略 2.6 风险与非量化因素考虑 用户体验提升虽难量化，但对品牌和用户粘性极重要 竞争压力、市场趋势等外部因素可能影响 ROI 技术债务减少，长期维护成本降低也是重要收益 三、常见误区或面试陷阱 ❌ 只关注技术指标优化，忽视业务价值转化 ❌ 低估开发和维护成本，导致投入超出预期 ❌ 盲目追求极致性能，忽略边际效益递减 ❌ 缺乏数据支持，ROI 评估主观臆断 4. 项目风险遇到过哪些 ，怎么解决的 题目要点 略 ...
← 第 1 轮 · 返回本次面经 · 第 1 轮 → 本轮要点： 浏览器的缓存机制、react hooks 本轮共 11 道题。答案默认折叠，便于先自行作答。 1. 魔方组件的整体架构设计，包括其模块划分和核心功能 题目要点 略 参考答案 略 2. 你们是如何选择技术栈的？有哪些关键因素影响了决策 题目要点 略 参考答案 略 3. 魔方组件如何实现动态加载，以提升初始加载性能 题目要点 略 参考答案 略 4. 魔方组件如何管理组件的配置信息？组件之间的通信是如何处理的 题目要点 略 参考答案 略 5. 三维模型的加载性能，将加载时间从10秒缩短至3秒都做了哪些操作 题目要点 略 参考答案 略 6. 这个项目中在移动端，你们是如何处理不同设备的适配问题的 题目要点 略 参考答案 略 7. 有没有用服务端渲染（SSR）？如果有，你们是如何实现的 题目要点 SSR 是服务器预先渲染页面，提高首屏性能和 SEO 常用框架有 Next.js、Nuxt.js，也可自研实现 实现时结合服务器渲染和客户端 Hydration 完成完整页面交互 需处理代码共享、数据预取、样式加载及性能优化 了解 SSR 的局限性和优化难点，合理权衡使用场景 参考答案 一、考察点 理解 SSR 的基本概念和优势 掌握常见 SSR 实现方案及其原理 理解 SSR 与客户端渲染（CSR）的区别和协同方式 了解 SSR 在项目中的具体落地方法和技术选型 二、参考答案 2.1 SSR 的基本概念 SSR（Server-Side Rendering）是指在服务器端完成页面的 HTML 渲染，再将完整的 HTML 返回给客户端 相比纯客户端渲染，SSR 提升了首屏渲染速度和 SEO 友好性 用户拿到的是已渲染好的页面，浏览器可以更快显示内容 2.2 SSR 的优势和适用场景 首屏速度快：浏览器无需等待大量 JS 执行即可显示页面 SEO 优化：搜索引擎能抓取到完整的内容，提升排名 社交分享友好：分享链接时可显示完整预览 适合内容型或公共站点，电商、新闻、博客等场景 2.3 常见 SSR 实现方案 Next.js（React）：提供开箱即用的 SSR 支持和静态生成 Nuxt.js（Vue）：Vue 生态的 SSR 框架，支持服务端渲染和静态导出 自研 SSR：使用 Node.js 搭配 ReactDOMServer 或 Vue SSR API 手动实现 传统模板引擎：如 EJS、Handlebars 等，服务器渲染 HTML 2.4 我们项目中 SSR 的实现方式 使用了 [Next.js / Nuxt.js / 自研 SSR] 作为 SSR 框架 服务器通过 Node.js 环境调用 ReactDOMServer.renderToString 或 Vue SSR 的 renderToString，生成完整 HTML 结合路由系统，实现根据请求 URL 渲染对应页面 页面返回时携带初始数据（通过服务端数据预取），客户端接管 Hydration，实现页面交互 结合缓存策略，优化性能和响应速度 配合 Webpack 和 Babel，保证服务端代码和客户端代码一致性 2.5 实现过程中需注意的问题 服务端和客户端代码共享及差异处理（避免浏览器 API 直接调用） 初始数据的获取与注入，保证页面完整性和交互 处理样式加载，避免闪烁（FOUC） 性能优化，如页面缓存、资源压缩和异步加载 服务器负载和扩展性考虑 三、常见误区或面试陷阱 ❌ 认为 SSR 只是在服务器渲染静态 HTML，忽略客户端 Hydration ❌ 忽视服务端渲染的性能开销和状态同步难题 ❌ 直接复用客户端代码，未处理服务端无 DOM 的环境差异 ❌ 忽略 SEO 以外的性能和用户体验提升点 8. 项目中使用了哪些状态管理工具？为什么选择这些工具 题目要点 状态管理工具选择基于项目规模、团队经验和性能需求 Redux 适合大型复杂应用，MobX 适合响应式需求 Context 适合轻量局部状态管理 结合工具生态和中间件支持，提升开发效率和维护性 合理划分全局与局部状态，避免状态管理复杂化 参考答案 一、考察点 理解不同状态管理工具的特点及适用场景 掌握项目中选择状态管理工具的决策逻辑 能清晰阐述所选工具带来的优势和解决的问题 了解状态管理的基本概念和复杂度控制方法 二、参考答案 2.1 项目中使用的状态管理工具 Redux 适用于大型复杂应用，状态集中管理 具备时间旅行调试、可预测状态变更、丰富中间件生态 MobX 响应式状态管理，自动追踪依赖，适合数据驱动视图更新 代码简洁，学习曲线较低 React Context + useReducer/useState 轻量级状态共享方案，适合中小型或局部状态管理 Recoil / Zustand / Valtio 等轻量方案 现代灵活的状态管理，适合部分场景需求 Vuex（Vue 项目） Vue 官方状态管理库，集中管理全局状态，支持插件扩展 2.2 选择这些工具的理由 项目规模与复杂度 ...
← 已是第一轮 · 返回本次面经 · 第 1 轮 → 本轮要点： React 生命周期、react hooks、JSX、react 渲染机制、React函数组件更新、react 组件设计模式 本轮共 38 道题。答案默认折叠，便于先自行作答。 1. 你参与的主要项目是什么？是桌面端还是移动端项目 题目要点 略 参考答案 略 2. 在项目中主要使用了哪些技术栈 题目要点 略 参考答案 略 3. 你对 Vue 有多少了解 题目要点 Vue 是数据驱动 + 响应式的组件化框架，适合快速构建中大型项目 熟悉其核心机制：响应式原理、组件生命周期、指令语法、虚拟 DOM 掌握 Vue Router、Vuex/Pinia 等配套生态工具 能区分并熟练使用 Vue 2 和 Vue 3 的开发模式 具备优化性能、提升可维护性的工程意识 参考答案 一、考察点 探查候选人对 Vue 核心原理、语法机制的理解深度 判断是否具备实战经验、组件开发能力、性能优化能力 涵盖响应式系统、组件通信、生命周期、指令系统、虚拟 DOM、Diff 等关键技术点 Vue 生态栈是否熟悉，如 Vue Router、Vuex / Pinia、Composition API、Vue 3 升级等 二、参考答案 2.1 Vue 框架的整体认知 Vue 是一个 轻量、渐进式的前端框架，核心关注 View 层，易学易用，适合快速开发中大型应用 支持响应式绑定、组件化开发、指令系统、虚拟 DOM、跨平台（如 H5、小程序） Vue 的核心组成包括： ...