面试失败! 居然考前端系统架构设计, 好难啊!

[Gabrielle70]

昨天面试失败, 非常沮丧, 居然考前端系统架构设计, 题目见页面最下方.

我没考过这种题型, 一时手忙脚乱的, 只能胡乱的写些状态管理, 组件分割, 微前端分割, React 的渲染优化技术（如 Caching, Memoization 、Lazy Loading 、Code Splitting 等), 防抖和节流等.

结果我得了个极低的分数, 面试官表情失望. 我感觉自己的思路, 和文字,图表等表达都不在要点上.

请各位大佬提供正确的解题思路, 并建议如何更好的组织答案

哪里能找到前端系统架构设计的样板文档.

谢谢

==== 题目 =====

实时在线限时秒杀活动页面的前端系统架构设计

任务: 提交一个实时在线限时秒杀活动页面的前端系统架构设计. 实现下列所述功能:

背景： 购物节快到了，计划开展限时秒杀活动。秒杀活动的前端架构需要应对高并发、动态库存显示和用户请求管理等挑战。要求你设计并实现一个健壮且可扩展的前端架构来支持该秒杀活动

功能需求：

前端用 React 框架

活动开始时间： 秒杀活动在指定时间开始，用户需要在活动开始前看到倒计时，活动开始后展示“立即购买”按钮。

实时库存动态显示：库存状态应实时更新，显示剩余商品数量。

购买限制：每个用户只能购买一个商品，点击“立即购买”后，前端应对用户请求进行有效性校验。

先到先得原则：秒杀活动中，系统应确保先到的用户请求优先处理，库存用完后立即显示“已售罄”状态。

API 集成与数据处理：与后端交互获取活动状态、库存信息，并处理并发请求。API 需处理高并发场景，确保系统性能和稳定性。

优化与扩展性：考虑如何优化组件渲染、减少不必要的状态更新、确保页面在高并发下的流畅性，以及如何扩展系统以支持更多复杂场景（如多种商品、不同的活动时间段等）, 本地/全局/服务器状态如何优化管理, 如何更好的和后端 API 整合.

要求该系统具有健壮性、可扩展性和高性能。

[Puteulanus]

之前看到哪儿写的分享，京东淘宝这种在秒杀的时候可能会给客户一个很小的随机延迟，在客户端这边把请求的流量尽量错开一点而不是集中在一个时间点发出去，它专门提秒杀有可能是想说这个吧

库存状态实时更新，要实时可能会想 websocket 这种，但是用户量大了估计不能用 ws ，得考虑怎么解决

有效性校验这种我理解的是如何设计尽量减少发往后端的无效请求，比如库存没了之后一部分用户还能点购买，减少这种的

高并发不知道啥意思了，前端哪儿来的高并发，指用户在秒杀的时候疯狂的点么（狗头

确保页面在高并发下的流畅性，我从前端来理解就是后端有时候可能卡顿、甚至短时间宕掉，前端要尽量在这种情况下让用户的感知小吧，比如把一些临近操作的数据存下来不依赖网络，异步自动重试之类的

大概想法就这些，其他也不太懂的就不瞎讲了

[Xu3Xan89YsA7oP64]

这玩意难点不是在后端吗👀

[renmu]

高并发和我又前端有什么关系呢

[tcper]

国外公司喜欢面试这种题目，让前端做系统架构
当然也不能说这样不好
国内公司让你现场自己实现 promise ，或者考你 apply, call, 也很奇葩

[rabbbit]

架构设计应该是希望设计组件和 api 以及参数、数据结构吧。我猜的我也不懂：
我大概会这么写

# 秒杀活动页面

## 页面内容简介及功能点

balabala

## 组件设计

### 剩余库存

组件参数、通过哪个 API 获取库存、如何缓存及显示库存、多长时间请求一次

### 秒杀按钮

组件参数、通过哪个 API 发送请求、loading 的处理、按钮的条件限制（未开始、库存不足不能点）
随机抛弃、延迟发送请求减轻后台压力
balabala

