# 性能优化：700Token并发100优化方案 v3.11.9

## 📋 文档时间
2025-10-08

## 🎯 场景说明

**实际需求：**
- 总token数：**700+个**
- 并发执行：**100个同时运行**
- 总批次：**7批**（700 ÷ 100 = 7）
- 关键目标：**降低CPU和内存开销**

## 📊 当前问题分析

### 性能瓶颈

#### 1️⃣ 内存开销（最严重）
```javascript
// 100个并发token的内存占用估算：
100个WebSocket连接：        ~500-1000MB
100个token状态对象：         ~50-100MB
100个Vue响应式代理：         ~100-200MB
100个UI卡片DOM：            ~200-300MB
执行进度数据：               ~50-100MB
日志数据：                   ~100-200MB
------------------------------------------
预估总内存：                 1000-1900MB（1-2GB）⚠️

// 加上浏览器基础占用（约500MB）
总计：                       1.5-2.5GB
```

**问题：** 浏览器可能崩溃或极度卡顿

#### 2️⃣ CPU开销
```javascript
// CPU占用来源：
1. 100个WebSocket消息处理    ← 主要
2. 100个Vue响应式更新         ← 主要
3. 100个UI卡片渲染            ← 主要
4. 日志输出（console.log）    ← 次要
5. 任务进度计算               ← 次要
6. CSS动画                    ← 次要

预估CPU占用：40-60% （多核情况下）⚠️
```

#### 3️⃣ UI渲染压力
```javascript
// 100个token卡片同时更新：
每秒更新次数：100个 × 2次/秒 = 200次/秒
触发重排/重绘：频繁
滚动性能：卡顿
动画效果：掉帧

结果：界面卡顿严重 ⚠️
```

---

## ✅ 优化方案（七大维度）

### 🎯 方案1：虚拟滚动（最重要！）

#### 问题
```
100个token卡片全部渲染在DOM中
→ 大量DOM节点
→ 内存和渲染压力巨大
```

#### 解决方案
```javascript
// 实现虚拟滚动，只渲染可见区域
屏幕可见：       约15-20个卡片
预加载：         上下各5个
实际渲染：       约25-30个卡片

内存节省：       70%（100个 → 30个）
渲染性能提升：   3-5倍
```

#### 实现建议
```javascript
// 使用 vue-virtual-scroller 或 vue-virtual-scroll-list
// 或自己实现简单版本

// 核心思路：
1. 计算可见区域（viewport）
2. 只渲染可见+预加载的卡片
3. 监听滚动，动态更新渲染列表
4. 使用 transform 而非 top/margin 定位
```

**预期效果：**
- 内存：1.5GB → **800MB** ⬇️ 减少47%
- CPU：50% → **25%** ⬇️ 减少50%
- 渲染：卡顿 → **流畅** ✅

---

### 🔇 方案2：禁用/优化日志输出

#### 问题
```javascript
// 100个token × 每秒10条日志 = 1000条/秒
console.log() 非常消耗性能
每条日志都会触发浏览器渲染
```

#### 解决方案
```javascript
// 方案A：生产模式禁用日志（推荐）
const DEBUG_MODE = false  // 批量任务时设为false

if (DEBUG_MODE) {
  console.log(...)
}

// 方案B：限制日志级别
只保留 error 和 warn
禁用 info 和 debug

// 方案C：批量输出日志
每100条日志合并输出一次
而不是每条都立即输出
```

**预期效果：**
- CPU：-10-15%
- 渲染流畅度：明显提升

---

### ⚡ 方案3：UI更新节流

#### 问题
```javascript
// 100个token每500ms更新一次进度
// 每秒触发200次Vue响应式更新
taskProgress.value[tokenId].progress = 50  // 触发更新
```

