#前端系统设计通用答题框架

#1. 先澄清需求

不要听到“设计一个后台系统”就立即画组件树。先确认：

• 核心用户和最重要的操作是什么？
• 数据规模、并发量、更新频率如何？
• 首屏、交互延迟和可用性的目标是什么？
• 是否需要 SEO、离线、实时协作、国际化？
• 浏览器、移动端和旧设备兼容范围是什么？
• 多团队是否需要独立发布？

如果面试官不给数字，可以主动声明合理假设，并说明数字变化后哪些设计会改变。

#2. 给出高层结构

先让面试官看到页面、数据和外部系统的边界，再逐层深入。

#3. 设计组件与状态

状态通常分为：

• URL 状态：筛选、分页、当前视图，适合分享和前进后退。
• 服务端状态：接口数据、缓存、加载和错误状态。
• 全局客户端状态：用户、主题、权限等跨页面状态。
• 局部状态：表单输入、弹窗和单组件交互。

不要把所有状态都放进 Redux/Pinia。重点说明状态的所有者、生命周期、更新来源和一致性要求。

#4. 设计数据流

至少说明：

• 接口粒度及 REST、GraphQL、BFF 的选择。
• 请求缓存、过期、去重和取消策略。
• 分页、游标、增量更新和预取。
• 乐观更新、失败回滚和冲突处理。
• 弱网、断网与重连。

#5. 性能预算

把“性能优化”变成可验证指标：

• LCP、INP、CLS 目标。
• 首屏 JavaScript 和关键资源体积。
• 列表最大 DOM 数量。
• 单次主线程任务耗时。
• 实时消息处理频率和内存上限。

然后再选择代码分割、虚拟列表、Worker、缓存、SSR 等手段。

#6. 稳定性与安全

• 错误边界、降级 UI、超时与重试。
• 日志、错误、性能和业务指标。
• 版本灰度、功能开关与快速回滚。
• XSS、CSRF、CSP、鉴权和权限校验。
• 敏感数据脱敏，不在客户端保存秘密。

#7. 演进与取舍

优秀答案会明确：

• 当前规模下为什么选择简单方案。
• 规模扩大后的瓶颈在哪里。
• 何时才值得引入微前端、GraphQL 或复杂状态管理。
• 哪些指标能证明需要升级架构。

#回答模板

我会先确认用户、数据规模和性能目标；然后画出页面、数据服务与实时通道的边界。状态按 URL、服务端、全局和局部拆分，接着设计缓存、一致性及错误恢复。最后用性能预算、监控、灰度和安全策略收口，并说明当前方案的瓶颈和后续演进条件。