IONIC 框架移动应用程序性能问题 [英] IONIC framework Mobile Application Performance Issue

问题描述

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

We are developing a high profile mobile application for one of our clients using the IONIC framework. We are almost done with the development for this phase. The application seems to be working well when opening in Web/Mobile Browser. However, when we port this into a mobile application using the framework commands the application becomes very slow and gets stuck a lot. This is resulting in a very poor user experience.

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

I am using the command "ionic run android" to create the APK. Could you please help us with this issue? We are not able to submit the APK for testing with this issue. Is there any configuration that i could use to speed up the application.

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

Also, I have added a Ionic Loader in most of my pages.The behaviour is very inconsistent (it appears sometimes only). This is also contributing to a poor user experience.

推荐答案

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

Which Ionic Loader are you using? I was unhappy with the available solutions and ended up rolling my own solution.

您的目标是哪个版本，您使用(物理设备)测试哪个版本?

What version are you targeting, and what version are you testing with (physical device)?

以下是一些性能提示:

1. 如果定位<4.4 和 APK 大小不是问题，然后尝试捆绑人行横道运行时.使用 ionic cli 相当容易，您只需执行 ionic browser add crosswalk 即可将其包含在内.性能会更好，但 APK 大小会更大.

1. If targeting < 4.4 and APK size is not an issue then try bundling the crosswalk runtime. It's fairly easy with the ionic cli, you can just do ionic browser add crosswalk to include it. Performance will be better, but APK size will be larger.

ionic run android 会制作一个APK，但最好做ionic build android

ionic run android will make an APK, but it is much better to do ionic build android

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

Minify JS and CSS, concat, and strip debug in your gulpfile.js. I've also had slight performance gains using html2js on the templates.

注意 ng-repeat.而是使用 collection-repeat 或者，如果您必须使用 ng-repeat，然后确保您正在使用 track by 功能.

Watch out for ng-repeat. Rather use collection-repeat or, if you must use ng-repeat, then make sure you're using the track by feature.

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

Filters can have a negative impact on performance. Use directives where possible.

推迟推迟推迟！$q 是你的朋友，可以帮助营造出速度的错觉.

Defer defer defer! $q is your friend and can help give an illusion of speed.

尽可能使用普通的 DOM，并不是所有的东西都必须是 Angular.

Just use plain ol' DOM when you can, not everything needs to be Angular.

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

Use one-time binding where possible. {{ ::thing }} sets the value once and persists it, which means less watchers, which means better performance.

避免使用 $scope.$apply() 因为这会处理所有事情.使用 $scope.$digest() 代替，它只会从它被调用的范围内处理.

Avoid $scope.$apply() as this processes all the things. Use $scope.$digest() instead and it will only be processed from the scope it is called from.

尽量减少 $$watchers 的数量！

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

Only bundle what you need. Make sure you're including the bare minimum in terms of libraries etc.

不要使用 jQuery(虽然这很明显)

Don't use jQuery (although this is obvious)

祝你好运！

这篇关于IONIC 框架移动应用程序性能问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！