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

[Gabrielle70]

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

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

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

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

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

谢谢

==== 题目 =====

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

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

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

功能需求：

前端用 React 框架

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

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

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

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

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

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

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

[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]

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