Initial commit: 上传整个code目录

perf/list-vxe-performance-test.md

@@ -0,0 +1,114 @@
+# 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 | - | - | - | - | - |