PhoneGap与jQuery Mobile性能问题的常见来源是什么？
我有一个使用PhoneGap 1.0和jQuery Mobile 1.0b2在iPhone和iPad上运行的应用程序。
自从我开始使用这个框架以来，我一直被性能问题困扰在应用程序中的“页面”之间切换。 在按下button之后，在转换发生之前会有一个很好的第二次暂停，有时会更长一些。 我已经尝试了所有的webkit的调整，甚至在两个框架（我开始使用Phongap 0.95和jQuery Mobile Alpha 4）等待升级，这个问题还没有解决。
我使用尽可能多的“内置”对象（而不是自定义button图像），并在每个屏幕上使用自己的PNG背景。 应用程序本身只包含3个页面，外加一个用作选项屏幕的页面。
我不想寻找一个特定的解决scheme，而是想知道在使用PhoneGap和jQuery Mobile for iOS时性能存在的一些常见问题？ 这样，其他人可以在处理自己的问题时寻找选项清单
在Safari中运行jQuery Mobile应用程序和在本机iOS中运行UIWebView之间最大的区别之一是缺lessNitro引擎。 它是在iOS 4.3中引入的。 它在Safari中的JavaScript处理速度大约快了一倍，但是却无法将其构build到本机应用程序或全屏caching的web应用程序中。 从iOS 5起，Nitro引擎被带到平台的其余部分。
http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars
除了Nitro引擎，围绕jQuery Mobile和页面转换还有其他可能的性能问题。 平台越慢，吸虫就越显着。 有时它可能performance为页面渲染之间的白色闪烁。 其他时候，它可以performance为：转换到新屏幕 – 闪烁到前一屏幕 – 闪烁到新屏幕。 这些吸毒者并不一致，可以试图弄清楚为什么会发生。 更新更快的设备对此没有什么问题，所以好消息是，随着时间的推移，这个问题将会消失。 为未来打造，设备即将迎头赶上。
话虽如此，让我们也考虑用户能够点击他们想要的速度的performance。 通过禁用页面转换来最小化转换怪异。 这样可以将您的有效页面性能提高500毫秒。 页面转换很漂亮，但事实是，它们很慢。 性能是一个function。 只需在您的自定义脚本中join这个转换就可以了。
$(document).bind("mobileinit", function(){ $.mobile.defaultPageTransition="none"; }); 另外，（这可能会发布到整个社区，可能会读这个）…认真考虑如果你需要真正有一个本地的应用程序。 除非您需要PhoneGap才能访问摄像头，陀螺仪或Safari无法提供的其他一些硬件支持，否则只要使用Web，就可以获得更好的性能。 我了解到希望有一个“应用程序商店”的存在，但只有1％的应用程序被发现，他们的半衰期只有几个星期。 然后，当操作系统发生更新时，您将有维护更新的噩梦。 只有通过networking发布才有很多好处。 通过一次更新，您可以更新每个平台上的每个人。 所以，考虑平台的性能，还要考虑你的版本的性能。
在JavaScript函数调用触摸设备上的button“点击”之前，jQuery Mobile强制延迟大约300ms。 这解决了触摸设备上的一个问题，如果点击的button改变了它的内容（例如页面改变），则点击也可以在replace该button的内容上被解释。
当用户按下button后，他们的手指离开button，一个touchend事件被立即调用，紧接着一个vclick然后一个tap事件。 然后你有300ms之前的click ， mousedown和mouseup事件被称为。
所以如果你做了以下任何一项，你将得到300毫秒的延迟：
$('#myButton').bind('click', ... $('#myButton').click( ... <div id='myButton' onClick='changePage()' ...
所以相反，你应该绑定一个vclick或tap事件这样的button（我相信vclick比tap快一点）：
$('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code });
你也可以绑定到touchend事件，但这可能会产生一些不希望的效果，但是试试看。
jQuery Mobile文档说这个…（所以我的build议是testingvclick或彻底tap你的testing设备）：
我们build议，只要触发的操作有可能改变屏幕上触摸的点下方的内容，就可以使用click而不是vclick。 这包括页面转换和其他行为，如折叠/展开，可能导致屏幕移动或内容被完全replace。
对此的一个很好的讨论是在这里： http : //forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile#14737000003088725
我已经取得了一些成功的文本和框阴影，这是一些相当简单的CSS：
.ui-shadow, .ui-btn-up-a, .ui-btn-hover-a, .ui-btn-down-a, .ui-body-b, .ui-btn-up-b, .ui-btn-hover-b, .ui-btn-down-b, .ui-bar-c, .ui-body-c, .ui-btn-up-c, .ui-btn-hover-c, .ui-btn-down-c, .ui-bar-c, .ui-body-d, .ui-btn-up-d, .ui-btn-hover-d, .ui-btn-down-d, .ui-bar-d, .ui-body-e, .ui-btn-up-e, .ui-btn-hover-e, .ui-btn-down-e, .ui-bar-e, .ui-overlay-shadow, .ui-shadow, .ui-btn-active, .ui-body-a, .ui-bar-a { text-shadow: none; box-shadow: none; -webkit-box-shadow: none; }
正如Shane G所说，Nitro JavaScript引擎在iOS 5.0以前版本中并不用于UIWebViews，但是在iOS 5.0或更高版本的设备上，JavaScript引擎在本机应用程序和主屏幕Web应用程序中的感受会快两倍。
总是有select创build一个HTML5caching清单，所以你的网站可以离线运行，但仍然可以在Safari中运行： http : //www.html5rocks.com/en/tutorials/appcache/beginner/
这段代码真的帮助了我的PhoneGap / Jquery Mobile原生应用程序的性能。 对于我去年正在build设的移动网站，我也遇到了同样的问题，并记得使用jQuery 1/2秒的淡入淡出，但是这个解决scheme是天赐之物：
* { -webkit-transform: translateZ(0); }
最初来自Drew Dahlman的博客： http : //www.drewdahlman.com/meusLabs/? p=135
如果你仔细想想，这个代码是很有意义的。 把所有元素放在同一个平面上。
另外，我最近在这个博客上看到了一个类似的黑客： http : //jessefreeman.com/articles/room112-phonegap-exploration/
* { -webkit-transform: translate3d(0,0,0); }
我还没有testing过，但认为如果最终帮助某人，我会添加它。
另一种提高PhoneGap App性能的方法如下：
正如@Kimm所说：
$('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code });
这里的响应将远胜于.click，但系统可能在某些情况下传播事件，导致不期望的行为。 要解决这个问题，请使用：
$('#myButton').bind('vclick', function(ev) { ev.preventDefault(); //Your code return false; });
使用这一切的东西将是正确的，没有副作用… 🙂
JQueryMobile在Phonegap上相当慢，转换是一个主要问题。
改进你的应用程序的性能可以通
- closures页面转换（如果您想保留JQM）
- 考虑像iWebKit这样的另一个框架（不像JQM那样花哨，但是在Phonegap中很快）
我个人试过＃1，但没有给出所需的用户体验。 这导致了选项＃2和更快的用户体验。
尝试更新您的软件。 PhoneGap 1.2 + jQueryMobile 1.0（今天发布）到目前为止对我来说显示了巨大的性能提升。
要提高转换速度，只需将转换时间设置为： –
.in, .out { -webkit-animation-duration: 250ms !important; }
在上述情况下，转换时间是250毫秒。