[Bug]: Browser crash due to v5 memory usage

[xiaoxiaofu1]

Describe the bug / 问题描述

数据量没有变化的情况下，随着操作次数越多，内存占用逐渐累加，最后导致浏览器崩溃。
图1 操作前

图2 推拽后

v4没有这个问题，并且同样数据量v4内存是v5的一半
请问有什么方案可以应急解决一下吗？

Reproduction link / 复现链接

No response

Steps to Reproduce the Bug or Issue / 重现步骤

No response

G6 Version / G6 版本

🆕 5.x

OS / 操作系统

• macOS
• Windows
• Linux
• Others / 其他

Browser / 浏览器

• Chrome
• Edge
• Firefox
• Safari (Limited support / 有限支持)
• IE (Nonsupport / 不支持)
• Others / 其他

[Aarebecca]

画布中元素数量有多少？安装的具体 G6 版本号是？理论上 G6 现在不太会发生内存泄露的问题。
拖拽是指的画布还是节点？

[xiaoxiaofu1]

版本5.0.33

demo情况：最下边是一个在官网写的小demo 初始是122M，勾选toggleSelection全选后每拖动一次内存就会增加，可以看到内存从122->145->177-> 199->逐渐增长到了620M,拖动了大概30次，然后内存才恢复降低。但是由于实际项目更复杂，数据更多，可能还没等到释放内存就会很大，导致卡死，并且项目内存释放也是降的少增加的多，导致一直在增加。
实际项目：

1. 初始90M->批量设置元素状态全部选中->143->拖拽所有选中的点->180->再拖拽232->再拖拽-> 257-> 再拖拽290->再拖拽 328 基本在持续增长
2. 批量设置元素状态 先全部选中 再取消选中 反复5次（不执行其它操作）初始内存： 大概85M 内存稳定后： 165M 翻了一倍
3. 缩放操作也会造成内存增长，但是元素少时不明显 当我点1500个，边同样1500个 初始280M->缩放操作放大到最大380->缩小到最小433->再放大521->再缩小667->最后稳定到600左右
   demo内存对比图
   
   
   demo代码
   import { Graph } from '@antv/g6';

function generateRandomGraphData(nodeCount, edgeCount) {
const nodes = [];
const edges = [];

// 创建节点
for (let i = 0; i < nodeCount; i++) {
nodes.push({ id: i.toString() });
}

// 创建边
const possibleEdges = [];
for (let i = 0; i < nodeCount; i++) {
for (let j = i + 1; j < nodeCount; j++) {
possibleEdges.push([i.toString(), j.toString()]);
}
}

// 随机选择边
for (let i = 0; i < edgeCount; i++) {
if (possibleEdges.length === 0) break;
const randomIndex = Math.floor(Math.random() * possibleEdges.length);
const [source, target] = possibleEdges.splice(randomIndex, 1)[0];
edges.push({ source, target });
}

return { nodes, edges };
}

const graph = new Graph({
container: 'container',
autoFit: 'view',
animation: false,
data: generateRandomGraphData(500,500),
layout: {
type: 'antv-dagre',
nodeSize: [60, 30],
nodesep: 60,
ranksep: 40,
controlPoints: true,
},
node: {
type: 'rect',
style: {
size: [60, 30],
radius: 8,
labelText: (d) => d.id,
labelBackground: true,
badges:[
{
text: 'badge1',
placement: 'right-top',
padding: [3],
offsetX: -12,
backgroundFill: 'lightgreen',
},
{
text: 'badge2',
placement: 'right-bottom',
padding: [3],
offsetX: -12,
backgroundFill: 'lightgreen',
}
]
}
},
edge: {
type: 'line',
style:{
labelText: (d) => d.id,
}
},
behaviors: ['drag-element', 'drag-canvas', 'zoom-canvas'],
});

graph.render();
const diffSelectedStates = (elements, graph, state ='selected') => {
const states = elements.reduce((acc, { id, states = [] }) => {
acc[id] = states.includes(state)? states.filter((s) => s!== state) : [...states, state];
return acc;
}, {});
graph.setElementState(states);
}
window.addPanel((gui) => {
const config = {
toggleSelection: false // 新增的布尔值，用于控制是否切换选中
};
// 新增的 GUI 控件，用于切换选项
gui.add(config, 'toggleSelection').onChange((value) => {
const nodes = graph.getNodeData()
diffSelectedStates(nodes,graph)
});
});

[Aarebecca]

@xiaoxiaofu1 测试过程中有手动执行垃圾回收吗

[xiaoxiaofu1]

@xiaoxiaofu1 测试过程中有手动执行垃圾回收吗
没有