Question

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.

Answer 1

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.