IONIC框架移动应用性能问题

我们正在为使用IONIC框架的客户开发一个高调的移动应用程序。 我们几乎完成了这个阶段的发展。 在Web / Mobile浏览器中打开应用程序似乎运行良好。 但是,当我们使用框架命令将其移植到移动应用程序中时,应用程序变得非常缓慢并陷入困境。 这导致非常差的用户体验。

我使用命令“离子运行android”来创buildAPK。 你能帮我们解决这个问题吗? 我们无法提交用于testing此问题的APK。 有什么configuration,我可以用来加快应用程序。

此外,我在我的大部分页面中都添加了一个Ionic Loader。行为非常不一致(有时只是出现)。 这也是导致糟糕的用户体验的原因。

Solutions Collecting From Web of "IONIC框架移动应用性能问题"

您使用哪种离子加载器? 我对可用的解决scheme感到不满,最终导致了我自己的解决scheme。

你的目标是什么版本,你用什么版本(物理设备)testing?

以下是一些性能提示:

  1. 如果目标<4.4和APK大小不是问题,那么请尝试捆绑Crosswalk运行时。 离子cli很容易,你可以做ionic browser add crosswalk包括它。 性能会更好,但APK的大小会更大。

  2. ionic run android会做一个APK,但是做ionic build android要好得多

  3. 在你的gulpfile.js JS和CSS,concat和gulpfile.jsdebugging。 我在模板上使用html2js也有轻微的性能提升。

  4. 小心ng-repeat 。 而是使用collection-repeat,或者如果您必须使用ng-repeat ,那么请确保您使用的是track byfunction。

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

  6. 推迟推迟延迟! $q是你的朋友,可以帮助给出一个速度的幻觉。

  7. 只要可以使用普通的“DOM”,并不是所有的东西都需要angular度。

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

  9. 避免$scope.$apply()因为这处理所有的事情。 使用$scope.$digest()来代替,它将只从被调用的范围中处理。

  10. 保持你的$$watchers绝对最低!

  11. 只捆绑你需要的东西。 确保你包括在图书馆等方面的最低限度

  12. 不要使用jQuery(虽然这是显而易见的)

祝你好运!

更新09/17/2015

cordova与Crosswalk的整合工作今天完美,build议使用为了testing和build立Android的应用程序。


Darryn.ten的答案绝对是非常详细的,包含许多伟大的技巧。 我想添加一些东西,以上所述:

  • 人行横道 。 这是主要性能改进的主要工具(在Android 4.4中,没有内置Chromium浏览器)。 如果使用离子cli安装crosswalk导致错误和错误(因为它几乎肯定会),请下载英特尔XDK,并且可以使用Crosswalk非常容易地从那里testing/debugging/构build您的应用程序。
  • 还有一件事,我目睹了导致一些主要的性能问题是背景图像和渐变 ,我仍然不确定整体的不透明性能,但是当我拿走了这两个滚动和过渡超快。
  • 使用基于硬件的CSS( translate3d )来移动DOM的东西。

混合应用程序仍然不像我们希望的那样,但是希望迟早能够走上正确的道路。