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

IONIC framework Mobile Application Performance Issue

本文关键字：性能 问题 应用程序 移动 框架      更新时间：2023-09-26

我们正在为我们的一个客户开发一个使用IONIC框架的高端移动应用程序。我们几乎完成了这一阶段的开发。该应用程序似乎在以下情况下运行良好在网络/移动浏览器中打开。但是，当我们使用框架命令将其移植到移动应用程序中时应用程序变得非常慢并且卡住很多。这会导致用户体验非常差。

我正在使用命令"离子运行安卓"来创建APK。你能帮助我们解决这个问题吗？我们无法提交 APK 以测试此问题。是否有任何配置可用于加快应用程序的速度。

另外，我在大多数页面中添加了一个离子加载器。行为非常不一致（有时仅出现）。这也导致了糟糕的用户体验。

您使用的是哪种离子装载机？我对可用的解决方案不满意，最终推出了自己的解决方案。

您的目标版本是什么，您使用什么版本（物理设备）进行测试？

以下是一些性能提示：

  1. 如果定位<4.4 和 APK 大小不是问题，请尝试捆绑人行横道运行时。使用ionic 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. 推迟

  6. 推迟！ $q是你的朋友，可以帮助给人一种速度的错觉。

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

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

  9. 避免$scope.$apply()因为这会处理所有事情。请改用$scope.$digest()，它只会从调用它的作用域进行处理。

  10. 将您的$$watchers保持在绝对最低限度！

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

  12. 不要使用jQuery（尽管这很明显）

祝你好运！

更新 09/17/2015

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

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

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

混合应用程序仍然不像我们希望的那样，但希望它迟早会走上正确的道路。

相关文章：