ChatGPT高频问答场景下页面卡死的性能优化实战

1次阅读

共计 1872 个字符，预计需要花费 5 分钟才能阅读完成。

性能分析工具使用
通过 Chrome DevTools 的 Performance 面板录制用户连续提问时的性能数据
关键观察指标：Main 线程阻塞时长、Event Loop 延迟、WebSocket 连接数
典型问题模式：当并发请求 >5 时，FPS 从 60 骤降至 20 以下
浏览器运行机制解析
主线程阻塞原理：DOM 更新、JavaScript 执行与网络请求共享同一个 Event Loop（事件循环）
WebSocket 连接成本：每个新提问会创建独立连接，Chrome 默认限制每个域名 6 个并行连接
内存占用曲线：未及时释放的对话历史对象导致堆内存持续增长

请求流量控制
令牌桶算法 (Token Bucket) 实现：
- 容量：5 个令牌
- 填充速率：每 2 秒 1 个令牌
优先级队列：紧急问题可插队处理
缓存策略选型
短期缓存：使用 sessionStorage 保存最近 3 轮对话（读写速度 0.1ms）
长期存档：IndexedDB 存储历史记录（容量 50MB+，读写速度 5 -10ms）
差异对比：
| 方案 | 容量 | 读取速度 | 适用场景 |
|—————|———|———-|——————|
| LocalStorage | 5MB | 0.5ms | 配置项存储 |
| IndexedDB | 50MB+ | 5ms | 结构化历史数据 |
连接复用设计
单例 WebSocket 管理：
- 保持 1 个持久化连接
- 自动重连机制（指数退避：1s, 2s, 4s…）
心跳检测：每 25 秒发送 ping 帧（小于 Nginx 默认 30 秒超时）

// 请求调度器实现（TypeScript）class RequestScheduler {private queue: Array<() => Promise<void>> = [];
  private tokens = 5;

  async addRequest(requestFn: () => Promise<void>) {return new Promise<void>((resolve) => {const wrappedRequest = async () => {await requestFn();
        resolve();};
      this.queue.push(wrappedRequest);
      this.processQueue();});
  }

  private async processQueue() {while (this.tokens > 0 && this.queue.length > 0) {
      this.tokens--;
      const request = this.queue.shift()!;
      await request();
      this.tokens++;
      // 令牌桶补充
      setTimeout(() => this.tokens++, 2000);
    }
  }
}

压力测试方案
k6 测试脚本配置：
- 阶梯负载模型：10 → 50 → 100 虚拟用户
- 关键断言：99% 请求 <500ms
监控指标：
- WebSocket 帧率
- 内存使用变化曲线
异常情况处理

错误边界示例：

// Vue3 错误边界组件
onErrorCaptured((err) => {logError('ChatError', err);
  useFallbackBot();
  return false; // 阻止继续冒泡
});

常见反模式

Promise.all 陷阱：

// 错误示范（并发无限制）await Promise.all(requests.map(fetchResponse));

// 正确做法
import pLimit from 'p-limit';
const limit = pLimit(5);
await Promise.all(requests.map(r => limit(() => fetchResponse(r))));