🐛透视表数据较多时，频繁滚动会导致栈溢出错误

[tufaofu]

🏷 Version

Package	Version
@antv/s2	2.0.0-next.23
@antv/s2-react
@antv/s2-vue

Sheet Type

• PivotSheet
• TableSheet
• GridAnalysisSheet
• StrategySheet
• EditableSheet

🖋 Description

当视表数据较多时，左右或者上下频繁滚动，会导致栈溢出错误。源码@antv/s2-v2.0.0-next.23分支，100w 数据 示例即可复现。

官网示例 100w条数据性能表现-透视表 也可复现。

🔗 Reproduce Link

https://s2.antv.antgroup.com/examples/case/performance-compare#pivot

🤔 Steps to Reproduce

电脑配置如下：

持续滚动60-120s左右就会报错

😊 Expected Behavior

😅 Current Behavior

💻 System information

Environment	Info
System
Browser

[lijinke666]

持续滚动60-120s左右就会报错

什么使用场景会一直滑动 1-2 分钟?

[tufaofu]

当图表数据量比较大，可能就会存在频繁滚动的情况

[lijinke666]

近期看一下这个问题

[lijinke666]

底层渲染引擎 G 的问题 antvis/G#1712, 等待 G 修复

[db-shuai]

G 没人关注啊 这个好久了，有没有什么临时解决方案

[wangnannanziyu]

G 没人关注啊 这个好久了，有没有什么临时解决方案

把官方例子下下来，修改依赖中的g-lite包的源码，找到 Canvas.prototype.render，源代码如下：
Canvas.prototype.render = function (frame) {
var _this = this;
this.dispatchEvent(beforeRenderEvent);
var renderingService = this.getRenderingService();
renderingService.render(this.getConfig(), frame, function () {
// trigger actual rerender event
// @see antvis/G#1268
_this.dispatchEvent(rerenderEvent);
});
this.dispatchEvent(afterRenderEvent);
};

修改后如下：
try {
var _this = this;
this.dispatchEvent(beforeRenderEvent);
var renderingService = this.getRenderingService();
renderingService.render(this.getConfig(), frame, function () {
// trigger actual rerender event
// @see antvis/G#1268
_this.dispatchEvent(rerenderEvent);
});
this.dispatchEvent(afterRenderEvent);
} catch (error) {
const renderer = this.getConfig().renderer
this.getRenderingService().destroy();
this.context.renderingService = new RenderingService(runtime, this.context);
this.initRenderingService(renderer)
}
修改完后，重新构建，项目中引用你自己构建后的资源。

解决思路：
catch 内存溢出的错误，然后销毁 render服务，重新生成一个。这样虽然还是会内存溢出，但是不影响使用。render这里的逻辑太长了，感觉底层设计有问题，这样可以临时解决