前端高可用

约 2036 字大约 7 分钟

2025-09-05

一、构建与部署层面

减少单点故障 (SPOF)

目标是确保资源能够被正确加载和执行。

资源冗余与版本控制：为静态资源添加哈希指纹（如 app.a3b4c5.js），配合 CDN 和长时间缓存策略。即使频繁发布，用户也能正确获取新旧版本资源，避免缓存冲突。
非阻塞加载：将 CSS 放在头部，将 JS 放在尾部或使用 async/defer 属性，保证关键内容（HTML）优先渲染，即使 JS 加载失败，用户也能看到基本内容。

2、负载均衡与冗余部署

负载均衡是一种常见的高可用性策略，通过将用户请求分散到多个服务器上运行的 Vue 应用实例中，防止单点故障。具体措施包括：

使用软件负载均衡器：如 Nginx、HAProxy 等。如 Nginx+Keepalived 实现服务器热备，通过 VRRP 协议自动切换故障节点
云服务负载均衡：部署多台前端服务器组成集群，通过负载均衡器（如 AWS ELB、阿里云 SLB）分发流量
使用硬件负载均衡器：如 F5 Big-IP 等。
采用无状态设计，使任意服务器故障不影响整体服务

优点：

高可靠性：即使某台服务器宕机，负载均衡器也能自动将流量转移到其他可用服务器上。
扩展性：可以根据流量增加或减少服务器实例，灵活应对流量波动。

二、编码与容错处理层面

增强代码韧性，目标是让应用在部分代码执行失败时，不至于全面崩溃。

1、全面的错误边界（Error Boundaries）

在 React 中，使用错误边界组件捕获子组件树的 JavaScript 错误，记录错误信息，并展示降级 UI（如一个友好的错误提示），而不是整个白屏。

class ErrorBoundary extends React.Component {
  componentDidCatch(error, errorInfo) {
    // 上报错误给监控系统
    logErrorToService(error, errorInfo);
  }
  render() {
    if (this.state.hasError) {
      // 展示降级后的UI
      return <h1>哎呀，部分组件出错了。</h1>;
    }
    return this.props.children;
  }
}
// 使用
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>;

2、防御性编程

对任何外部输入（API 响应、URL 参数、LocalStorage）和函数调用进行校验。

使用可选链（?.）和空值合并（??）操作符。
对对象属性进行判断：if (data && data.user && data.user.name) 或使用解构带默认值 const { name = 'Unknown' } = data.user || {};。

3、隔离第三方依赖

第三方库（如统计、广告代码）的失败不应影响你的核心应用。

使用动态导入（import()）异步加载非核心的第三方库。
将第三方脚本包裹在 try...catch 中或通过 script.onerror 事件进行处理。

三、网络请求层面

网络是不可靠的，必须为此设计合理的处理网络与 API 异常机制。

1、API 请求重试机制

对于短暂的网络抖动或 5xx 错误，可以在前端进行智能重试（例如使用指数退避算法）。库如 axios-retry 可以很方便地实现。

2、设置合理的超时时间

为 API 请求设置超时，并给用户相应的反馈（“请求超时，请检查网络”）。

3、优雅的降级数据

当核心 API 请求完全失败（如 500 错误）时，不应只展示一个空白页面。

展示预置的兜底数据（Fallback Data）。
展示友好且信息明确的错误页面，引导用户尝试刷新或稍后再试。
如果应用允许，可以使用本地缓存（如 LocalStorage）中的旧数据暂时渲染。

4、CDN 与多线路容灾

全球部署 CDN 节点缓存静态资源，提升访问速度并降低源站压力
同时接入多个 CDN 服务商，当某条线路故障时自动切换备用 CDN
对关键静态资源配置多域名备份，避免单域名解析失败导致资源不可用
使用 CDN（内容分发网络）：将静态资源（JS, CSS, 图片、字体）部署到全球多个节点的 CDN 上。这不仅能加速加载，还能在一处 CDN 节点故障时，由其他节点继续提供服务。

四、用户体验层面

提供状态反馈与降级 UI，目标是保持与用户的沟通，管理用户的预期。

清晰的加载状态（Loading）：让用户知道应用正在工作，而不是卡死。
skeleton screens（骨架屏）：在内容加载前先展示其占位图形，极大提升用户感知的性能和体验连续性，比旋转的菊花图（spinner）感觉更快。
实现前端降级策略：如果某个非核心功能（如推荐列表、评论区）的接口失败，可以选择隐藏该模块或展示一个“该功能暂不可用”的提示，而不是让整个页面崩溃。