为使用PhoneGap 构建的iPhone 应用程序加速jQuery Mobile 1.1 中的页面转换？

Posted 2023-05-09

【中文标题】为使用PhoneGap 构建的iPhone 应用程序加速jQuery Mobile 1.1 中的页面转换？

【英文标题】：Speeding up page transitions in jQuery Mobile 1.1 for iPhone apps built with PhoneGap?

【发布时间】：2012-06-16 23:26:14

【问题描述】：

JQM 1.1 中的页面转换在 iPhone 上仍会产生 1-2 秒的延迟，这会影响用户体验。

有没有人想出如何让 JQM 1.1 中的页面转换感觉更原生？我们知道有像 Zepto 这样的替代框架，但如果可能，我们更喜欢使用 JQM。

我们正在使用 PhoneGap 在 ios 设备上分发应用程序。

【问题讨论】：

最终，我们无法掩饰 JQM 的缓慢性。我们撕掉它并自己构建了基本的页面过渡。

【参考方案1】：

我使用了几种方法，它们共同产生了非常令人满意的结果。

1) Energize.js - https://github.com/davidcalhoun/energize.js 消除所有点击/点击的点击延迟

2) 在您的 jQM 启动中添加：

$.mobile.buttonMarkup.hoverDelay = 0;

3、4 和 5) 使用

$( "#YourPage" ).delegate("#YourButton", 'tap', function(event) 
        $.mobile.showPageLoadingMsg();
        $.mobile.changePage( "YourPage",  transition: "slide" );                                               
        e.stopImmediatePropagation();
        return false;
         );  

3) 不要使用 jQM 然后将其转换为 mobile.changePage 的普通锚链接 - 自己做这部分并（可能）减少几毫秒

4) 将其委托为点击而不是单击（尽管存在 energet.js 我无法分辨出任何区别）

5) 在开始传输之前显示加载消息。如果您要导航的网站很复杂，可能需要一段时间才能生成，如果您显示加载消息，至少用户知道正在发生一些事情

6) 使用预加载内容

$.mobile.loadPage( "YourPage" );

由于重叠，这可能有点矫枉过正，但希望使用这些技术，您将能够使您的应用更具响应性！

编辑 - 奖励：这是一篇博客文章，其中涵盖了其他三种加速 PhoneGap jQuery Mobile 应用程序的技术：http://therockncoder.blogspot.no/2012/06/three-quick-performance-tips-for.html

【讨论】：

这太棒了，谢谢。我们将尝试其中的一些，尽管我们的需求更简单，因为该应用使用多页模板。

Energize.js 很棒，正是我需要的。！

这非常有用。谢谢！

@MichDart 在 jQM 中使用 energet.js 时要注意：在某些情况下，点击事件可以触发两次，因为 jQM 也处理点击事件。如果您发现一些奇怪的行为，请尝试更改触发事件的方式（例如，使用 jQM 将函数绑定到相关元素的点击而不是使用 href）

我可能会很快用一种新方法更新它，如果你喜欢这些，请回来查看:)

【参考方案2】：

只包含获取jquery mobile时需要的组件

http://jquerymobile.com/download-builder/

【讨论】：

仍处于 alpha 阶段，根据网站：“请注意，jQuery Mobile 下载生成器仍处于 alpha 阶段，因此不应在生产网站上使用。”