iPad / Phonegap DHTML游戏的JavaScript速度优化？ [英] JavaScript speed optimization for iPad/ Phonegap DHTML game?

问题描述

我正在使用Phonegap为iPad创建一个游戏，这意味着我对iPad的Safari使用JavaScript / CSS / HTML。基本上，我移动了大量的img元素（有时改变他们的src）在1024x768分辨率，只是本地文件没有任何网络连接。在桌面上Safari的东西工作顺利，但在iPad上，我的setInterval感觉延迟和闪烁。你有任何速度优化提示我，我可以试试吗？谢谢！

PS：我知道切换到iOS的原生Objective-C可能会更快，但我真的很想尝试标准JS / HTML / CSS。

解决方案

您遇到了一个最常见的浏览器脚本问题与动画网页。 / p>

您的应用程序变慢的原因是因为浏览器是单线程环境。

setInterval 让您相信您的操作会发生像在多线程环境中那样并行。但真正发生的是 setInterval 将操作推送到 UI堆栈以便稍后处理。但如果太多的东西进入这个堆栈一次有些行动将滞后。 setInterval 将继续推出新的操作，但旧的操作仍然存在，整个渲染变得缓慢。

至于何时发生，它取决于硬件/软件功能。 iPad的桌面电脑功率比桌面电脑低很多。

您可以做些什么来避免延迟。

1. 速度的贸易平滑度：提高在时间间隔之间的延迟，以避免UI堆栈中的累积动作。

   / li>
   

2. setTimeout ：此选项与 setInterval 非常类似，重复之间的给定间隔，而是集中于浏览器应该等待多长时间，直到重复动作。因此，为了使它更像 setInterval ，您可能需要跟踪操作之间的经过时间，并计算需要处理的更改的度量。 / p>




3. 群组动画：您可以为一些相关动画设置一个时间间隔（为其管理一个迷你队列）

此外，请务必阅读这篇文章：

制作iPad HTML5应用程序& （ ）

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.

解决方案

You've run into one of the most common 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 becomes 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)

这篇关于iPad / Phonegap DHTML游戏的JavaScript速度优化？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！