What is causing the lag in HTML5 web app on a mobile device (Ex: iPhone)?

I am looking at developing web apps for mobile device specifically, the iPhone but this discussion is open to mobile devices in general. I was trying some HTML5 websites on both my desktop browser and iPhone browser.

An example is: www.creativepony.com If I understand correctly, the grass animation was made using the canvas tag of HTML5 and then using javascript to create the animation. In my desktop browser, it looks fine and very smooth. However, when I visit the website in my iphone 4 browser (iOS 4.1), the grass animation lags.

I tested with 3G and wifi. They both lag but 3G is slightly worse.

My question is, if I were to develop animation rich HTML5 + JS web app, what would be causing the lag? Is it the iPhon开发者_StackOverflowe CPU itself? or is it the mobile browser? or just a slower internet connection on the iPhone? or something else?

I am asking because it seems like the iPhone 4 CPU is powerful enough to run some very impressive games. How can it not be able to display a HTML5+JS animation? If it is slower internet connection, the offline caching ability of HTML5 should help especially since I want to make my web app offline-capable. Or, is it the safari browser on the iPhone? Or something else entirely.

Thanks again!

Mobile Safari simply isn't very good at running Javascript animation, due to the fact that it gets powered by the CPU. Even the simplest transforms and changes to opacity can be very sluggish.

However, CSS -webkit-transition and -webkit-animation rules can be used to good effect, as they are powered by the GPU: the results can appear as smooth as native iOS animations.

I'm not sure but I think javascript does not use GPU so a game on you iphone can run smooth because of the GPU but a javascript animation can't... anyway as I said I'm not sure but you can take a look at this http://ajaxian.com/archives/javascript-running-on-the-gpu

Regards