G icon indicating copy to clipboard operation
G copied to clipboard

如何测量 g 的渲染性能?

Open zuiidea opened this issue 4 years ago • 1 comments

做一个G6G的渲染耗时测试,从代码执行耗时上能看到明显的差异,G6graph.read(data)耗时较长,G的耗时仅表现在对节点的遍历上。 但是同时使用G6G渲染时,从视觉效果上几乎是同时展现的。是否有方法能拿到G真正渲染结束时的回调?

image

  • 在线代码演示

Edit G/G6 large number of nodes Test

zuiidea avatar Jan 04 '21 07:01 zuiidea

但是同时使用G6G渲染时,从视觉效果上几乎是同时展现的

这里的原因应该是代码执行到graph.read(data),导致页面卡住,阻塞了G的渲染,改成下面方式有明显的先后渲染顺序

setTimeout(() => {
  graph.read(data);
  document.getElementById("root-time").innerText = Date.now() - now;
},0)

zuiidea avatar Jan 04 '21 07:01 zuiidea