# list-vxe 性能测试记录

## 测试方法

### 方法1：Console 计时（推荐，简单可靠）

1. 打开 Chrome DevTools → Console
2. 确保 `VxeTable.vue` 中有 `console.time('[perf] vxeGrid::render')` 计时代码
3. 强刷页面（Ctrl+Shift+R），等待首次加载完成
4. 清空 Console（Ctrl+L）
5. 切换分页到 500 条
6. 等待 Console 出现 `[perf] vxeGrid::render: XXXms`，记录数值
7. 重复 3 次取中位数

### 方法2：Performance 面板录制

1. 打开 DevTools → Performance 面板
2. 勾选顶部 **Screenshots**
3. 点击 ⏺ 开始录制（或 Ctrl+E）
4. 切换分页到 500 条
5. 等渲染完成后点 ⏹ 停止
6. 如果 DevTools 崩溃（数据量大时主线程阻塞过久），可用小数据量（100条）测，或用"保存 trace"方式

### 方法3：保存 Trace 文件（大数据量推荐）

当 Performance 面板录制会崩溃时：
1. Performance 面板 → 点击 ⏺ 录制 → 操作 → 等待完成
2. 如果崩溃，可以事先在 Console 中执行 `performance.mark('start')` 和操作后执行 `performance.mark('end')`
3. 或者直接保存 trace：录制完成后点击 ↓ 保存按钮，导出 `.json.gz` 文件
4. 将 trace 文件交由脚本分析

### Performance 面板关键指标说明

| 指标 | 含义 | 在哪看 |
| --- | --- | --- |
| **Long Task**（红色三角） | 主线程阻塞 > 50ms 的任务 | Main 时间线 |
| **Scripting**（黄色） | JS 执行时间 | Summary 饼图 |
| **Rendering**（紫色） | 样式计算 + 布局（UpdateLayoutTree + Layout） | Summary 饼图 |
| **Painting**（绿色） | 绘制 + 合成 | Summary 饼图 |
| **GC**（橙色条纹） | 垃圾回收（MinorGC / MajorGC） | Main 时间线 |
| **Self Time** | 函数自身耗时（不含子调用） | Bottom-Up 面板 |
| **Total Time** | 函数总耗时（含子调用） | Bottom-Up 面板 |

---

## 基准测试（优化前）

测试条件：375 rows × 37 columns = 13,875 cells

### Console 计时

| 测试项 | 第1次 | 第2次 | 第3次 | 中位数 |
| --- | --- | --- | --- | --- |
| 正常渲染（分页20→500） | 23,577ms | 25,611ms | - | ~24,500ms |
| 纯文本渲染（_PERF_SIMPLE_RENDER） | 3,221ms | - | - | ~3,200ms |

### Chrome Performance Trace 分析（Trace-20260312T161653）

#### 两个 Long Task

| Long Task | 耗时 | 对应阶段 |
| --- | --- | --- |
| Task 1 | **11,019ms** | 主渲染（375行数据到达后的 vxe-grid 渲染） |
| Task 2 | **3,033ms** | 过渡渲染（loading 阶段旧 20 行数据） |
| Task 3 | 646ms | 其他 |
| Task 4 | 608ms | 其他 |

#### Task 1（11,019ms）耗时分解

| 类别 | 耗时 | 说明 |
| --- | --- | --- |
| **JS 执行（v8.callFunction + RunMicrotasks）** | **~11,019ms** | Vue patch + slot 函数调用 |
| GC - Minor（Scavenger） | ~436ms + ~1,962ms 后台 | 新生代 GC，114 次触发 |
| GC - Major（Mark-Compact） | ~870ms 后台标记 | 老生代 GC 后台标记 |
| UpdateLayoutTree（样式计算） | ~823ms | 4,431 次样式重算 |
| Layout（布局） | ~146ms | 12 次布局计算 |

**关键发现：**
- **GC 开销显著**：MinorGC 触发 114 次（~436ms），说明大量短生命周期对象被创建（VNode、闭包、临时对象）
- **UpdateLayoutTree 823ms**：4,431 次样式重算，vxe-grid 每插入一批 DOM 都会触发
- **Layout 仅 146ms**：实际布局计算不贵，瓶颈在 JS 执行和 GC

#### Task 2（3,033ms）耗时分解

| 类别 | 耗时 | 说明 |
| --- | --- | --- |
| JS 执行 | ~3,033ms | 过渡渲染（round#2，旧 20 行） |
| GC - Minor | ~124ms，31 次 | |
| UpdateLayoutTree | ~226ms | |
| Layout | ~41ms | |

---

## 优化测试记录

### 优化1: [待填写]

修改文件：
- `xxx.ts`: [修改内容简述]

| 测试项 | 第1次 | 第2次 | 第3次 | 中位数 | 对比基准 |
| --- | --- | --- | --- | --- | --- |
| 分页20→500 | - | - | - | - | - |

---

### 优化2: [待填写]

修改文件：
- `xxx.ts`: [修改内容简述]

| 测试项 | 第1次 | 第2次 | 第3次 | 中位数 | 对比基准 |
| --- | --- | --- | --- | --- | --- |
| 分页20→500 | - | - | - | - | - |