IONIC 框架移动应用程序性能问题

Question

我们正在使用 IONIC 框架为我们的一位客户开发一款备受瞩目的移动应用程序。 我们几乎完成了这一阶段的开发。该应用程序似乎运行良好时 在 Web/移动浏览器中打开。但是，当我们使用框架命令将其移植到移动应用程序中时 应用程序变得非常缓慢并且卡住了很多。这会导致非常糟糕的用户体验。

我正在使用命令“ionic run android”来创建 APK。 你能帮我们解决这个问题吗？我们无法提交用于测试此问题的 APK。 有什么配置可以用来加速应用程序。

另外，我在我的大部分页面中都添加了 Ionic Loader。这种行为非常不一致（有时只出现）。 这也会导致糟糕的用户体验。

Answer 1

您使用的是哪个 Ionic Loader？我对可用的解决方案不满意，最终推出了自己的解决方案。

你的目标是什么版本，你用什么版本测试（物理设备）？

以下是一些性能提示：

1. 如果目标 ionic browser add crosswalk 即可包含它。性能会更好，但 APK 会更大。

2. ionic run android 会制作一个 APK，但最好是 ionic build android

3. 在您的gulpfile.js 中缩小 JS 和 CSS、连接和去除调试。在模板上使用 html2js 时，我的性能也略有提升。

4. 注意ng-repeat。而是使用collection-repeat，或者，如果您必须使用ng-repeat，请确保您使用的是track by 功能。

5. 过滤器会对性能产生负面影响。尽可能使用指令。

6. 推迟推迟推迟！ $q 是你的朋友，可以帮助你产生速度的错觉。

7. 尽可能使用普通的 DOM，并不是所有东西都需要 Angular。

8. 尽可能使用一次性绑定。 {{ ::thing }} 设置一次值并持久化它，这意味着更少的观察者，这意味着更好的性能。

9. 避免使用$scope.$apply()，因为它会处理所有事情。请改用$scope.$digest()，它只会从调用它的范围内处理。

10. 将$$watchers 保持在最低限度！

11. 只捆绑你需要的东西。确保在库等方面包含最低限度的内容。

12. 不要使用 jQuery（虽然这很明显）

祝你好运！

Answer 2

2015 年 9 月 17 日更新

如今，Cordova 与 Crosswalk 的集成非常完美，建议使用它来测试和构建适用于 Android 的应用程序。

---

Darrin.ten 的回答肯定非常详细，并且包含许多很棒的提示。我想在上面提到的内容中添加一些内容：

• 人行横道。这是主要性能改进的主要工具（在 Android 4.4
• 我还目睹了导致一些主要性能问题的另一件事是背景图像和渐变，我仍然不确定整体的不透明度性能，但是当我取出这两个时，滚动和过渡速度超快。
• 使用基于硬件的 css (translate3d) 在 DOM 中移动内容。

混合应用仍然不是我们希望的样子，但希望它迟早会走上正轨。