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

[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这里的逻辑太长了，感觉底层设计有问题，这样可以临时解决

[dekexu]

大表左右滑动 栈溢出这个问题 G现在解决了么？ S2有没有比较好的workaround方式 ，可以暂时跳过这个的

[lijinke666]

更新: 升级到 @antv/s2@^2.0.0-next.30 即可, 更新了 G 的最新依赖, 未复现该问题. 官网后续部署.

一个临时解决方案, 升级 S2 到最新版本, 开启 G 的 视锥剔除 (注意: 是否对 S2 其他场景有副作用还待验证, 请谨慎使用, 待稳定后在 2.0 正式版中默认开启)

const s2Options = {
  transformCanvasConfig(renderer) {
    renderer.setConfig({
      enableCulling: true,
    })
  },
}

[yukre]

一个临时解决方案, 升级 S2 到最新版本, 开启 G 的 视锥剔除 (注意: 是否对 S2 其他场景有副作用还待验证, 请谨慎使用, 待稳定后在 2.0 正式版中默认开启)

const s2Options = {
  transformCanvasConfig(renderer) {
    renderer.setConfig({
      enableCulling: true,
    })
  },
}

你这个方案和G的issue中的方案刚好相反，https://github.com/antvis/G/issues/1712#issuecomment-2357614783，请教下是我理解错误了么

[lijinke666]

你这个方案和G的issue中的方案刚好相反

G 的 enableCulling 默认就是关闭的

---

G 最近优化了该问题, 最新版本经测试未复现 (无需修改 enableCulling )

如果你说的是在 S2 中遇到了, 那么可以试试升级到 @antv/s2@^2.0.0-next.30
如果你使用的只是 G, 那么升级 G 的相关依赖到最新版本即可

[wangjinqing111]

@antv/s2@^2.0.0-next.30

开启视锥剔除栈溢出问题没出现了，但是在行头非冻结，并且超长行头的情况下（行头宽度超过可视区域），多维表的数据区域和列头区域没渲染出来

[lijinke666]

开启视锥剔除栈溢出问题没出现了

最新版本的 G 解决了该问题, S2 这一层不用修改什么配置 (不需要开启视锥剔除), 升级到最新版本即可, 可以关掉再试试, 应该也不会栈溢出才对, 我这边经测试, 堆栈溢出未复现.