前端系统设计面试

高级前端面试会要求你端到端设计一个复杂的 UI 功能：新闻资讯流、自动补全、图片画廊、无限滚动仪表板。他们评估的是架构、权衡意识、性能直觉和沟通能力，而不是框架冷知识。

大多数 45 到 60 分钟的面试会按照以下流程进行：1）明确需求（5 分钟）。2）勾勒高层架构（10 分钟）。3）拆分组件（10 分钟）。4）获取数据和管理状态（10 分钟）。5）性能和无障碍（10 分钟）。6）深入讨论一个领域（由面试官选择）。

不要开始编码。请询问：目标设备是什么？需要登录还是支持匿名用户？是否支持离线？是否需要实时更新？预期规模是多少（10 个用户还是 1000 万个用户）？有哪些无障碍要求？支持哪些浏览器？这些决定会影响整个设计。

画出各个方框：客户端（SPA 还是 SSR？）、API 网关、服务、缓存、CDN。标出用户操作和数据流。尽早提及边界情况——这能体现你确实构建过真实系统。

勾勒组件层级。NewsFeed → Header、Story[]、Composer。Story → Avatar、Content、Actions、Comments。确定哪些组件可复用，哪些组件只属于特定功能。

每一部分状态应存放在哪里？本地状态（useState）、URL（路由器）、服务器状态（React Query）还是客户端状态（Zustand）？讨论数据获取策略：初始 SSR、无限滚动、实时 WebSocket 更新、乐观 UI。

在路由边界进行代码拆分。对较长的信息流使用虚拟化列表。优化图片（延迟加载 + AVIF/WebP）。避免阻塞主线程。设置打包体积预算。对重复访问使用缓存优先的 SW。

语义化 HTML。键盘导航。ARIA 角色和实时区域。颜色对比度。使用屏幕阅读器进行测试。加分项：提到路由变化时的焦点管理。

讨论：使用 IntersectionObserver 实现无限滚动，使用虚拟化节省内存，乐观点赞，实时新帖提示，带模糊占位图的图片延迟加载，使用 SSR 优化 SEO，以及对热门时间线使用 ISR/边缘缓存。

讨论：防抖输入，使用 AbortController 取消过时请求，请求去重，响应缓存（LRU），键盘导航（上/下/回车/退出），ARIA 组合框角色，以及移动端虚拟键盘处理。

讨论：瀑布流与网格布局，针对视网膜屏幕使用响应式 srcset，基于交叉检测的延迟加载，预获取下一张图片，带焦点陷阱的灯箱/模态框，移动端滑动手势，键盘方向键导航，以及深度链接。

对于每个选择，都要提及替代方案以及你选择当前方案的原因。“我会使用 IntersectionObserver 来实现延迟加载，因为它是原生 API 且效率高。替代方案是使用带节流的滚动监听器——实现更简单，但在较慢的 CPU 上更容易出现卡顿。”这正是高级面试官看重的能力。

1）在明确需求之前就开始写代码。2）忽视无障碍。3）忘记处理错误状态（网络失败、结果为空）。4）没有考虑加载状态。5）回答含糊（“我会使用 React”——具体采用什么架构？）。

在系统设计面试中，如果要求你设计一个自动补全搜索框，你首先应该做什么？

先明确范围。高层架构（客户端、API、缓存、CDN）。组件树。状态位置（本地、URL、服务器缓存、全局状态）。数据获取策略。性能（代码拆分、虚拟化、图片优化）。无障碍（键盘、ARIA、对比度）。沟通权衡。避免一开始就写代码。练习经典模式：信息流、自动补全、画廊、仪表板。