#### 解决方案
```javascript
// 使用节流（throttle）限制更新频率

// 当前：每个任务完成就更新
// 优化：每1-2秒批量更新一次

const updateBatch = new Map()
let updateTimer = null

function throttledUpdate(tokenId, updates) {
  updateBatch.set(tokenId, { ...updateBatch.get(tokenId), ...updates })
  
  if (!updateTimer) {
    updateTimer = setTimeout(() => {
      // 批量应用所有更新
      updateBatch.forEach((updates, id) => {
        Object.assign(taskProgress.value[id], updates)
      })
      updateBatch.clear()
      updateTimer = null
    }, 1000)  // 每秒更新一次
  }
}
```

**预期效果：**
- Vue响应式更新：200次/秒 → **20次/秒** ⬇️
- CPU：-5-10%

---

### 🎨 方案4：禁用动画和过渡

#### 问题
```javascript
// CSS动画和过渡效果消耗GPU/CPU
.card {
  transition: all 0.3s;
  animation: pulse 2s infinite;
}
```

#### 解决方案
```javascript
// 在批量任务执行时禁用所有动画

// 方案A：添加CSS类
.batch-executing {
  * {
    animation: none !important;
    transition: none !important;
  }
}

// 方案B：JavaScript控制
document.body.classList.add('disable-animations')
```

**预期效果：**
- GPU占用：-20-30%
- 页面流畅度：提升

---

### 💾 方案5：优化内存管理

#### 5.1 限制历史记录

```javascript
// 问题：保留所有执行历史
executionHistory.value.unshift(historyItem)

// 优化：只保留最近的
if (executionHistory.value.length > 5) {  // 改为5
  executionHistory.value = executionHistory.value.slice(0, 5)
}
```

#### 5.2 清理已完成的token数据

```javascript
// 问题：已完成的token仍保留完整数据
// 优化：只保留摘要信息

function compactCompletedToken(tokenId) {
  const progress = taskProgress.value[tokenId]
  if (progress.status === 'completed' || progress.status === 'failed') {
    // 只保留关键信息，清理详细数据
    progress.result = null  // 清理任务结果详情
    progress.error = progress.error ? '错误已记录' : null
  }
}
```

#### 5.3 WebSocket连接及时断开

```javascript
// 确保任务完成后立即断开连接
// 当前已实现，但要确保没有泄漏

finally {
  if (tokenStore.wsConnections[tokenId]) {
    tokenStore.closeWebSocketConnection(tokenId)
  }
}
```

**预期效果：**
- 内存占用：-200-400MB

---

### 🔧 方案6：优化WebSocket消息处理

#### 问题
```javascript
// 每条消息都触发复杂的响应式更新
socket.onmessage = (event) => {
  const data = parseMessage(event.data)
  // 触发多层响应式更新
  store.messages.push(data)  // 触发更新
  store.unreadCount++        // 触发更新
  updateUI()                 // 触发更新
}
```

#### 解决方案
```javascript
// 使用 nextTick 批量处理消息
const messageQueue = []

socket.onmessage = (event) => {
  messageQueue.push(event.data)
  
  // 使用 requestIdleCallback 在空闲时处理
  requestIdleCallback(() => {
    const batch = messageQueue.splice(0, 100)
    processBatch(batch)
  })
}
```

**预期效果：**
- 消息处理效率：提升30-50%
- CPU尖刺：减少

---

### ⏱️ 方案7：进一步缩短延迟时间

#### 当前配置
```javascript
连接稳定等待: 2000ms
任务间隔: 500ms
连接间隔: 500ms
```

#### 优化配置（100并发专用）
```javascript
连接稳定等待: 300ms   ⬇️（并发高时可以更短）
任务间隔: 200ms        ⬇️
连接间隔: 300ms        ⬇️
子任务延迟: 50-100ms   ⬇️
```

**原理：**
- 100个并发时，等待时间可以重叠
- 不需要每个都等足2秒
- 通过并发实现"虚拟等待"

**预期效果：**
- 每个token节省：3-5秒
- 总时间节省：100个 × 4秒 = 400秒

---

## 🔧 具体代码实施

### 优先级1：立即实施（核心优化）

#### ✅ 1. 禁用日志输出

在 `src/stores/batchTaskStore.js` 顶部添加：

