# 前端系统设计面试概述

> 原文：<https://www.frontendinterviewhandbook.com/front-end-system-design/>



前端系统设计资源少得惊人，可能是因为前端工程师候选人的需求和供应都较低。

这里的“系统”通常是指前端系统，它与软件工程面试中典型的分布式系统设计问题有很大的不同。所提的问题可能与[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)中的问题非常相似，但更侧重于架构和设计。它们之间有大量的重叠——当你构建 UI 时，你可能需要做一些设计(数据模型，API ),还需要做一些编码来说明你的想法/应用状态格式。

本节与[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)的区别在于，这里的问题通常更大。如果会议只有半个小时，候选人应该谈论设计权衡，可能的实现，而不是编码出来。因为系统设计问题通常涉及多个组件和跨 web 堆栈的知识，所以考生通常不必非常深入每个组件的较低级别的细节，并且可以将讨论保持在较高的级别，关于客户端和服务器之间的 API 设计，以及组件之间的 API。

[“构建用户界面”格式](/coding/build-front-end-user-interfaces/)中提到的许多主题也与前端系统设计相关——API 设计、可伸缩性、性能、用户体验、i18n、可访问性、安全性等。候选人应该主动提出这些话题，引导与面试官的讨论。性能、可访问性和 i18n 等更高级的主题是高级候选人与初级候选人的区别。

两种主要的前端系统设计面试是 UI 组件和应用程序。

## 例题[](#examples "Direct link to heading")

*   用户界面组件
    *   自动完成([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/autocomplete)
    *   图像转盘([阅读前端示例解决方案](https://www.greatfrontend.com/questions/system-design/image-carousel)
*   应用程序
    *   新闻提要([阅读伟大前端](https://www.greatfrontend.com/questions/system-design/news-feed-facebook)上的示例解决方案)
    *   视频观看网站
    *   聊天应用程序

Read front end system design case studies

[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！

## RADAD 框架[](#radad-framework "Direct link to heading")

系统设计面试问题往往是开放式的和模糊的，给你留下了很多探索的空间。如果面试官告诉你应该关注哪些具体领域，那就太好了！否则，这里有一个框架，你可以用它来给面试官一个大纲，告诉他你将要涵盖的内容，这在工作中处理新的前端项目时也很有帮助。

这个框架被称为 **RADAD** ，它由每一步的第一个字符组成。你可以把这个结构写在白板/在线编辑器上，这样你就不会忘记。

1.  **<u>R</u> 需求澄清/调整**——询问系统的需求。
2.  **<u>一个</u>架构**——勾勒出系统的架构(可能是 UI 组件，也可能是 app，取决于问题)。在相关的地方画图表。
3.  **<u>D</u> ata 模型** -组件如何存储传递给它的任何数据？使用什么数据结构？
4.  **<u>A</u> PI 设计**——使用这个组件的 API 是什么？组件上允许哪些选项？
5.  **<u>D</u>eep dive**——用户体验(UX)、性能、可访问性(a11y)、国际化(i18n)、多设备支持、安全性

如何处理应用程序和 UI 组件的系统设计问题可能会有很大的不同，我们将在随后的章节中详细讨论这些问题。

## [](#things-you-would-not-have-to-do-probably "Direct link to heading")你本来不必做的事情(大概)

因为前端系统设计面试侧重于前端，所以您可能不必:

*   设计数据库模式
*   了解使用哪种数据库(SQL 还是 NoSQL)
*   扩展您的服务器和数据库(分片、垂直/水平扩展)
*   谈论可用性、容错、延迟等

阅读更多关于[前端与后端系统设计面试](/blog/front-end-vs-back-end-system-design-interviews/#differences)的不同之处。

Read front end system design case studies

[出色的前端](https://www.greatfrontend.com/?fpr=frontendinterviewhandbook)向您展示如何通过前端系统设计指南和案例研究进行前端系统设计面试。今天就开始阅读吧！