search

adobe-webplatform / Snap.svg

The JavaScript library for modern SVG graphics.
http://snapsvg.io
Apache License 2.0
13.91k stars 1.15k forks source link

Simple animations cause high cpu load #635

Open kswope opened 4 years ago

kswope commented 4 years ago

I'm just evaluating snap.svg but I noticed that the demo 'game' causes my MBA fan to rev up and a CPU load of nearly 100% ("Brave Browser Helper (GPU)"). This doesn't look right to me and is a little concerning, is the library used incorrectly in the demo?

Here's the page

http://snapsvg.io/demos/#game

ibrierley commented 4 years ago

I doubt it's used 'incorrectly', but ultimately you are doing animations, with rotations and things like that, and I guess methods like requestAnimationframe will try and repeat animation steps everytime there is a spare frame/cycle to do it.

kswope commented 4 years ago

@ibrierley

have you see those animations? Its just 8 simple images moving back and forth.

ibrierley commented 4 years ago

But it isn't just 8 simple images moving back and forth, this is svg not canvas...

You have a lot of elements on that page, all with unique semi complex paths, a lot of them with transforms and fills on them. Then when they are moving to render, the display will need to calculate which objects are above which in the display etc. then you've got a handler or handlers that can interact with them that needs to check if something is happening to which object. Then you've got requestAnimationFrame which will try and do it as smooth as possible, which I think runs at the fps of the display (so I think in my case it would be 240 updates a second).

So I'm not saying it couldn't be written with more optimisation in mind if needed, it could. But it's just worth being aware with svg, there's often a lot more going on with animations and interaction than is sometimes apparent. If you need performance, svg is the wrong thing to look at, it should be something like canvas. Svg is all about elements and an object approach to vector graphics.

I'm also not suggesting that Snap is the most efficient method out there either, there are probably some more optimal solutions out there, but it depends if you are after raw efficiency or simplicity of use.