设计一个支持千万级用户访问的银行网上银行前端系统，需要考虑哪些关键点？如何保证系统的可扩展性和高可用性？

1) 【一句话结论】
设计千万级用户访问的银行网上银行前端系统，需通过微前端拆分业务模块提升开发效率，结合服务端渲染（SSR）优化首屏性能与SEO，借助CDN加速资源分发，通过负载均衡与多级缓存（CDN、浏览器、Redis）降低请求延迟与数据库压力，并配置容灾机制（主备切换、数据库主从）与实时监控，从架构、技术、运维多维度保障系统可扩展性与高可用性。

2) 【原理/概念讲解】
老师会系统讲解关键技术点：

• 微前端：将大应用拆分为独立业务模块（如账户管理、转账、理财），每个模块独立开发、部署、扩展。通过框架（如qiankun、single-spa）实现模块间通信，避免单体架构的扩展性问题。类比：拼图，每个拼图块可单独更换，整体更灵活。
• 服务端渲染（SSR）：服务器端执行前端代码生成HTML，客户端解析渲染。减少首屏加载时间（从数秒缩短至1秒内），支持搜索引擎抓取内容（SEO），适用于银行核心页面（登录、账户概览）。代码示例：Node.js + Express + React Server Render。
• 内容分发网络（CDN）：静态资源（CSS、JS、图片）缓存至全球节点，用户从最近节点获取，降低网络延迟。类比：快递仓库，离用户近的仓库取包裹更快。
• 负载均衡：Nginx等将请求分发至多台服务器，算法（轮询、IP哈希）避免单点过载，提升系统吞吐量。
• 多级缓存：
  • CDN缓存静态资源；
  • 浏览器缓存（Cache-Control头）；
  • Redis缓存动态数据（用户信息、交易记录），减少数据库查询。
• 异步加载：非首屏资源（如第三方图表库、广告）异步加载，避免阻塞主线程，如Vue的async组件或Webpack代码分割。
• 容灾机制：主备服务器（主故障自动切换）、数据库主从复制、异地备份，确保故障时快速恢复。银行标准RTO（恢复时间）<5分钟，RPO（数据丢失）<1分钟。
• 安全技术：HTTPS（数据传输加密）、CSP（内容安全策略防XSS）、HSTS（强制HTTPS），保障用户数据安全。

3) 【对比与适用场景】
以负载均衡与服务端缓存为例：

对比项	负载均衡（如Nginx）	服务端缓存（如Redis）
定义	分发请求到多个后端服务器	存储动态数据，减少数据库查询
核心作用	提升吞吐量，避免单点故障	提升响应速度，减轻数据库压力
适用场景	用户量大的系统，高并发请求	数据不频繁变化（如用户配置、交易记录）
注意点	需配置负载均衡算法（如轮询、IP哈希）	需考虑缓存更新机制（TTL、消息队列）

4) 【示例】

• 微前端通信（Redux异步Action）：账户模块通过Redux获取用户信息：

  // 账户模块的Redux Action
  const fetchUserAccount = (userId) => async (dispatch) => {
    const res = await fetch(`/api/user/${userId}/account`);
    const data = await res.json();
    dispatch({ type: 'SET_USER_ACCOUNT', payload: data });
  };
  

• 缓存更新（Redis发布-订阅）：后端更新交易记录后，前端订阅更新：

  // 后端发布消息
  const publishTransactionUpdate = (transactionId) => {
    redis.publish('transaction-update', JSON.stringify({ id: transactionId, data: ... }));
  };
  // 前端订阅
  const subscribeToCacheUpdate = () => {
    redis.subscribe('transaction-update', (message) => {
      const data = JSON.parse(message);
      updateCache('transactions', data);
    });
  };
  

5) 【面试口播版答案】
“面试官您好，设计千万级用户访问的银行网上银行前端系统，核心是通过微前端架构拆分业务模块（如账户、转账、理财），提升开发与部署效率；采用服务端渲染（SSR）优化首屏性能，减少加载时间并支持SEO；借助CDN加速静态资源分发，降低网络延迟；通过负载均衡（如Nginx）分发请求到多台服务器，保障高并发；结合多级缓存（CDN、浏览器、Redis）减少数据库压力；引入异步加载处理非首屏资源，避免阻塞；同时配置容灾机制（主备切换、数据库主从）与实时监控（Prometheus+Grafana），确保系统可扩展性与高可用性。这些措施从架构、技术、运维多维度保障系统稳定运行。”

6) 【追问清单】

• 追问1：微前端模块间如何通信？
  回答要点：通过全局状态管理（如Redux、Vuex）或消息队列（如RabbitMQ），确保数据同步。
• 追问2：缓存如何更新？避免数据不一致？
  回答要点：设置Redis的TTL（过期时间），或通过发布-订阅模式实时更新缓存。
• 追问3：如何保障实时交易的数据一致性？
  回答要点：前端与后端采用乐观锁（版本号），结合事务处理，确保交易数据一致。
• 追问4：如何处理缓存击穿问题？
  回答要点：Redis布隆过滤器预判热点数据，限流降级。
• 追问5：容灾机制中RTO/RPO指标如何？
  回答要点：RTO<5分钟，RPO<1分钟，通过主备切换、数据库主从复制实现。

7) 【常见坑/雷区】

• 忽略安全：未提及HTTPS、CSP等，导致数据泄露风险。
• 缓存击穿：未考虑热点数据缓存，导致数据库压力激增。
• 微前端通信阻塞：使用同步通信导致模块间等待，影响性能。
• 容灾指标缺失：未说明RTO/RPO，不符合银行高可用要求。
• 首屏性能优化不足：未采用SSR或异步加载，导致首屏加载慢。