Sencha Touch 2 - 安卓性能答案

【问题标题】：Sencha Touch 2 - Android PerformanceSencha Touch 2 - 安卓性能
【发布时间】：2012-07-12 02:48:15
【问题描述】：

我们正在开发一个 Sencha Touch 2 应用程序，该应用程序利用 Phonegap 能够将其安装为应用程序并访问设备的存储。这在 iPad 2 和 iPad 3 上运行良好。但是，当我们尝试在 Android 设备上运行该应用程序时，性能非常缓慢。减慢系统速度的主要元素是列表和轮播。当我们尝试通过 chrome 浏览器测试同一个应用程序时，性能与 iPad 相当。

您对我们可以做些什么来提高 android 上的性能有什么建议，甚至可能放弃 Phonegap 以获得更好的效果。或者如果我们可以强制 phonegap 作为 chrome 浏览器运行。

感谢您的宝贵时间和帮助。

【问题讨论】：

见。我也在使用phonegap和sencha。但到目前为止，我在性能方面并没有遇到太大问题。对于条形码扫描等一些本机功能来说可能有点慢。但并不多。我会建议使用最新的 corodova.jar 文件。可能是 1.8 或 1.9
我们实际上使用的是 Cordova 1.9 版，但性能仍然不佳。我不得不提一下，我们没有将它开发为 MVC 应用程序，因为这是我们第一个使用 Sencha 的项目，所以它也一定会影响性能。很多人提到，问题的根源在于Phonegap工作的android的Web View，显然它不适合heave站点。
但我使用的是 MVC 架构。所以 UI 部分，我正在使用 Sencha Touch 2 和原生部分使用 phonegap。但到目前为止，性能方面还是不错的。

标签： javascript android performance cordova sencha-touch-2

【解决方案1】：

这里的问题是安卓浏览器没有使用图形硬件加速。这意味着 Sencha（和其他 HTML5 库，如 jQueryMobile、iScroll 等）使用标准技巧来提供良好的滚动性能，例如 CSS 3D 转换以使您的列表在单独的层中呈现，这可以然后在硬件上翻译，不会在Android上工作。相反，列表滚动将完全在软件中执行，这会很慢！

Chrome 浏览器确实提供 GPU 加速。 Android 设备不仅能够提供良好的 HTML5 体验，只是标准浏览器还没有利用 GPU 硬件。

除非您可以强制最终用户使用 Chrome（我对此表示怀疑），否则唯一的选择是降低用户体验，并为 Android 用户提供稍微简单的 UI。

【讨论】：

这准确地解释了这里的问题，谢谢。不，正如您猜想的那样，我们无法强制用户使用 chrome，因为我们需要为应用程序存储超过 5MB 的数据，因此本地存储是不够的。我会看看你提供的链接，也许我们可以牺牲一点视觉吸引力来提高性能

【解决方案2】：

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

【讨论】：

已经尝试过了，但似乎不起作用，性能与选项设置为 false 时完全相同。还尝试将目标sdk设置为15（4.0.3）但仍然无济于事

【解决方案3】：

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

要考虑的另一件事是，您可以使用 CrossWalk 浏览器并将其嵌入到 APK 中，而不是使用内置的 WebView。

https://crosswalk-project.org

它为您的 APK 增加了一点大小（15-20MB），但它的性能比内置的 WebView 更好，并为非常分散的平台带来了稳定性和一致性。考虑一个现实，Android 上的每个 WebView 取决于设备、供应商和操作系统版本可能在细微的方面有所不同。 CrossWalk 将允许您在所有 Android 4.0+ 设备上使用完全相同的版本，并消除任何设备或供应商特定的问题。

Android 上的性能没有灵丹妙药。图形加速不会提高纯 javascript 执行或 DOM 操作的性能。如果您想了解原因，请从这里开始：

What's the difference between reflow and repaint?

旧答案（可能仍然有效）：

对于 ICS 及以上版本，webview 上的以下设置将显着提高 Sencha Touch 在 Android 上的渲染性能：

mWebView.setLayerType(WebView.LAYER_TYPE_HARDWARE, null);

但是，根据我的经验，这将根据设备和平台的变化在 CSS 渲染中引入伪影。我还没有具体找到原因，并且我不希望 Google 会解决它，因为 webview 组件将在 Android 4.4 中被更新更好的版本所取代。

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

【讨论】：