antvis / antvis/G

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

Open
#1,712 16 comments 10 reactions 0 assignees View on GitHub
performance
Dominant language
TypeScript
Stars
1.2k
Forks
230
PR merge metrics
No merged PRs in 30d

Description

### 问题描述

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

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

![image](https://github.com/antvis/G/assets/21015895/41567c8a-f420-4260-8225-349378cdf59f)

![Kapture 2024-06-18 at 17 12 17](https://github.com/antvis/G/assets/21015895/dbd579ee-7abd-4345-8809-c0c160082b25)

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

![image](https://github.com/antvis/G/assets/21015895/047018c1-283a-4439-9e05-3981578b0222)
![image](https://github.com/antvis/G/assets/21015895/b125b416-f802-4f60-89f6-b22f3484bed1)

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

![image](https://github.com/antvis/G/assets/21015895/4e2321db-8b99-44e0-81d3-fc78c9632a73)

![Kapture 2024-06-18 at 17 14 48](https://github.com/antvis/G/assets/21015895/f30d85a6-d866-4713-85cc-1c862ed1ccf8)

滚动相关的代码如下, 和 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://github.com/antvis/G/assets/21015895/b3823f5e-eb73-458b-8191-744d1c358613)

### 复现链接和步骤

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

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

![Kapture 2024-06-18 at 17 55 16](https://github.com/antvis/G/assets/21015895/fc7df979-f5dc-4289-9037-fe0d2e52953f)

### 期望

希望高优处理下

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

Contributor guide

Open the contributing guide

Research direction

Start with the S2 performance-compare reproduction and the linked base-facet.ts scrolling code, comparing the listed G 1.x and 2.x package versions. Profile scrolling while inspecting G's request-frame behavior and the appendChild/group removal path, including the discussion in issue 1626; done means smoother scrolling and no stack overflow after repeated scrolling.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
computer-graphics, performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.