Sencha Touch 2 - Android性能优化

Question

我们正在开发一款使用Phonegap作为应用程序安装并访问设备存储的Sencha Touch 2应用程序。在iPad 2和iPad 3上效果非常好，但是在Android设备上运行应用程序时性能非常慢。导致系统变慢的主要元素是列表和旋转木马。当我们尝试通过Chrome浏览器测试相同的应用程序时，性能与iPad相当。

您有什么建议可以改善Android上的性能，甚至放弃Phonegap寻找更好的解决方案。或者是否可以强制Phonegap作为Chrome浏览器来运行。

感谢您的时间和帮助。

- user1520547

---

看，我也在使用PhoneGap和Sencha。但到目前为止，在性能方面我并没有遇到太多问题。也许对于一些本地功能（如条形码扫描等）会有点慢，但并不是很明显。我建议使用最新的corodova.jar文件，可能是1.8或1.9版本。 - Arindam Mukherjee

我们实际上正在使用 Cordova 1.9 版本，但性能仍然不好。我必须提到，我们没有将其开发为 MVC 应用程序，因为这是我们使用 Sencha 的第一个项目，所以这也可能影响了性能。许多人提到问题的根源是 Android 的 Web View，Phonegap 在其上运行，显然不适合重负载的站点。 - user1520547

但是我正在使用MVC架构。因此，我正在使用Sencha Touch 2制作UI部分，使用PhoneGap制作本地部分。但是到目前为止，性能方面还不错。 - Arindam Mukherjee

Answer 1

您在这里遇到的问题是Android浏览器不使用图形硬件加速。这意味着Sencha（以及其他HTML5库，如jQueryMobile、iScroll等）用于提供良好滚动性能的标准技巧，如CSS 3D变换，将导致您的列表以单独的层呈现，然后可以在硬件上进行转换，这些技巧在Android上无法实现。相反，列表滚动将完全在软件中执行，这将会很慢！

Chrome浏览器提供GPU加速功能。Android设备完全能够提供良好的HTML5体验，只是标准浏览器尚未充分利用GPU硬件。

除非您能强制您的最终用户使用Chrome（我怀疑），否则唯一的选择是降低用户体验，并为Android用户提供稍微简单的用户界面。

有关更多详细信息，请参见 "IMPROVING THE PERFORMANCE OF YOUR HTML5 APP"。

- ColinE

---

这解释了问题的确切原因，谢谢。正如你所猜测的那样，我们无法强制用户使用Chrome，因为我们需要存储超过5MB的应用程序数据，因此本地存储将不足以支持。我会查看您提供的链接，也许我们可以牺牲一些视觉吸引力来提高性能。 - user1520547

Answer 2

尝试在您的AndroidManifest.xml文件中设置此标志： android:hardwareAccelerated="true"

- Delapouite

---

已经尝试过这个了，但似乎没有起作用，性能与选项设置为false时完全相同。还尝试将目标SDK设置为15（4.0.3），但仍然无效。 - user1520547

Answer 3

更新：现在我已经长时间使用ST2了，Android上的性能挑战是你必须接受的。有许多事情可以做来避免性能问题，例如减少侦听器和事件、保持DOM轻量化（低于2000节点）以及通常避免任何CSS3转换和效果（这些尤其在Android上表现不佳）

另一件需要考虑的事情是，与其使用内置WebView，不如使用CrossWalk浏览器并将其嵌入APK。

https://crosswalk-project.org

它会增加一点APK的大小（15-20MB），但它比内置的WebView表现更好，并为一个非常碎片化的平台带来稳定性和一致性。考虑到每个Android设备上的WebView都可能因设备、供应商和操作系统版本的不同而有所差异。CrossWalk将允许您在所有Android 4.0+设备上拥有完全相同的版本，并消除任何与设备或供应商相关的问题。

在Android上，没有万能的解决方案来提高性能。图形加速不会改善纯JavaScript执行或DOM操作的性能。如果您想了解原因，请从这里开始： 回流和重绘有什么区别？ 旧版答案（可能仍然有效）：

对于ICS及以上版本，在Android上通过以下设置可以显著提高Sencha Touch的渲染性能：

mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);

然而根据我的经验，这样做会在CSS渲染中引入一些伪像，这取决于设备和平台的变化。我没有找到具体原因，也不指望Google会解决它，因为在Android 4.4中，webview组件将被替换为更新更好的版本。

https://developers.google.com/chrome/mobile/docs/webview/overview

- Daniel Maclean