【V5】升级v5小版本之后渲染时长明显变久 #6137

stella1997 posted onGitHub

Describe the bug / 问题描述

渲染性能劣化

5000节点渲染5.0.1仅需要860ms，5.0.10需要耗时2192ms

Reproduction link / 重现链接

No response

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

No response

G6 Version / G6 版本

🆕 5.x

Operating System / 操作系统

Windows

Browser / 浏览器

Chrome

Additional context / 补充说明

5000节点渲染5.0.1仅需要860ms，5.0.10需要耗时2192ms

麻烦提供下测试示例呢

posted by Aarebecca 9 months ago

<html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <div id="mountNode"></div> <button id="start" style="margin-top: 200px;">开始渲染</button> </head> <body>

</body> </html> <script src="https://gw.alipayobjects.com/os/lib/antv/g6/5.0.10/dist/g6.min.js"></script>  <script src="./nodes.js"></script> <script> document.getElementById('start').addEventListener('click', myFunction) function myFunction() { const edges = nodesTestNotTrade.edges const nodes = nodesTestNotTrade.nodes nodes.forEach(item => { item.style = { x: posObj[item.id].x, y: posObj[item.id].y } }); const data = { nodes, edges }; const Graph = G6.Graph const graph = new Graph({ width: 1500, height: 900, container: 'mountNode', animation: false, data, behaviors: ['zoom-canvas', 'drag-element'], autoFit: 'view', node: { type: 'circle', style: { size: 5, iconFontFamily: 'iconfont', fill: 'green' } } }); graph.render(); let startTime = 0 graph.on('beforerender', function () { startTime = new Date().valueOf(); console.log('-----------------------render开始-----------------'); }); graph.on('afterrender', function () { console.log(new Date().valueOf() - startTime); console.log('-----------------------render用时-----------------'); }); let startTimeRender = 0 graph.on('beforelayout', function () { startTimeRender = new Date().valueOf(); console.log('-----------------------layout开始-----------------'); }); graph.on('afterlayout', function () { console.log(new Date().valueOf() - startTimeRender); console.log('-----------------------layout用时-----------------'); }); }

</script>

posted by stella1997 9 months ago

@stella1997 我们会尽快分析性能变化原因，感谢反馈

posted by Aarebecca 9 months ago

@stella1997 我们会尽快分析性能变化原因，感谢反馈

同时想请教下，为什么在vue工程里同一个demo渲染时间会比CDN引入也慢很多呢？CDN引入渲染1-2s，但是Vue工程中渲染达到4-5s。

不排除可能是 vite 构建的时间开销，理论上性能应该是没有区别的

posted by Aarebecca 8 months ago

Fund this Issue

$0.00

Funded

Only logged in users can fund an issue

Pull requests

Do you want to work on this issue?

【V5】升级v5小版本之后渲染时长明显变久 #6137

Describe the bug / 问题描述

Reproduction link / 重现链接

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

G6 Version / G6 版本

Operating System / 操作系统

Browser / 浏览器

Additional context / 补充说明

Company

Community

Support

Connect