Look at this Flash vs Html5 version of the same animation. Is Html5 slower?

I obtained from a Flash developer an animation done in both Flash and Html5:

Flash version:   http://goo.gl/YK0sS6
Html5 version:  http://goo.gl/5hCvDW

On my Android default browser on my Galaxy Note II  (quad-core 1.6Ghz) the Flash version is totally fluid while the Html5 version has a very low framerate.

Are the html5 animations with many objects/layers renownedly slower than Flash or there's something wrong in the Htm5 code?
lucavillaAsked:
Who is Participating?
 
GaryConnect With a Mentor Commented:
No, looks like he transferred it to Edge and then made the HTML5 version from it.
And however that coded it has made a dogs dinner of it.
I'm sure you managed to get some of the samples from the other question working so you should have been able to see how fluid it should be even with really complicated computations going on.
This is not complicated animations.
I don't know if I could even debug the code to see where the bottleneck is coming from.
(typical bloated Adobe code)

I think the main problem is that Edge isn't using the canvas object but normal HTML elements which is kinda not really HTML5
0
 
Big MontySenior Web Developer / CEO of ExchangeTree.org Commented:
Using Chrome on my PC, both seem to play at the same speed. Have you tried multiple platforms for your testing?
0
 
GaryCommented:
You would be hard pressed to notice a difference.
Is this a flash to canvas conversion?  As it is throwing a lot of styles around.
0
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
lucavillaAuthor Commented:
Gary, I think that the developer re-made it from scratch in Html5 because he changed some effects...
0
 
GaryCommented:
Here's an example using just a few lines of css.
http://www.useragentman.com/blog/2013/03/03/animating-circular-paths-using-css3-transitions/#

Repeat this 20, 30 +++ times, wouldn't matter

This is how your 'flash' should be done - it would be ultra smooth and not start hogging memory/cpu like it currently does.

edit
That is not going to work on your IE9 - but at 3% global usage and dropping  you shouldn't be worrying about it
0
 
lucavillaAuthor Commented:
> Repeat this 20, 30 +++ times, wouldn't matter
How do you know it?

If you look at my html current animation you'll see that it uses 13% (my PC) CPU too, but it's not smooth, it's 10-15fps... while the Flash versions seems 25-30fps at 13-15% CPU too.

Seems like CPU usage in a single Chrome page never goes above 13-15% on my Windows 7, Core i7 PC, like if it were an external limitation...
0
 
GaryCommented:
Chrome jumps to about 70% cpu and FF to 100% from idle.
Memory on both increase about 200mb

On a dual core - not everyone has an i7 ;o)
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.