🐛多行头大数据(1w条左右)透视表渲染卡顿
wyh888 opened this issue · comments
wyh888 commented
🏷 Version
Package | Version |
---|---|
@antv/s2 | 2.0.0-next.17 |
@antv/s2-react | 2.0.0-next.16 |
Sheet Type
- PivotSheet
- TableSheet
- GridAnalysisSheet
- StrategySheet
- EditableSheet
🖋 Description
设置多行头并且数据量稍大(1w条左右)的情况下,透视表渲染明显卡顿,resize、拖拽表头宽高等操作都会变得很卡顿
如:
fields: {
rows: ['type', 'subType', 'province', 'city'],
columns: [],
values: ['number'],
}
⌨️ Code Snapshots
用以下代码改下官网的在线示例 https://s2.antv.antgroup.com/examples/case/performance-compare#pivot
import { PivotSheet } from '@antv/s2';
const s2Options = {
width: 600,
height: 480,
};
export function generateRawData(
row,
col,
) {
const res = [];
const rowKeys = Object.keys(row);
const colKeys = Object.keys(col);
for (let i = 0; i < row[rowKeys[0]]; i++) {
for (let j = 0; j < row[rowKeys[1]]; j++) {
for (let m = 0; m < col[colKeys[0]]; m++) {
for (let n = 0; n < col[colKeys[1]]; n++) {
res.push({
province: `p${i}`,
city: `c${j}`,
type: `type${m}`,
subType: `subType${n}`,
number: i * n,
});
}
}
}
}
return res;
}
const s2DataConfig = {
fields: {
rows: ['type', 'subType', 'province', 'city'],
columns: [],
values: ['number'],
},
data: generateRawData(
{ province: 2, city: 100 },
{ type: 1, sub_type: 100 },
),
};
async function bootstrap() {
const container = document.getElementById('container');
const s2 = new PivotSheet(container, s2DataConfig, s2Options);
await s2.render();
}
bootstrap();
然后调整表头宽度,会看到明显卡顿:
🤔 Steps to Reproduce
可用上述代码在官网在线示例复现
😊 Expected Behavior
同样的代码,在 v1 版本表现良好,期望能达到 v1 的渲染性能或者更佳
😅 Current Behavior
debug 源码发现是每次计算高度时重新绘制了 text 取高度:
💻 System information
Environment | Info |
---|---|
System | Mac: 12.6.3 |
Browser | Chrome: 124.0.6367.92 |
Jinke Li commented
感谢反馈, 会在后续优化
X•Z commented
感谢反馈, 会在后续优化
大哥啥时候发release呀,我也是这里数据一多占用内存很高,浏览器就崩了
Jinke Li commented
🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.21 🎉
The release is available on:
Your semantic-release bot 📦🚀