# Phase 1 性能测试指南

## 🚀 快速开始

### 方法 1: 使用自动化测试工具（推荐）

```bash
# 在浏览器中打开测试页面
start tests/performance/phase1-test.html
```

**测试步骤**：

#### 测试 1: 防抖功能 🔍
1. 点击 "▶️ 运行测试" 按钮
2. 观察日志输出
3. 查看结果：
   - ✅ **通过**：触发 10 次，执行 1 次（减少 90%）
   - ❌ **失败**：执行次数 > 1

#### 测试 2: 定时器优化 ⏱️
1. 点击 "▶️ 开始监控" 按钮
2. **切换到其他标签页** 5-10 秒
3. 切回测试页面
4. 点击 "⏹️ 停止监控" 按钮
5. 查看结果：
   - ✅ **通过**：跳过次数 > 0（页面隐藏时正确跳过）
   - ⚠️ **未验证**：跳过次数 = 0（需要切换标签页）

---

### 方法 2: 在实际应用中测试

#### 测试防抖（历史记录搜索）

1. **打开应用**
   ```bash
   start index.html
   # 或在开发服务器中打开
   ```

2. **打开浏览器开发者工具**
   - 按 `F12` 或 `Ctrl+Shift+I`
   - 切换到 **Console** 标签

3. **运行监控脚本**
   ```javascript
   // 在 Console 中粘贴以下代码
   (function() {
       let renderCount = 0;
       const startTime = Date.now();

       // 尝试找到 renderHistoryList 函数
       // 注意：这个函数可能在闭包中，需要在历史记录页面执行

       console.log('%c[监控] 准备监控 renderHistoryList', 'color: blue; font-weight: bold');
       console.log('%c[提示] 请打开历史记录，然后在搜索框中快速输入文本', 'color: green');

       // 创建全局监控函数
       window.__testRenderCount = () => {
           console.log(`渲染次数: ${renderCount}`);
           console.log(`运行时间: ${((Date.now() - startTime) / 1000).toFixed(1)}s`);
       };

       console.log('%c[提示] 输入完成后，运行 window.__testRenderCount() 查看结果', 'color: orange');
   })();
   ```

4. **执行测试**
   - 打开历史记录面板
   - 在搜索框中快速输入 "test"（4 个字符）
   - 等待 500ms
   - 在 Console 运行 `window.__testRenderCount()`

5. **验证结果**
   - ✅ **预期**：只触发 1 次渲染
   - ❌ **优化前**：会触发 4 次渲染

---

#### 测试定时器（批注轮询）

1. **打开应用并加载文档**
   - 上传并处理一个文档
   - 进入历史详情页（有批注功能的页面）

2. **打开任务管理器**
   - Windows: `Ctrl+Shift+Esc` → 切换到 "详细信息"
   - 或浏览器任务管理器: `Shift+Esc`

3. **观察 CPU 占用**
   - 记录当前页面的 CPU 占用（例如：2%）
   - 切换到其他标签页
   - 等待 10 秒
   - 观察 CPU 是否降至接近 0%

4. **使用 Console 监控**
   ```javascript
   // 在 Console 中运行
   (function() {
       let visibleCount = 0;
       let hiddenCount = 0;

       document.addEventListener('visibilitychange', () => {
           if (document.hidden) {
               console.log('%c[页面隐藏] 轮询应该跳过执行', 'color: orange');
               hiddenCount++;
           } else {
               console.log('%c[页面可见] 轮询恢复执行', 'color: green');
               visibleCount++;
           }

           console.log(`切换次数: 可见 ${visibleCount} 次, 隐藏 ${hiddenCount} 次`);
       });

       console.log('%c[监控启动] 请切换标签页测试', 'color: blue; font-weight: bold');
   })();
   ```

5. **切换标签页并验证**
   - 切换到其他标签 → 应该看到 "页面隐藏" 日志
   - 切回当前标签 → 应该看到 "页面可见" 日志

---

## 📊 性能对比

### 防抖优化

| 场景 | 优化前 | 优化后 | 提升 |
|------|--------|--------|------|
| 输入 4 个字符 | 4 次渲染 | 1 次渲染 | **75% ↓** |
| 输入 10 个字符 | 10 次渲染 | 1 次渲染 | **90% ↓** |
| 用户体验 | 可能卡顿 | 流畅 | ✅ |

### 定时器优化

| 场景 | 优化前 | 优化后 | 提升 |
|------|--------|--------|------|
| 页面可见 | 执行 10 次/10秒 | 执行 10 次/10秒 | 无变化 |
| 页面隐藏 | 执行 10 次/10秒 | 跳过执行 | **100% ↓** |
| CPU 占用（隐藏） | 5-10% | 0-1% | **80-90% ↓** |
| 多标签页 | 浪费资源 | 节省资源 | ✅ |

---

## 🐛 常见问题

### Q1: 测试工具显示"函数执行 0 次"
**A**: 这是正常的！防抖的目的就是延迟执行。测试会等待 300ms 后才执行函数。

### Q2: 定时器测试显示"未验证"
**A**: 需要切换到其他标签页才能触发页面隐藏检测。测试需要至少切换一次标签。

### Q3: 在实际应用中看不到效果
**A**:
1. 确认你在正确的页面（历史记录页面）
2. 检查是否有其他脚本错误影响
3. 打开 Console 查看是否有错误日志

### Q4: 如何验证优化真的生效了？
**A**: 使用 Chrome DevTools Performance 工具：
1. 打开 DevTools → Performance 标签
2. 点击录制按钮
3. 在搜索框快速输入
4. 停止录制
5. 查找 `renderHistoryList` 函数调用次数

---

## 📝 测试报告模板

```markdown
## Phase 1 性能测试报告

**测试日期**: 2025-11-12
**测试人员**: [你的名字]
**浏览器**: Chrome/Edge/Firefox [版本号]
**系统**: Windows/Mac/Linux

### 测试 1: 防抖功能
- [ ] 通过
- [ ] 失败
- 触发次数: ___
- 执行次数: ___
- 减少比例: ___%
- 备注: ___

### 测试 2: 定时器优化
- [ ] 通过
- [ ] 失败
- 轮询次数: ___
- 执行次数: ___
- 跳过次数: ___
- 备注: ___

### 总体评价
- [ ] 所有测试通过，建议合并
- [ ] 部分测试失败，需要修复
- [ ] 未检测到明显效果，需要重新评估

### 其他问题
[记录测试中发现的任何问题]
```

---

## 🎯 预期结果

如果所有测试通过，你应该看到：

✅ **防抖测试**: 触发 10 次，执行 1 次（减少 90%）
✅ **定时器测试**: 页面隐藏时跳过次数 > 0
✅ **综合评价**: 🎉 所有测试通过！

---

## 🔗 相关文档

- [完整优化计划](../../docs/PERFORMANCE_OPTIMIZATION_PLAN.md)
- [Phase 1 总结](../../docs/PHASE1_SUMMARY.md)
- [详细测试指南](../../docs/PHASE1_TESTING_GUIDE.md)

---

**祝测试顺利！** 🚀