Jquery Mobile 和 Phonegap 的卡顿性能问题

Posted 2023-05-08

【中文标题】Jquery Mobile 和 Phonegap 的卡顿性能问题

【英文标题】：Stuttery performance issues with Jquery Mobile and Phonegap

【发布时间】：2013-07-31 19:12:29

【问题描述】：

所以，我正在使用 phonegap 和 jqm 开发一个应用程序。一切都很好，这一切都非常简单，这要归功于 phonegap 构建。但是，我开始看到一些非常烦人的“口吃问题”。我的应用目前只有两个页面，它们之间的过渡效果是“幻灯片”。第一页设置了背景颜色，第二页没有。部分问题：

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

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

我已经在 Internet 和 SO 上阅读了有关此内容的信息，并提出了不同的解决方案，例如编写自定义 CSS3 过渡（以利用硬件加速）或使用类似 zepto.js 的东西。

您认为克服这些问题的最佳“跨设备兼容”方法是什么？有没有办法用jquery mobile强制硬件加速？ CSS3 性能是否跨设备平台？

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

任何帮助将不胜感激。

【问题讨论】：

Jquery Mobile 正在使用 CSS3 过渡。

线程标题错误。我正要告诉你，在使用 jQuery 时你不能抱怨性能，但后来我发现这只是视觉故障。可能想在 jQuery 上填写错误票。

【参考方案1】：

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

我使用 PhoneGap 编写了应用程序，而我想出的最好方法是使用 CSS3 动画/过渡。超级流畅，感觉就像一个原生应用程序。您仍将使用 JQuery 来添加/删除类等，但移动应该来自您的 CSS。