paper-burner/tests/performance

Phase 1 性能测试指南

🚀 快速开始

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

# 在浏览器中打开测试页面
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. 打开应用

   start index.html
   # 或在开发服务器中打开
   

2. 打开浏览器开发者工具

   • 按 F12 或 Ctrl+Shift+I
   • 切换到 Console 标签

3. 运行监控脚本

   // 在 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 监控

   // 在 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 函数调用次数

---

📝 测试报告模板

## Phase 1 性能测试报告

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

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

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

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

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

---

🎯 预期结果

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

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

---

🔗 相关文档

• 完整优化计划
• Phase 1 总结
• 详细测试指南

---

祝测试顺利！ 🚀