阿里巴巴前端怎么准备
阿里前端面试里，交易页经常比炫技组件更重要：价格、优惠、提交。展示错价是事故。
五题覆盖计价展示、优惠互斥、提交、地址弱网和协作。用你做过的下单或结算页来答。
阿里怎么面前端
- 会问前端能不能自己算价格——答案通常是不能当准绳。
- 提交按钮状态机是高频。
- 准备和后端对一次接口契约。
面试阶段与知识点
第一批不把每个阶段拆成独立 URL，避免程序化重复页。阶段对应下面的题，练完再用模拟面试串起来。
- 展示与契约：价格以后端为准。
- 提交状态：防重复。
- 优惠：互斥和文案。
- 事故：错价。
值得开口练的题
每题给考察点、思路、结构化参考答案和追问。参考答案用来组织语言，面试时必须换成你自己的项目事实。
结算页前端自己算的价格和后端不一致，以谁为准？
考察点
- 契约
- 快照
- 用户感知
回答思路
交易场景价格以后端计价接口为准，前端只做展示与即时反馈，不能自行当结算准绳。
结构化参考答案
- 页面展示金额必须渲染后端返回的计价结果，本地估算仅作输入变化时的预览提示。
- 提交订单时携带计价版本号或快照 token，后端校验失败则刷新页面并重算。
- 若刷新导致应付金额变化，必须明确弹窗告知用户，禁止静默改价。
- 定期抽检前后端计价一致性，差异进入告警而不是等业务投诉才发现。
面试官可能追问
- 本地估算为什么还要存在？
- 刷新导致优惠消失怎么解释？
- 如何防止运营配置把前端写死？
两张券互斥，用户两张都点亮，UI 怎么做？
考察点
- 互斥规则
- 解释
- 可撤销
回答思路
优惠互斥要在用户选择当下即时说明并给出可撤销操作，不能拖到提交才报错。
结构化参考答案
- 用户点亮第二张互斥券时，按后端规则自动替换第一张并 toast 说明原因。
- 互斥与叠加规则全部来自后端配置，前端不做本地猜测以免与结算不一致。
- 提供撤销按钮恢复上一张券的选择，避免用户觉得被偷偷改券。
- 埋点记录互斥触发次数与替换路径，供运营优化券面文案。
面试官可能追问
- 三张券的互斥如何展示？
- 系统自动选最优和用户自选冲突？
- 如何测试组合？
弱网连点提交，如何保证一笔订单？
考察点
- 按钮锁
- 幂等号
- 超时文案
回答思路
按钮锁只能防误触，必须配合客户端幂等号与服务端去重才能保证弱网只下一单。
结构化参考答案
- 首次点击立即锁定提交按钮并生成 clientRequestId，请求体携带该幂等号。
- 请求超时进入「处理中」页，用同一幂等号轮询订单状态，禁止返回再生成新号。
- 查询到已创建订单则直接展示结果页，真失败才解锁并允许用户重试。
- 客服工单可凭幂等号追溯，避免用户重复付款却查不到单。
面试官可能追问
- 查询也超时怎么办？
- 用户杀掉 App？
- 如何和后端令牌对齐？
地址解析服务慢，结算被拖住，你怎么降级？
考察点
- 非阻塞
- 缓存
- 可提交
回答思路
地址智能解析是增强能力，不能阻塞用户已填完整地址的正常提交流程。
结构化参考答案
- 解析请求异步进行，用户已选手输或历史完整地址时允许直接提交订单。
- 常用收货地址本地缓存，二次进入结算页秒开，减少重复解析调用。
- 解析失败时允许手动确认并标注「未校验」风险提示，而不是卡死页面。
- 监控解析 P99 耗时，超阈值自动熔断解析模块，保障购买主路径。
面试官可能追问
- 错误地址谁负责？
- 如何减少错配站点？
- 海外地址规则怎么扩展？
上线后发现优惠展示错价，你两分钟内做什么？
考察点
- 止血
- 范围
- 沟通
回答思路
错价展示是 P0 事故，两分钟内优先止血下线，再评估影响范围并统一对外口径。
结构化参考答案
- 立刻回滚前端版本或关闭对应促销配置开关，阻止更多用户看到错误价格。
- 拉数据同学评估已下单订单是按错价还是正确价履约，划分影响范围。
- 同步客服与业务同学统一应答话术，避免一线各说各话激化投诉。
- 事后补契约测试与运营配置审批，同类字段变更必须双人复核。
面试官可能追问
- 已支付订单怎么办？
- 前端能否单独热修文案？
- 如何避免背锅？
和岗位、模拟面试一起用
资料管理里保存目标岗位 JD，模拟面试会按简历出题。点题目下的按钮会把本题带进模拟开场，仍需先绑定简历与岗位。