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

Question

我们正在使用IONIC框架为我们的客户开发一个高调的移动应用程序.我们几乎完成了这个阶段的开发.在Web/Mobile Browser中打开时,该应用程序似乎运行良好.但是,当我们使用框架命令将其移植到移动应用程序中时,应用程序变得非常慢并且卡住很多.这导致非常差的用户体验.

我使用命令"ionic run android"来创建APK.你能帮我们解决这个问题吗？我们无法提交此APK以进行测试.是否有任何配置可用于加速应用程序.

此外,我在大多数页面中添加了一个Ionic Loader.行为非常不一致(有时只出现).这也导致糟糕的用户体验.

Answer 1

您使用的是哪种Ionic Loader？我对可用的解决方案感到不满,最终推出了自己的解决方案.

您定位的是哪个版本,以及您正在测试的版本(物理设备)？

以下是一些性能提示:

1. 如果定位<4.4且APK大小不是问题,请尝试捆绑crosswalk运行时.使用离子cli相当容易,你可以做到ionic browser add crosswalk包含它.性能会更好,但APK大小会更大.

2. ionic run android 会制作一个APK,但这样做要好得多 ionic build android

3. 缩小JS和CSS,连接和剥离调试gulpfile.js.我在模板上使用html2js也有轻微的性能提升.

4. 提防ng-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应用程序.

Darryn.ten的答案肯定非常详细,包含许多很棒的提示.我想在上面提到的内容中添加一些内容:

• 人行横道.这是主要性能改进的主要工具(在Android 4.4中,它没有内置Chromium浏览器).如果使用离子cli安装crosswalk会导致错误和错误(因为它几乎肯定会),下载Intel XDK并且您可以非常轻松地使用Crosswalk从那里测试/调试/构建您的应用程序.
• 我目睹的另一件事导致一些主要的性能问题是背景图像和渐变,我仍然不确定整体的不透明度性能,但是当我取出这两个时,滚动和转换变得非常快.
• 使用基于硬件的css(translate3d)来移动DOM周围的东西.

混合应用程序仍然不像我们希望的那样,但希望它迟早会以正确的方式运行.