# 内存优化分析与修复方案

## 问题分析

基于 `/sw-debug.html` 的内存日志分析，发现以下问题：

### 内存使用情况

| 指标 | 值 | 问题 |
|------|-----|------|
| 已使用内存 | 3.3-4.3 GB | 🔴 极高 |
| 内存上限 | 4 GB | 接近/超过上限 |
| 使用率 | 77-101% | 🔴 危险区域 |
| 图片数量 | 30 | 可能过多 |
| 视频数量 | 1 | - |
| Plait 元素 | 80 | 正常 |

### 关键发现

1. **启动时就有 ~3.5GB 内存** - 说明不是运行时泄漏，而是初始加载问题
2. **长任务期间内存飙升到 4.3GB** - 超过了 4GB 限制
3. **刷新后内存不降反升** - 每次刷新内存都在增长

## 问题根源

### 1. 高分辨率图片解码 (主要问题)

**问题描述**：
- 30 张图片在画布上全部解码到内存中
- 一张 4K 图片 (4096x2160) 解码后约 35MB
- 30 张高分辨率图片可能占用 300-1000MB

**代码位置**：
- `packages/drawnix/src/plugins/with-image.tsx`
- Plait 框架内部的图片渲染

### 2. 聊天附件 Base64 存储 (中等问题)

**问题描述**：
- 聊天消息的附件以 base64 字符串形式存储在 IndexedDB
- 一张 2MB 的图片转为 base64 后约 2.6MB
- 大量附件累积会占用大量存储和内存

**代码位置**：
```typescript
// packages/drawnix/src/types/chat.types.ts
export interface Attachment {
  data: string;  // Base64 编码，可能非常大
}
```

### 3. 任务数据累积

**问题描述**：
- 已完成的任务永久保存在 IndexedDB
- 任务结果包含 URL 引用，但工作流数据可能较大

**代码位置**：
- `apps/web/src/sw/task-queue/storage.ts`

### 4. 视频解码缓冲区

**问题描述**：
- 视频元素的解码缓冲区占用内存
- 即使视频暂停，缓冲区也可能保留

## 已实施的修复

### 1. 内存监控服务

添加了 `memory-monitor-service.ts`：

```typescript
// packages/drawnix/src/services/memory-monitor-service.ts

// 功能：
// - 周期性检查内存使用（每 30 秒）
// - 在内存压力过大时触发清理（75% 阈值）
// - 支持注册自定义清理处理器
// - 提供内存统计 API

// 使用：
import { memoryMonitorService } from './services/memory-monitor-service';

// 获取内存状态
const stats = memoryMonitorService.getMemoryStats();
console.log(stats?.formatted.used); // "3.2 GB"

// 手动触发清理
await memoryMonitorService.triggerCleanup();
```

### 2. 自动启动内存监控

在 `apps/web/src/main.tsx` 中添加了自动启动：

```typescript
import { memoryMonitorService } from '../../../packages/drawnix/src/services/memory-monitor-service';

// 延迟 5 秒启动，避免影响首屏加载
setTimeout(() => {
  memoryMonitorService.start();
  memoryMonitorService.logMemoryStatus();
}, 5000);
```

### 3. 离屏图片自动卸载

内存监控服务包含了离屏图片清理逻辑：

```typescript
// 找到离屏图片并暂时移除 src
const isOffscreen = 
  rect.bottom < -500 || 
  rect.top > window.innerHeight + 500;

if (isOffscreen) {
  img.setAttribute('data-lazy-src', src);
  img.removeAttribute('src');
}
```

## 建议的进一步优化

### 优先级 1：图片懒加载优化

**目标**：只解码视口内的图片

**方案**：
1. 在 Plait 的图片渲染中使用 `loading="lazy"` 和 `decoding="async"`
2. 对离屏图片使用占位符而不是实际图片

**修改位置**：
- `packages/drawnix/src/plugins/with-image.tsx`

### 优先级 2：聊天附件外部化存储

**目标**：减少 IndexedDB 中的 base64 数据

**方案**：
1. 将附件 Blob 存储到 Cache API
2. 在 IndexedDB 中只存储虚拟 URL 引用
3. 需要时从 Cache API 获取

**修改位置**：
- `packages/drawnix/src/services/chat-storage-service.ts`
- `packages/drawnix/src/types/chat.types.ts`

### 优先级 3：图片尺寸限制

**目标**：限制画布上图片的最大解码尺寸

**方案**：
1. 在插入图片时检查尺寸
2. 对超大图片自动缩放
3. 提供高清预览选项

### 优先级 4：定期内存报告

**目标**：帮助用户了解内存使用情况

**方案**：
1. 在设置页面显示内存使用统计
2. 在内存压力时显示警告
3. 提供手动清理选项

## 用户操作建议

如果遇到内存问题，可以：

1. **减少画布上的图片数量** - 将不需要的图片移到其他画板
2. **使用较低分辨率的图片** - 特别是在移动设备上
3. **定期刷新页面** - 释放累积的内存
4. **清理聊天历史** - 删除包含大量附件的旧会话
5. **关闭其他标签页** - 释放浏览器资源

## 调试方法

### 使用 SW Debug 面板

访问 `/sw-debug.html` 查看：
- 内存使用趋势
- 长任务监控
- 内存快照

### 使用 Chrome DevTools

1. **Memory 面板**：
   - 拍摄堆快照分析内存分布
   - 查看哪些对象占用最多内存

2. **Performance 面板**：
   - 记录性能profile
   - 分析长任务和内存增长

### 控制台命令

```javascript
// 获取内存状态
memoryMonitorService.logMemoryStatus();

// 手动触发清理
await memoryMonitorService.triggerCleanup(true);

// 获取详细统计
const stats = memoryMonitorService.getMemoryStats();
console.table(stats);
```

## 相关文件

- `packages/drawnix/src/services/memory-monitor-service.ts` - 内存监控服务
- `apps/web/src/main.tsx` - 内存监控初始化
- `packages/drawnix/src/components/lazy-image/LazyImage.tsx` - 懒加载图片组件
- `packages/drawnix/src/hooks/useImageLazyLoad.ts` - 图片懒加载 Hook