I'm creating a game for the iPad using Phonegap, which means I'm using JavaScript/ CSS/ HTML for iPad's Safari. Basically, I'm moving around lots of img elements (sometimes changing their src) on 1024x768 resolution, just local files without any net connection. On the desktop Safari things work smoothly, but on the iPad, my setInterval feels delayed and flickering. Do you have any speed optimization tips for me that I could try? Thanks!

PS: I'm aware that switching to the iOS's native Objective-C would likely be much, much faster, but I'd really love to try it with standard JS/HTML/CSS.

I'm creating a game for the iPad using Phonegap, which means I'm using JavaScript/ CSS/ HTML for iPad's Safari. Basically, I'm moving around lots of img elements (sometimes changing their src) on 1024x768 resolution, just local files without any net connection. On the desktop Safari things work smoothly, but on the iPad, my setInterval feels delayed and flickering. Do you have any speed optimization tips for me that I could try? Thanks!

PS: I'm aware that switching to the iOS's native Objective-C would likely be much, much faster, but I'd really love to try it with standard JS/HTML/CSS.

• javascript
• safari
• cordova

• 1 Have you tried, instead of changing "src" references, to bine the images (where possible) into a single big image and then use CSS to position the image in the viewport? – Pointy Commented Jul 9, 2010 at 14:06
• Yeah, CSS Sprites are almost always preferable for HTML games in general. Don't about about the iPad though. – bobince Commented Jul 9, 2010 at 14:30
• I dont thing they can be an issue since they are local files. – gblazex Commented Jul 9, 2010 at 14:39
• Well @galambalazs I'd try it anyway, because it could be that the layout engine has an easier time repositioning an image file it's already depressed versus opening and depressing an entirely different image. – Pointy Commented Jul 9, 2010 at 14:47
• The reason I don't think this is the case is because the OP said: " I'm moving around lots of img elements (sometimes changing their src)". So the change is probably not the issue here. I'd rather say that setInterval can't handle the number of actions. See my answer. – gblazex Commented Jul 9, 2010 at 14:54

2 Answers 2

You've run into one of the most mon browser scripting issue with animated webpages.

The reason why your application slows down is because the browser is a single-threaded environment. As soon as you forget that you'll get into trouble.

setInterval makes you believe that your actions will happen in parallel like in a multi-threaded environment. But what really happens is that setInterval pushes the action to the UI stack to be handled at a later time. But if too many things are getting in to this stack at one time some actions will lag. The setInterval will keep pushing new actions, but the old ones will be still there, and the whole rendering bees a sluggish mess.

As to when it happens, it depends on the hardware/software capabilities. iPad has much lower horse power than a desktop PC, that is pretty obvious.

Things you can do in order to avoid lag.

1. Trade smoothness for speed: raise your delay between intervals, so as to avoid cumulative actions in the UI stack.

2. setTimeout: this alternative is very similar to setInterval, except that it doesn't ensures a given interval between repetition, rather focuses on how long the browser should wait until repeating the action. So in order to make it more like setInterval you may need to keep track of the elapsed time between actions and calculate the measure of the change that has to be taken care of.

3. Group animations: you can have one interval for some related animations (you manage a mini-queue for them) and so you decrease the actual setInterval calls, and gain more power over controlling race conditions.

Also make sure to read this piece of article:

Making an iPad HTML5 App & making it really fast (Thomas Fuchs the creator of script.aculo.us)

Use CSS3 animations that use GPU acceleration... This will have a huge effect on any animations.