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

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

在调用JavaScript函数触摸设备上的"点击"按钮之前,jQuery Mobile会执行约300毫秒的延迟.这解决了触摸设备上的问题,其中如果点击的按钮改变其下面的内容(例如,页面改变),则还可以在替换按钮的内容上解释点击.

当用户在按下按钮后将手指从按钮上移开时,touchend会立即调用事件,然后紧接着a vclick然后tap事件.然后你有300ms之前click,mousedown并mouseup调用事件.

因此,如果您执行以下任何操作,您将获得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的文档说,这......(所以我的建议是测试vclick或tap测试设备上透):

我们建议使用click而不是vclick,只要触发的动作有可能更改屏幕上触摸的点下方的内容.这包括页面转换和其他行为,例如崩溃/展开,可能导致屏幕移位或内容被完全替换.

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