### ...
## API 设计

### 获取剩余库存

请求方式、参数、返回数据类型

### 秒杀请求
请求方式、参数、返回数据类型、调用频率

### ...

[leconio]

前端只要考虑如何在不降低体验情况下减少不必要的请求就可以了吧。
进入页面进行 NTP 时间校准，和系统时间对比得到时间偏差。时间不到置灰按钮之类的。
开抢就八仙过海各显神通咯。比如 MQ 中有请求就不接收了。降低服务器压力？前端这边有网关的返回就展示抢购中，不要在点了？

[agdhole]

前端不是怎么写都是健壮性、可扩展性和高性能吗？
毕竟都是浏览器把活都干完了。

[Mandelo]

这不是后端的八股文么......

[xmumiffy]

前端做高峰优化然后被用户 f12 发现你压根没请求是吧

[07aPzknB16ui9Cp3]

就尼玛很笑嘻，合着请求全是页面来的是吧，你们这个“先到先得原则”是在页面里实现的是吧，这个面试字里行间透露出没活找活这四个大字，切图仔能在自己一亩三分地里把代码尽量不写成屎山就已经要给他磕头了，面面常见的不会让代码变屎的切图设计模式和切图工程学就得了，这面试里这方面的东西倒是一点都没有

[linshuizhaoying]

找的是 25K 以上的工作吗

[erwin985211]

今天面试的外包也问的差不多的话题。比这个简单点

[qcbf111]

高级 unity 程序
18-25K
任职要求：
1 、 精通 c#, unity 引擎功能开发, unity 编辑器功能扩展开发，熟悉 ECS 架构。
2 、 熟悉常见数据结构与设计模式，了解计算机体系架构。
3 、 了解图形渲染绘制，能使用 shader 编写常见效果，与常见渲染性能优化手段，了解 URP 管线。
4 、 有做过或者参与针对项目性能排查与优化，熟悉内存分配了解内存布局对齐。
5 、 熟悉网络 tcp 与 udp 原理，熟悉常见网络同步设计，了解帧同步和状态同步的战斗系统架构。
6 、 工作 5 年以上，经历过至少一款中/大型项目开发。
7 、 对新知识有激情，责任心强，良好的沟通能力，对需求有自己的考量，考虑代码后期的可复用性等。

这是之前游戏行业的前端的招聘，咋样

[LabJo]

仔细看了一下，感觉这个场景相当一部分内容不属于前端啊...

[chenliangngng]

业务前端哪有什么架构设计，框架就是架构，用流行框架解决状态问题，然后页面又天然互相解耦。只需要做好组件化就可以了，其他的撑死再算个微前端和 ssr 和 spa 算架构

前端所有架构问题，要么是过度设计，要么是组件化没做好导致模块间过于耦合

[Martox]

哪家公司的面试，我这面到同样的题，但是过了，随便答的。

[weiwenhao]

秒杀倒计时不能依赖前端的时间，应该从后端取时间。不然就可以改时间大法。

[bboring]

怎么没人提 NodeJS

[leega0]

给你极低的打分，那你有没有问他正确的方法或指点，秒杀，前端设计的再好，瓶颈也不是前端处理的

[zuosiruan]

@qcbf111 地点，要是北上广 这真低

[JSjump]

1.活动开始时间。 看前端倒计时还是后端倒计时。不管前后端。反正后端肯定要对请求做限制
2.实时库存动态显示。 考虑到实时的话用 ws 负担太大。 考虑 sse
3.购买限制,对请求进行有效性校验。 购买后若成功结果存到 localstorage 之类的，下次就不用向服务端查询结果？
4.先到先得原则。这个不知道前端能咋处理，得知库存为 0 立马取消请求发送？
5.API 请求把防抖节流整上 caceh 啥的整上。
6.优化与扩展性。优化组件渲染、减少不必要的状态更新就 react.memo 啥的。
7.确保页面在高并发下的流畅性。react 现在 concurrent 模式自动开启啊，把 useTransition 整上。
8.扩展更多复杂场景（如多种商品、不同的活动时间段等）抽业务组件或者 hooks?
9.本地/全局/服务器状态如何优化管理, 如何更好的和后端 API 整合，没啥思路，感觉问的范围好大。
8/9 不知道想考啥，没反问下面试官吗？

[twelvechen]

感觉面试题有问题，很多不是前端架构能解决的，遇到这种情况感觉还是跟面试官沟通清楚究竟希望前端解决什么问题吧

[rbq123456]

@JSjump #21

前端还谈高并发？全地球的人来参与秒杀也跟前端没高并发的关系啊，都是不同的设备发出的请求，单用户还得多开标签页才能多并发几个。

先到先得的原则？那也得后端能返回结果，但是你抢购的时候还把服务器资源浪费在查询库存上面，每个用户都查库存并抢购？给服务器上上压力是吧。抢购时后端返回库存？请求都结束了还取消啥。

页面在高并发下的流畅性？参考上面，前端没有高并发条件，页面或者组件秒杀时卡顿，那平时就会卡顿，有没有秒杀都一样。

至于你说的其他内容，和秒杀系统没有关系，属于是和楼主一样不知道答什么就随便蹭一点。

前端在高并发下唯一能做的就是减少用户请求后端接口，像什么加个 loading toast ，落地页之类的，但那都是业务层面的，和技术没关系。能对一个前端问出这个问题的，要么就是招聘的岗位职责范围不止前端，要么就是面试官纯纯的前端业务不过关。

[yidadaa]

看起来就是八股，试试我做的这个工具？ offerin.cn

[xuanbg]

秒杀是一种常态化活动，每次上活动都要做新页面显然不是个事。所以，我想面试官应该是要想知道你如何对页面进行模板化吧。就是写好一个页面后就不用管了，后面展示什么全看后端给什么数据。

[xuanbg]

实时库存动态显示：库存状态应实时更新，显示剩余商品数量。

先到先得原则：秒杀活动中，系统应确保先到的用户请求优先处理，库存用完后立即显示“已售罄”状态。

谁家秒杀显示实时库存啊，完全不合理

[feelinglucky]

@tcper

那么多年了，还在考 apply, call 吗？有一说一那是当年 js 设计遗漏的糟粕，现在却当成面试题了…

既然都这样子了，那要这些框架干嘛…哎

[acthtml]

你们的方案都不主流，太落伍了，来看我的

直接前端做随机，只有运气好的才能真正请求接口。

概率可以弄个千万分之一，这样一台单核 2G 服务器就能搞定十亿级别的并发。

[musi]

秒杀实时查库存，你让面试官实现一个我看他服务器是有多牛逼

[JSjump]

@rbq123456 你要不要再看看需求？ 2.实时库存动态显示。 你进入抢购页面，发不发出抢购这个动作都要实时显示库存。而且请求结束和请求取消有冲突吗？释放资源总比占着好吧。 至于其他的面试时肯定是能蹭则蹭啊。还能和工作一样拿到需求觉得不合理先去 battle 一番啊

[cybort]

可能面试官觉得你没分清前后端的分工

[rbq123456]

@JSjump #30 请求结束那不就释放了资源么，请求没结束那又怎么知道要取消呢。

能蹭就蹭的问题，别人我不知道，反正在我看来就是会更让面试官不耐烦吧，明明知道面试者在乱答了，但又不好直接打断，为了礼貌也只能耐着性子听完，这种感觉蛮不爽的。

大部分人对浪费时间的答案还是不爽的，比如我说动态查询秒杀库存是没有意义的，我这个就是属于和题目无关的乱答。对问题有用么，没有意义，反而让人不爽。

[horizon]

关键词 design pattern
这个不局限在前端，而是考察对整个系统的理解设计能力

[horizon]

@horizon 说错了，关键词 system design interview
https://bytebytego.com/courses/system-design-interview/scale-from-zero-to-millions-of-users

[realJamespond]

又是面试造火箭，进去打螺丝？