Jquery Mobile和Phonegap的Stuttery性能问题

Question

所以，我正在使用phonegap和jqm开发一个应用程序。一切都很棒，而且由于手机版本的建立，这一切都非常简单。但是，我开始看到一些令人讨厌的“口吃问题”。我的应用程序目前只有两页，它们之间的过渡效果是“幻灯片”。第一页的背景颜色设置为第二页，第二页没有。一些问题：

1. 当我从第1页导航到第2页时，页面的一半具有上一页的背景色。我在屏幕上随机滑动后就消失了。
2. 在其中一个页面上，我有一个常规表单，其中包含一些文本输入字段和最后设置的单选按钮。当我从输入框移动到单选按钮时，键盘向下滑动，但在短时间内被黑色区域替换。
3. 我顶部的固定标题随机决定消失并再次出现。

这些只是烦人的一些，这些只发生在移动设备上，它在计算机上运行良好。所以，我知道这是一个性能问题。

我已经在互联网上阅读了这篇文章，并且在这里提出了不同的解决方案，比如编写自定义CSS3过渡（利用硬件加速）或使用像zepto.js这样的东西。

您认为哪种方法最适合克服这些“交叉设备兼容”方法？有没有办法用jquery mobile强制硬件加速？ CSS3的性能是否跨设备平台？

PS。我一直在测试果冻豆4.2.2。我没有发布我的任何代码，因为它们只是简单的表单元素和一些输入标签，这发生在多个完全不同的页面上，所以我很确定这不是代码相关的。

非常感谢任何帮助。

Answer 1

JQuery使用Javascript编写动画，动态编写快速变化的内联样式。问题在于，它没有使用硬件加速，如果您在视网膜设备上进行测试，它会使用像素作为测量单位进行动画制作。所以它会跳过一半的像素，导致口吃。

我使用PhoneGap编写了应用程序，我提出的最佳方式是使用CSS3动画/过渡。超级流畅，他们感觉就像一个原生应用程序。你仍然会使用JQuery来添加/删除类等，但这个动作应该来自你的CSS。