Table - 性能基准压测
在大数据场景下，YH-UI Table 的虚拟滚动性能表现。下方为交互式基准压测面板，可实时测量渲染帧率（FPS）、初始渲染时长、滚动平均耗时等关键指标。
交互式压测面板
通过调整参数，实时测量不同数据量下的渲染性能指标（FPS、初始渲染时间、滚动平均耗时、可见 DOM 节点数）。
10,000 行
48px
5
⚡
点击「开始压测」按钮，自动执行 30 次模拟滚动并采集帧率、耗时等指标
ID | 姓名 | 年龄 | 部门 | 薪资 | 城市 | 邮箱 | 状态 |
|---|
点击「开始压测」加载数据
10K 行虚拟滚动性能基准压测
参数说明
| 参数 | 说明 | 建议值 |
|---|---|---|
数据量 | 总行数，滑块范围 1K ~ 100K | 10,000 |
行高 | 每行像素高度，决定虚拟视口计算精度 | 48px |
缓冲行数 | 可见区域外额外渲染行数，越大越平滑但内存消耗更多 | 5 |
性能指标解释
| 指标 | 说明 | 参考标准 |
|---|---|---|
| 初始渲染 | 数据加载到首屏绘制完成耗时 | ≤ 200ms 为优秀 |
| 滚动均值 | 每次滚动触发到下一帧绘制的平均耗时 | ≤ 10ms 为优秀 |
| FPS | 压测期间渲染帧率（越高越流畅） | ≥ 55fps 为极佳 |
| 可见 DOM 行 | 实际渲染在 DOM 中的表格行数（体现虚拟滚动效果） | 与视口行数相当 |
优化建议
- 固定
rowHeight：设置准确的行高值，避免虚拟滚动计算偏差导致滚动条跳动。 - 合理设置
buffer：默认 5 行已满足绝大多数场景，过大会增加不必要的渲染负担。 - 必须设置
row-key：唯一标识符帮助 Vue 的 diff 算法高效复用 DOM 节点。 - 避免在
render函数中创建新对象：使用稳定引用，防止无效重渲染。 - 大数据集推荐分页 + 虚拟滚动结合：超过 50 万行时建议使用服务端分页。