227 lines
6.1 KiB
Markdown
227 lines
6.1 KiB
Markdown
# 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)
|
||
|
||
---
|
||
|
||
**祝测试顺利！** 🚀
|