Question

我有一个使用PhoneGap 1.0和jQuery Mobile 1.0b2在iPhone和iPad上运行的应用程序。

自从我开始使用该框架以来，我一直受到应用程序中“页面”之间切换的性能问题的困扰。按下按钮后，在转换发生之前有一个很好的第二次暂停，有时更长。我已经尝试了所有的webkit调整，我甚至等待两个框架中的升级（我从Phongap 0.95和jQuery Mobile Alpha 4开始），这个问题还没有解决。

我正在使用尽可能多的“内置”对象（而不是自定义按钮图像），并且我在每个屏幕上使用自己的PNG背景。应用程序本身只包含3个页面，以及一个用作选项屏幕的页面。

我不想寻找特定的解决方案，而是想知道在使用PhoneGap和jQuery Mobile for iOS时存在哪些与性能有关的常见问题？这样，其他人在处理自己的问题时可以查找选项清单

Answer 1

在Safari中运行jQuery Mobile应用程序并在本机iOS中的UIWebView中运行它之间的最大区别之一是缺少Nitro引擎。它是在iOS 4.3中引入的。它使JavaScript处理的速度大约是Safari的两倍，但是它们无法将其构建到本机应用程序或全屏缓存的webapps中。从iOS 5开始，Nitro引擎被带到了平台的其他部分 http://arstechnica.com/apple/news/2011/06/ios-5-brings-nitro-speed-to-home-screen-web-apps.ars

除了Nitro引擎之外，jQuery Mobile和页面转换还存在其他可能的性能问题。平台越慢，吸虫就越明显。有时它可以表现为页面渲染之间的白色闪烁。其他时候，它可以表现为：过渡到新屏幕 - 闪烁到上一个屏幕 - 闪烁到新屏幕。这些吸虫并不一致，可能会试图弄清楚它为什么会发生。更新更快的设备对此问题较少，所以好消息是，随着时间的推移，这个问题将会消失。建设未来，设备将很快迎头赶上。

话虽如此，我们还要考虑用户点击他们想要的速度的速度。通过禁用页面转换来最小化转换怪癖。这样可以将有效页面性能提高500毫秒。页面过渡很漂亮，但事实是，它们很慢。性能是一个功能。只需在自定义脚本中包含此过渡即可关闭转换。

$(document).bind("mobileinit", function(){
  $.mobile.defaultPageTransition="none";
});

此外，（这可能会对整个社区有所了解）...认真考虑是否需要实际拥有原生应用。除非您需要PhoneGap来访问Safari无法提供的相机，陀螺仪或其他一些硬件支持，否则只需使用网络即可获得更好的性能。我理解有一个“应用程序商店”的存在的愿望，但只有1％的应用程序被发现，他们的半衰期只有几周。然后，每当有操作系统更新时，您都会发布维护噩梦，即发布更新。仅通过网络发布有很多好处。只需一次更新，您就可以更新每个平台上的所有人。因此，请考虑平台的性能，还要考虑发布的性能。

Answer 2

jQuery Mobile在触摸设备上的“点击”按钮调用JavaScript函数之前会执行约300毫秒的延迟。这解决了触摸设备上的问题，如果点击的按钮改变了它下面的内容（例如页面更改），那么也可以在替换按钮的内容上解释点击。

当用户在按下按钮后将手指从按钮上移开时，会立即调出touchend事件，紧接着是vclick，然后是tap事件。然后在调用click，mousedown和mouseup事件之前有300毫秒。

因此，如果您执行以下任何操作，您将获得300毫秒的延迟：

$('#myButton').bind('click', ...
$('#myButton').click( ...
<div id='myButton' onClick='changePage()' ...

所以你应该将vclick或tap事件绑定到这样的按钮（我相信vclick比tap快一点）：

$('#myButton').bind('vclick', function(ev) {
    ev.preventDefault();
    //Your code
});

您也可以绑定到touchend事件，但这会产生一些不良影响，但请尝试一下。

jQuery Mobile Documentation说明了这一点......（所以我的建议是彻底测试您的测试设备上的vclick或tap）：

我们建议您在任何时候使用click而不是vclick 触发有可能改变下面的内容在屏幕上触摸的一点。这包括页面转换和其他行为，如崩溃/扩展，可能导致屏幕移位或内容被完全替换。

关于这方面的一个很好的讨论在这里：http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile#14737000003088725

Answer 3

我在删除文本和框阴影方面取得了一些成功，这是一个相当简单的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所述，在iOS 5.0之前的版本中，Nitro JavaScript引擎并未用于UIWebViews，但在具有iOS 5.0或更高版本的设备上，JavaScript引擎在本机应用和homescreen-web中的感觉会快两倍-apps。

始终可以选择创建HTML5缓存清单，这样您的网站就可以离线运行，但仍然可以在Safari中运行：http://www.html5rocks.com/en/tutorials/appcache/beginner/

Answer 4

此片段确实帮助了我的iOS PhoneGap / Jquery Mobile原生应用程序的性能。我在去年建立的移动网站上也遇到了同样的问题，并记得使用jQuery的1/2秒淡化以便调整它，但这个解决方案是天赐之物：

* {
    -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);
   }

我还没有对此进行过测试，但我想如果它最终帮助了某人，我会添加它。

Answer 5

提高PhoneGap App性能的另一种方法如下： -

正如@Kimm所说： -

$('#myButton').bind('vclick', function(ev) {
   ev.preventDefault();
   //Your code
});

此处响应将远远优于.click，但系统可能会在某些情况下传播事件，从而导致意外行为。要解决此问题，请使用： -

$('#myButton').bind('vclick', function(ev) {
    ev.preventDefault();
    //Your code

   return false;
});

使用这一切都是正确的，没有副作用......：）

Answer 6

JQueryMobile在Phonegap上相当慢，转换是一个主要问题。

改善应用的效果可以通过 -

来完成

关闭页面转换（如果要保留JQM）
考虑像iWebKit这样的另一个框架（不像JQM那样花哨，但在Phonegap中很快）

我个人尝试过＃1，但它没有提供所需的用户体验。这导致选项＃2和更快的用户体验。

Answer 7

尝试更新您的软件。到目前为止，PhoneGap 1.2 + jQueryMobile 1.0（今天发布）对我来说显示了很大的性能提升。

Answer 8

要提高转换速度，只需将转换持续时间设置为： -

.in, .out {
-webkit-animation-duration: 250ms !important;
}

在上述情况下，转换持续时间为250 ms。

什么是具有jQuery Mobile性能问题的PhoneGap的常见来源？

8 个答案: