antvis / S2

⚡️ A practical visualization library for tabular analysis.

Home Page:https://s2.antv.antgroup.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

透视表渲染10w+的单元格内存持续飙升(可能内存泄漏)浏览器崩溃

Azhi-ux opened this issue · comments

🏷 Version

Package Version
@antv/s2 2.0.0-next.19

Sheet Type

  • PivotSheet

🖋 Description

image 这里为什么要一下子处理所有单元格的宽高呢,在这里很容易直接内存oom;

image

而且拖拽列头依然会执行到这块方法;内存持续飙升;

image

还有官网事例

⌨️ Code Snapshots

🔗 Reproduce Link

🤔 Steps to Reproduce

😊 Expected Behavior

期望能关注内存占用的问题

😅 Current Behavior

💻 System information

Environment Info
System Mac: 14.1
Browser Chrome: 124.0.6367.92

这里是因为每一次重新布局都会重新绘制文本,计算行头的高度,我这边临时的解决方案是覆写 getRowNodeHeight 方法,可以参考下:

import { PivotFacet } from "@antv/s2";

export class PivotFacetSetter extends PivotFacet {
  constructor(spreadsheet) {
    super(spreadsheet);
  }

  // 自定义行头节点高度
  getRowNodeHeight() {
   // ...
    return this.spreadsheet.options.style?.rowCell?.height || 30;
  }
}

options 中:

const options = {
  facet: sheetType === 'pivot' ? (spreadsheet) => new PivotFacetSetter(spreadsheet) : null,
}

这里是因为每一次重新布局都会重新绘制文本,计算行头的高度,我这边临时的解决方案是覆写 getRowNodeHeight 方法,可以参考下:

import { PivotFacet } from "@antv/s2";

export class PivotFacetSetter extends PivotFacet {
  constructor(spreadsheet) {
    super(spreadsheet);
  }

  // 自定义行头节点高度
  getRowNodeHeight() {
   // ...
    return this.spreadsheet.options.style?.rowCell?.height || 30;
  }
}

options 中:

const options = {
  facet: sheetType === 'pivot' ? (spreadsheet) => new PivotFacetSetter(spreadsheet) : null,
}

好的,感谢大佬,我试试🙏