```javascript
// 批量任务性能优化：禁用日志
const ENABLE_BATCH_LOGS = false  // 改为false

// 包装所有console.log
const batchLog = ENABLE_BATCH_LOGS ? console.log.bind(console) : () => {}

// 替换所有 console.log 为 batchLog
// 搜索：console.log
// 替换：batchLog
```

#### ✅ 2. 缩短延迟时间

```javascript
// 第348行：连接稳定等待
await new Promise(resolve => setTimeout(resolve, 2000))
// 改为
await new Promise(resolve => setTimeout(resolve, 300))

// 第401行：任务间隔
await new Promise(resolve => setTimeout(resolve, 500))
// 改为
await new Promise(resolve => setTimeout(resolve, 200))

// 第259行：连接间隔
const delayMs = connectionIndex * 500
// 改为
const delayMs = connectionIndex * 300
```

#### ✅ 3. 限制历史记录

```javascript
// 第1689行
if (executionHistory.value.length > 10) {
  executionHistory.value = executionHistory.value.slice(0, 10)
}
// 改为
if (executionHistory.value.length > 3) {
  executionHistory.value = executionHistory.value.slice(0, 3)
}
```

#### ✅ 4. UI更新节流

在 `src/stores/batchTaskStore.js` 中添加：

```javascript
// 更新进度节流
let updateThrottleTimer = null
const pendingUpdates = new Map()

const updateTaskProgressThrottled = (tokenId, updates) => {
  pendingUpdates.set(tokenId, { ...pendingUpdates.get(tokenId), ...updates })
  
  if (!updateThrottleTimer) {
    updateThrottleTimer = setTimeout(() => {
      pendingUpdates.forEach((updates, id) => {
        if (taskProgress.value[id]) {
          Object.assign(taskProgress.value[id], updates)
        }
      })
      pendingUpdates.clear()
      updateThrottleTimer = null
    }, 500)  // 每500ms更新一次
  }
}

// 在非关键更新处使用 updateTaskProgressThrottled
// 关键更新（开始、结束、失败）仍使用 updateTaskProgress
```

---

### 优先级2：重要优化（需要更多工作）

#### ⭐ 虚拟滚动实现

这需要修改 `TaskProgressCard` 组件的渲染逻辑。

**简单方案：**
```vue
<template>
  <div class="token-list-container" @scroll="handleScroll">
    <div class="token-list-spacer" :style="{ height: totalHeight + 'px' }">
      <div class="token-list-visible" :style="{ transform: `translateY(${offsetY}px)` }">
        <TaskProgressCard
          v-for="token in visibleTokens"
          :key="token.id"
          :token="token"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
const CARD_HEIGHT = 200  // 每个卡片高度
const VISIBLE_COUNT = 20  // 可见数量
const BUFFER_COUNT = 5    // 缓冲数量

const visibleTokens = computed(() => {
  const start = Math.max(0, scrollTop.value - BUFFER_COUNT)
  const end = Math.min(tokens.length, start + VISIBLE_COUNT + BUFFER_COUNT * 2)
  return tokens.slice(start, end)
})

const totalHeight = computed(() => tokens.length * CARD_HEIGHT)
const offsetY = computed(() => scrollTop.value * CARD_HEIGHT)
</script>
```

**预期效果：**
- 内存：-800MB
- CPU：-25%
- 渲染：流畅

---

## 📊 优化效果预估

### 内存占用对比

| 项目 | 优化前 | 优化后 | 节省 |
|------|--------|--------|------|
| **DOM渲染** | 1000MB | 300MB | **-700MB** ⬇️ |
| **日志数据** | 200MB | 20MB | **-180MB** ⬇️ |
| **历史记录** | 100MB | 30MB | **-70MB** ⬇️ |
| **其他** | 500MB | 450MB | -50MB |
| **总计** | **1800MB** | **800MB** | **-1000MB (55%)** ⬇️ |

### CPU占用对比

