[Perf] High CPU overload and user interaction freezed in SVG map (canvas & svg)

[plainheart]

Version

5.1.1

Reproduction link

https://echarts.apache.org/examples/zh/editor.html?c=geo-svg-scatter-simple

Steps to reproduce

• Open the reproduction link
• Watch the CPU overload in default canvas renderer
• Switch to svg renderer
• Watch the CPU overload and effectScatter rendering
• The effectScatter's animation becomes not smooth any more

What is expected?

Lower CPU overload and effectScatter has a smooth animation

What is actually happening?

High CPU overload and the animation of effectScatter is not smooth.

Others

I noticed that a strange zrender level named zr_100000 was added to the DOM.

[pissang]

@plainheart

zr_100000 is a special zlevel that provided to the hover layer.

SVG rendering mode is not good at animation performance because each frame it needs to find out which DOM needs to be updated and manipulate the attributes of DOM(just like what virtual dom does). Even if we did lots of optimizations, it's still not as fast as Canvas. Especially in a case like this map which has lots of elements. The advance of SVG rendering mode is reducing the memory usage on mobile devices.

[plainheart]

@pissang Thanks for the detailed explanation. So this should not be considered a bug.

[pissang]

After profiling this case, it seems getDefs method takes lots of time, which I didn't expect.

Perhaps it still has some chance to do more optimization

[pissang]

Seems the performances have been improved in the new SVG renderer ecomfe/zrender#836

[plainheart]

Awesome! The performance got improved significantly. It can be closed later.

[hao-kuai]

@plainheart

zr_100000 is a special zlevel that provided to the hover layer.

SVG rendering mode is not good at animation performance because each frame it needs to find out which DOM needs to be updated and manipulate the attributes of DOM(just like what virtual dom does). Even if we did lots of optimizations, it's still not as fast as Canvas. Especially in a case like this map which has lots of elements. The advance of SVG rendering mode is reducing the memory usage on mobile devices.

如何移除zr_100000图层？这会导致浏览器自带复制图片复制内容失败。