Solved

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

Posted on 2014-03-07
7
395 Views
Last Modified: 2014-03-18
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?
0
Comment
Question by:lucavilla
  • 4
  • 2
7 Comments
 
LVL 32

Expert Comment

by:Big Monty
ID: 39912740
Using Chrome on my PC, both seem to play at the same speed. Have you tried multiple platforms for your testing?
0
 
LVL 58

Expert Comment

by:Gary
ID: 39912755
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
 

Author Comment

by:lucavilla
ID: 39914002
Gary, I think that the developer re-made it from scratch in Html5 because he changed some effects...
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 58

Accepted Solution

by:
Gary earned 500 total points
ID: 39914042
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
 
LVL 58

Expert Comment

by:Gary
ID: 39914049
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
 

Author Comment

by:lucavilla
ID: 39914586
> 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
 
LVL 58

Expert Comment

by:Gary
ID: 39914673
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

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now