董海洋
115 lines
4.0 KiB
Markdown
115 lines
4.0 KiB
Markdown
# 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 | - | - | - | - | - |
|