| 项目 | 优化前 | 优化后 | 节省 |
|------|--------|--------|------|
| **UI渲染** | 20% | 5% | **-15%** ⬇️ |
| **日志输出** | 10% | 1% | **-9%** ⬇️ |
| **Vue更新** | 15% | 5% | **-10%** ⬇️ |
| **WS消息** | 10% | 8% | -2% |
| **任务逻辑** | 5% | 5% | 0% |
| **总计** | **60%** | **24%** | **-36% (60%)** ⬇️ |

### 执行时间对比（700个token）

| 方案 | 批次 | 单批时间 | 总时间 |
|------|------|---------|--------|
| **优化前** | 7批 | 3-4分钟 | **21-28分钟** |
| **优化后** | 7批 | 1.5-2分钟 | **10.5-14分钟** ⬇️ |
| **节省** | - | 1.5-2分钟 | **10-14分钟 (50%)** ⬇️ |

---

## ⚠️ 实施建议

### 分阶段实施

#### 阶段1：立即可做（30分钟）
```
1. ✅ 禁用日志输出
2. ✅ 缩短延迟时间
3. ✅ 限制历史记录
4. ✅ 测试50个token

预期效果：内存-300MB，CPU-15%
```

#### 阶段2：重要优化（2小时）
```
1. ⭐ 实现虚拟滚动
2. ✅ UI更新节流
3. ✅ 禁用动画
4. ✅ 测试100个token

预期效果：内存-800MB，CPU-35%
```

#### 阶段3：全面测试（1天）
```
1. 测试100并发
2. 测试700全量（7批）
3. 监控性能指标
4. 调优参数
```

---

### 测试检查清单

**启动前检查：**
- [ ] 关闭其他浏览器标签页
- [ ] 关闭不必要的应用程序
- [ ] 确保内存 >4GB 可用
- [ ] 确保网络稳定

**运行中监控：**
- [ ] 任务管理器监控内存（目标<2GB）
- [ ] 任务管理器监控CPU（目标<40%）
- [ ] 浏览器控制台无错误
- [ ] 页面可以正常滚动

**完成后检查：**
- [ ] 成功率 >85%
- [ ] 浏览器未崩溃
- [ ] 内存正常释放
- [ ] 记录实际数据

---

## 💡 额外建议

### 1. 分批策略优化

**不建议：** 一次100个 × 7批
**建议：** 
```
方案A：50个 × 14批（更稳定）
方案B：70个 × 10批（平衡）
方案C：100个 × 7批（激进，需全面优化）
```

### 2. 时间分散

**建议：** 
```
- 不要一口气跑完700个
- 分成早中晚3次，每次跑230个
- 避免长时间高负载
```

### 3. 备用方案

如果浏览器仍然吃不消：

**方案A：使用多个浏览器实例**
```
浏览器1：运行350个token（并发50）
浏览器2：运行350个token（并发50）
```

**方案B：使用Headless模式**
```
使用Puppeteer/Playwright
无UI运行，内存占用更小
```

---

## 📝 需要我立即实施的代码修改

我可以马上帮您修改：

### ✅ 核心优化（推荐立即实施）
1. 禁用日志输出
2. 缩短延迟时间（300ms/200ms/300ms）
3. 限制历史记录（10条→3条）
4. UI更新节流（每500ms）

**预期效果：**
- 内存：1800MB → **1200MB** ⬇️
- CPU：60% → **35%** ⬇️
- 时间：21分钟 → **14分钟** ⬇️

### ⭐ 重要优化（需要更多时间）
5. 虚拟滚动（需要1-2小时）
6. 禁用动画
7. WebSocket消息批处理

**预期效果：**
- 内存：1200MB → **800MB** ⬇️
- CPU：35% → **24%** ⬇️
- 时间：14分钟 → **10.5分钟** ⬇️

---

## 🚀 请确认

**您希望我现在：**
1. ✅ 立即实施核心优化（4项修改）？
2. ⭐ 同时实施虚拟滚动（需要更多时间）？
3. 📋 还是先提供完整修改清单，您自行决定？

**或者您想先测试：**
- 调整并发数到50或70，看看现状能否承受？

请告诉我您的选择！ 🎯