🐛多行头大数据(1w条左右)透视表渲染卡顿

[wyh888]

🏷 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

[lijinke666]

#2631

[lijinke666]

感谢反馈, 会在后续优化

[Azhi-ux]

感谢反馈, 会在后续优化

大哥啥时候发release呀，我也是这里数据一多占用内存很高，浏览器就崩了

[lijinke666]

🎉 This issue has been resolved in version @antv/s2-v2.0.0-next.21 🎉

The release is available on:

• npm package (@next dist-tag)
• GitHub release

Your semantic-release bot 📦🚀