I have installed an Ionic app (beta 14) on my Android (Lollipop) device using:
我在Android(Lollipop)设备上安装了一个Ionic app(beta 14),使用:
ionic platform add android
ionic run android
I have also manually built the app and installed it with adb.
我还手动构建了应用程序并使用adb安装它。
The app uses ion-side-menus, and the animations for the transitions between simple views (list -> detail -> detail) are incredibly laggy on a capable phone. The animation when the side menu slides out is very smooth in contrast.
该应用程序使用离子侧菜单,简单视图(列表 - >详细信息 - >详细信息)之间转换的动画在功能强大的手机上非常滞后。侧面菜单滑出时的动画对比非常平滑。
To further investigate the situation, I served the www directory from my dev machine and opened that page in Chrome on the phone and it was as smooth as one would expect. The app also runs smoothly on iOS devices.
为了进一步调查这种情况,我从我的开发机器上提供了www目录,并在手机上的Chrome中打开了该页面,它就像人们期望的那样顺利。该应用程序也可以在iOS设备上顺利运行。
Does anyone have any clues as to why it is so slow when the app is in Ionic, but performs as expected when it is just being rendered in the browser?
当应用程序处于离子状态时,有没有人知道为什么它如此缓慢,但是当它只是在浏览器中呈现时,它会按预期执行?
3 个解决方案
#1
7
I faced with the same issue. It's worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:
我遇到了同样的问题。在需要加载大量信息的情况下更糟糕。在这种情况下,我通过设置禁用过渡效果:
nav-transition=none
if you need to disable the transition from your controller, do the following:
如果您需要禁用从控制器的转换,请执行以下操作:
app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
$ionicViewSwitcher.nextTransition('none');
$state.go('back');
});
#2
2
I found some solutions by which I face problem in ionic app transitiosn..
我发现了一些我在离子应用程序中遇到问题的解决方案..
- After State Change I use this code..
- 状态更改后我使用此代码..
//OnState Change..
// OnState Change ..
$scope.$on('$stateChangeSuccess', function() {
$ionicLoading.show();
MyTeamListing();
})
which hit serve every time when i change state.. which is slow down the app.
当我改变状态时,每次点击服务...这会减慢应用程序的速度。
i just Remove first line and my code is working fine...
我只是删除第一行,我的代码工作正常...
I don't know it is a good or bad way but its working for me fine..
我不知道这是一个好的或坏的方式,但它为我工作很好..
Transaction is become slow if too much data is load on transaction so that I use ionic events which load data after transaction done.
如果在事务上加载太多数据,则事务变得缓慢,因此我使用在事务完成后加载数据的离子事件。
$scope.$on('$ionicView.afterEnter', function(){
console.log("afterEnter");
$ionicLoading.show();
loadRemoteData();
$ionicLoading.hide();
});
#3
0
Well, the perks of developing hybrid application is its code re-usability and faster development however, what advantage we get on development results in slow hybrid apps. We can make the application relatively faster if we follow following points:
嗯,开发混合应用程序的好处是它的代码可重用性和更快的开发,然而,我们在开发上获得的优势导致混合应用程序的速度慢。如果我们遵循以下几点,我们可以使应用程序相对更快:
- absolutely remove the comments and unnecessary functions
- 绝对删除评论和不必要的功能
- minimize the white-space, make your functions as small as possible
- 最小化空白区域,使您的功能尽可能小
- use minified css and js
- 使用缩小的css和js
- optimize the images, the fewer the images the faster the application
- 优化图像,图像越少,应用程序越快
- if possible, preload the images check here
- 如果可能的话,请在此处预先加载图片
- keep the nonessential js file to the bottom of the page just before the end of body tag
- 将非必要的js文件保留在body标记结束之前的页面底部
- remove the unnecessary pages, unnecessary scrolling and large pages.
- 删除不必要的页面,不必要的滚动和大页面。
- limit the usage of input boxes; make use of radio buttons,checkboxes and comboboxes if possible.
- 限制输入框的使用;如果可能的话,使用单选按钮,复选框和组合框。
- don't use jquery library unless of utmost necessity, use javascript
- 除非极为必要,否则不要使用jquery库,请使用javascript
#1
7
I faced with the same issue. It's worse in cases that you need to load a lot of information. In those occasion, I disable the transition effect by setting:
我遇到了同样的问题。在需要加载大量信息的情况下更糟糕。在这种情况下,我通过设置禁用过渡效果:
nav-transition=none
if you need to disable the transition from your controller, do the following:
如果您需要禁用从控制器的转换,请执行以下操作:
app.controller('ctrl', function($scope,$state, $ionicViewSwitcher){ $scope.goBack = function(){
$ionicViewSwitcher.nextTransition('none');
$state.go('back');
});
#2
2
I found some solutions by which I face problem in ionic app transitiosn..
我发现了一些我在离子应用程序中遇到问题的解决方案..
- After State Change I use this code..
- 状态更改后我使用此代码..
//OnState Change..
// OnState Change ..
$scope.$on('$stateChangeSuccess', function() {
$ionicLoading.show();
MyTeamListing();
})
which hit serve every time when i change state.. which is slow down the app.
当我改变状态时,每次点击服务...这会减慢应用程序的速度。
i just Remove first line and my code is working fine...
我只是删除第一行,我的代码工作正常...
I don't know it is a good or bad way but its working for me fine..
我不知道这是一个好的或坏的方式,但它为我工作很好..
Transaction is become slow if too much data is load on transaction so that I use ionic events which load data after transaction done.
如果在事务上加载太多数据,则事务变得缓慢,因此我使用在事务完成后加载数据的离子事件。
$scope.$on('$ionicView.afterEnter', function(){
console.log("afterEnter");
$ionicLoading.show();
loadRemoteData();
$ionicLoading.hide();
});
#3
0
Well, the perks of developing hybrid application is its code re-usability and faster development however, what advantage we get on development results in slow hybrid apps. We can make the application relatively faster if we follow following points:
嗯,开发混合应用程序的好处是它的代码可重用性和更快的开发,然而,我们在开发上获得的优势导致混合应用程序的速度慢。如果我们遵循以下几点,我们可以使应用程序相对更快:
- absolutely remove the comments and unnecessary functions
- 绝对删除评论和不必要的功能
- minimize the white-space, make your functions as small as possible
- 最小化空白区域,使您的功能尽可能小
- use minified css and js
- 使用缩小的css和js
- optimize the images, the fewer the images the faster the application
- 优化图像,图像越少,应用程序越快
- if possible, preload the images check here
- 如果可能的话,请在此处预先加载图片
- keep the nonessential js file to the bottom of the page just before the end of body tag
- 将非必要的js文件保留在body标记结束之前的页面底部
- remove the unnecessary pages, unnecessary scrolling and large pages.
- 删除不必要的页面,不必要的滚动和大页面。
- limit the usage of input boxes; make use of radio buttons,checkboxes and comboboxes if possible.
- 限制输入框的使用;如果可能的话,使用单选按钮,复选框和组合框。
- don't use jquery library unless of utmost necessity, use javascript
- 除非极为必要,否则不要使用jquery库,请使用javascript