6.1 KiB

Raw Blame History

Phase 1 性能测试指南

🚀 快速开始

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

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

测试步骤：

测试 1: 防抖功能 🔍

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

测试 2: 定时器优化 ⏱️

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

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

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

打开应用

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

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

运行监控脚本

// 在 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');
})();

执行测试
- 打开历史记录面板
- 在搜索框中快速输入 "test"（4 个字符）
- 等待 500ms
- 在 Console 运行 window.__testRenderCount()
验证结果
- ✅ 预期：只触发 1 次渲染
- ❌ 优化前：会触发 4 次渲染

测试定时器（批注轮询）

打开应用并加载文档
- 上传并处理一个文档
- 进入历史详情页（有批注功能的页面）
打开任务管理器
- Windows: Ctrl+Shift+Esc → 切换到 "详细信息"
- 或浏览器任务管理器: Shift+Esc
观察 CPU 占用
- 记录当前页面的 CPU 占用（例如：2%）
- 切换到其他标签页
- 等待 10 秒
- 观察 CPU 是否降至接近 0%

使用 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');
})();

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

📊 性能对比

防抖优化

场景	优化前	优化后	提升
输入 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: 在实际应用中看不到效果

确认你在正确的页面（历史记录页面）
检查是否有其他脚本错误影响
打开 Console 查看是否有错误日志

Q4: 如何验证优化真的生效了？

A: 使用 Chrome DevTools Performance 工具：

打开 DevTools → Performance 标签
点击录制按钮
在搜索框快速输入
停止录制
查找 renderHistoryList 函数调用次数

📝 测试报告模板

## Phase 1 性能测试报告

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

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

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

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

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

🎯 预期结果

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

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

🔗 相关文档

祝测试顺利！ 🚀

6.1 KiB Raw Blame History Unescape Escape