wukuang/perf/list-vxe-performance-test.md

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	-	-	-	-	-