antvis / G

💥 A flexible rendering engine for visualization.
https://g.antv.antgroup.com/
1.04k stars 192 forks source link

v5/v6 版本滚动性能下降明显 #1712

Open lijinke666 opened 2 weeks ago

lijinke666 commented 2 weeks ago

问题描述

S2 1.x 平均滚动帧率接近 60 fps

"@antv/g-canvas": "^0.5.12"

image

Kapture 2024-06-18 at 17 12 17

S2 2.x 平均滚动帧率只有 20+ fps, long task 很多, 且滚动一段时间后会出现 G 内部的堆栈溢出 (初步看起来应该不是 S2 导致的): https://github.com/antvis/S2/issues/2771

image image

"@antv/g": "^6.0.6",
"@antv/g-canvas": "^2.0.7",
"@antv/g-lite": "^2.0.5"

image

Kapture 2024-06-18 at 17 14 48

滚动相关的代码如下, 和 1.x 基本一致:

https://github.com/antvis/S2/blob/f8e00e535ceae093ef34e7de6cfe4a8cfc05f985/packages/s2-core/src/facet/base-facet.ts#L1331-L1433

G 这里没看到有 cancelRequestFrame 的操作, 不太懂这块实现, 且不管有没有滚动 (appendChild), 一直在执行 (看回复是脏检查 https://github.com/antvis/G/issues/1626 ? )

image

复现链接和步骤

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

使用触摸板 水平/垂直滚动 10s 左右即可复现

Kapture 2024-06-18 at 17 55 16

期望

希望高优处理下

  1. 滚动帧率不要太低, 感到肉眼卡顿
  2. 解决频繁滚动后导致堆栈溢出的问题 (对于 G 来说应该就是频繁添加 大量 group 后, 再大量移除 group).
lijinke666 commented 2 days ago

请问有没有什么进展或结论