2

I was doing some experiments with HTML5 lately and noticed that HTML5 appears to run quite poorly on mobile, tablets, and even desktops. I conducted the following test:

150 elements moving across the page with jQuery http://erality.com/public/html5/001/

25 elements move across the page with HTML5 http://erality.com/public/html5/002/

The jQuery version runs well on desktop and fairly well on newer tablets. The HTML5 version (with 1/6th the elements) runs poorly on a desktop and is horrible on tablets. Is this normal performance? Am I doing something incorrectly?

Any insight would be helpful.

Improve this question
6
  • 1
    CANVAS element? Let's just call it HTML5... :P Commented May 25, 2012 at 21:11
  • 3
    HTML5 can't "run quite poorly" because HTML5 is a version of a markup language. What you're comparing is the speed of a jQuery animation with the speed of an oCanvas animation. Commented May 25, 2012 at 21:13
  • Only thing I can think of is how the redrawing is done on the canvas vs moving elements with css. Commented May 25, 2012 at 21:16
  • ^, plus the two versions don't do the same thing. the oCanvas script is also being asked to rotate the elements as well as translate the positions. More importantly, your oCanvas script is calling animate() recursively, the jQuery one is just a straight slide with no callbacks. You might be right about performance, but compare apples to apples. Commented May 25, 2012 at 21:18
  • nevermind, there is no recursion in animate(). But the point still stands Commented May 25, 2012 at 21:25

2 Answers 2

Reset to default
2

The poor performance on the "HTML5" version is explained by its use of setTimeout instead of requestAnimationFrame (RAF), which is the suggested method of animating anything with an HTML5 canvas. Look here for more info on RAF.

Edit: I should have written "is partially explained by"

Besides RAF, you should try using setInterval instead of setTimeout. Also, why is there a random factor to the duration of each setTimeout? If you don't want to use RAF, I suggest using setInterval with a fixed interval (try 16ms for starters) while updating all petals at each interval. Currently you're using a separate setTimeout for each petal, with a random duration, which is probably causing a lot of the lag.

Here is a good MSDN article about the performance benefits of RAF. It compares RAF with setTimeout/setInterval. A few relevant quotes from the article:

As a result, applications are perfectly aligned with the browser painting interval and uses only the appropriate amount of resources.

Also:

Every third draw cannot be painted because another draw request occurs before the display refresh interval. This overdrawing results in choppy animations because every third frame is lost. This timer resolution reduction can also negatively impact battery life by up to 25%.

Using setTimeout may not account entirely for the performance difference in your examples. Others have noted that the comparison is not apples-to-apples. You should be able to get faster animation with setTimeout (I've written a fairly smooth physics sim with setTimeout). Regardless, RAF is much superior to setTimeout, and is the only way to get the smoothest of smooth animations.

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

That doesn't explain the performance drop. requestAnimationFrame is nothing more than a glorified setTimeout that conviniently stops when the tab/window is not focused/visible.
If by "glorified" you mean "similar on the surface, but vastly superior to setTimeout/setInterval for animation", then I agree. :) See updates.
Hmmmm. 1. SetTimeout is used delay the start of the animation, not the animation itself (unless oCanvas is using it); why then would it cause such lag? 2. A random number is generated on each setTimeout to randomly generate the location of the image. Either way, a couple random numbers are going to cause it to lag? And the random numbers are generated in both versions anyway. 3. If setTimeout or the random numbers were actually the culprit, wouldn't it be far worse on the jQuery version since it has 6 times the number of setIntervals and random numbers? If I am mislead, please correct me.
@Jason you're right, I misread the setTimeout call. I thought it was recursively calling setTimeout, with a random timeout each time.
1

jQuery and HTML5 animation performance do very greatly as Each way uses a different way to move/draw the objects.

When you do an animation is jQuery it directly access the objects and translates them on the screen and when the Canvas element it has to re-draw the canvas each time with the elements in new positions.

P.S. I have source of this claim, but this is in fact my opinion.

Improve this answer

3 Comments

Ah. So this type of performance is expected? Doesn't this make an HTML5 canvas inferior if jQuery Animation can be used to complete the same task?
For animation purposes, yes as HTML isn't a language. But in terms of other things I would say HTML has some advantages.
HTML5 canvas element certainly has advantages (rotation, drawing lines/shapes, morphing, etc etc). However, at least in this test, the performance (especially on tablet) is quite poor for simultaneous animations. JS has it's advantages too, input elements, easy text boxes, etc. Building interactive animation heavy websites for a tablet or mobile device would almost have to be done with JS (at this time) due to performance constraints. My question is am I doing something wrong to get this poor performance from HTML5? I expected more.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.