51 lines
4.3 KiB
Plaintext
51 lines
4.3 KiB
Plaintext
---
|
||
title: 前端系统设计：简介
|
||
description: 学习有用的技术以及如何处理顶尖前端系统设计问题。由前 FAANG 面试官撰写。
|
||
seo_title: 前端系统设计手册 | GreatFrontEnd
|
||
social_title: 前端系统设计手册 | GreatFrontEnd
|
||
seo_description: 前端系统设计面试的权威指南。学习有用的技术以及如何处理最常见的问题。由前 FAANG 面试官撰写。
|
||
---
|
||
|
||
与编码和测验问题不同，系统设计面试是开放式面试，没有正确答案。您会得到一个模糊的问题或场景，并且希望您与面试官一起通过在白板上或一些协作绘图应用程序上提出合适的软件设计来回答问题（如果它是虚拟面试）。这类似于某些公司工程师编写技术设计文档以概述他们正在处理的项目的可能方法、解释技术决策并与同事讨论权衡的过程，除了您必须在 30-60 分钟内完成它。
|
||
|
||
系统设计面试通常会给有多年工作经验（又名非应届毕业生）的候选人，并且您在系统设计面试中的表现对您将获得的职位级别有重大影响。大多数情况下，未能通过系统设计面试将导致整体拒绝。顺利通过系统设计面试真的很重要！
|
||
|
||
然而，鉴于系统设计面试的开放性，与编码面试相比，它更难练习。许多候选人也没有构建各种系统的真实生活经验，并且在回答系统设计面试问题时很难从经验中汲取灵感。此外，针对前端系统设计的资源很少。大多数现有的系统设计资源都针对一般的软件工程师，因此侧重于分布式系统。
|
||
|
||
GreatFrontEnd 的前端系统设计资源可能是您能找到的最全面的资源，它将帮助您轻松通过前端系统设计面试！
|
||
|
||
{/* TODO: 添加一些关于前端系统设计的推荐 */}
|
||
|
||
## 前端 vs 后端 / 全栈系统设计
|
||
|
||
在传统的软件工程师系统设计面试中，会要求候选人描述分布式系统的架构，通常涉及 Web 服务器、API 网关、负载均衡器、缓存、数据库、微服务、消息队列、流等。
|
||
|
||
对于前端工程师来说，系统设计面试略有不同——更侧重于客户端发生的事情以及客户端和服务器之间的 API 设计，而不是后端发生的事情。
|
||
|
||
| 领域 | 后端 / 全栈 | 前端 |
|
||
| --- | --- | --- |
|
||
| 收集需求 | 必需 | 必需 |
|
||
| 架构 / 高级设计实体 | 分布式云服务 | 应用程序/组件 |
|
||
| 粗略估算 | 可能需要 | 不需要 |
|
||
| 系统的组件 | 云服务（例如负载均衡器、应用程序服务器、数据库、文件存储、缓存、消息队列、CDN、全文搜索） | 应用程序模块（模型、视图、控制器） |
|
||
| 数据模型 | 数据库模式 | 应用程序状态 |
|
||
| 组件之间的 API 类型 | 网络（任何协议） | 网络（HTTP、WebSocket）、JavaScript 函数 |
|
||
| 深入研究/重点领域 | 可扩展性、可靠性、一致性、可用性 | 性能、用户体验、可访问性、国际化 |
|
||
| 不太重要（可以视为黑盒） | 客户端 | 服务器 |
|
||
|
||
例如，一个经典的问题是询问如何设计 Facebook 新闻提要，这可以在后端和前端系统面试中提出。
|
||
|
||
* **后端 / 全栈**：容量估算、设计数据库模式、微服务之间的 API、如何确保服务能够随着流量扩展、如何以可扩展的方式生成用户的新闻提要、当普通用户（数百个关注者）与名人（数百万个关注者）创建帖子时会发生什么
|
||
* **前端**：Feed 的 HTTP API、如何实现 Feed 分页、如何实现与帖子的交互、如何创建新帖子、用户体验和可访问性考虑因素
|
||
|
||
正如您所看到的，前端系统设计面试的重点可能与后端有很大不同，并且要很好地回答它们需要不同的方法。
|
||
|
||
## 您将在此指南中学习的内容
|
||
|
||
我们的前端系统设计指南分为两部分，您将首先更深入地了解系统设计面试的意义，然后深入研究一些使用 RADIO 框架的前端系统设计案例研究。
|
||
|
||
* [问题类型](/system-design/types-of-questions)：前端系统设计面试问题的类型和示例
|
||
* [RADIO 框架](/system-design/framework)：用于回答前端系统设计面试问题的框架
|
||
* [评估轴](/system-design/evaluation-axes)：如何被评估以及面试官正在寻找什么
|
||
* [常见错误](/system-design/common-mistakes)：在前端系统设计面试中要避免的常见错误
|