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

[Gabrielle70]

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

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

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

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

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

谢谢

==== 题目 =====

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

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

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

功能需求：

前端用 React 框架

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

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

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

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

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

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

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

[Puteulanus]

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

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

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

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

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

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

[shizhibuyu2023]

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

[renmu]

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

[tcper]

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

[rabbbit]

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

# 秒杀活动页面

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

balabala

## 组件设计

### 剩余库存

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

### 秒杀按钮

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

### ...
## API 设计

### 获取剩余库存

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

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

### ...

[leconio]

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

[agdhole]

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

[Mandelo]

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

[xmumiffy]

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

[wuzzispacelake]

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

[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 地点，要是北上广 这真低