0

I have a Cordova/AngularJS/Firebase app that makes use of angular fire library.

I am trying to fix some performance issues, mostly on the "resume" function when the app is re-opened from the background it appears to freeze for a couple seconds.

My profiling remotely in safari shows that several "timer installed" and "timer removed" are being called, as many as 50 in a row. During this process the app is frozen, can anybody point me in a direction to try and fix this? Do I need to be disposing of some resource? Angular fire documentation says that all watches are destroyed when the controller scope that contains them is destroyed. How can I further debug this to find out what is going on?

events fired during profiling

I have several services classes that follow a pattern like this for opening connections:

(function () {

angular.module('myApp').service('someService', 
          ['$firebaseObject', 
           '$firebaseArray', 
           '$rootScope',
 function ($firebaseObject, $firebaseArray, $rootScope) {


    this.dbUsers = firebase.database().ref('users');
    this.dbNotifications = firebase.database().ref('notifications');
    this.dbMessages = firebase.database().ref('messages');



}]);//fireService

})();

Should I be disposing of these connections or closing them somehow? My controllers access these services frequently, all which open connections in the beginning like this example

Stradosphere
  • 1,285
  • 3
  • 14
  • 40

2 Answers2

1

Either there is a large queue of events and it is playing catchup, or you have multiple connections accidentally. It is impossible to be more specific without seeing code.

Joshua J Wilborn
  • 526
  • 3
  • 13
  • The multiple connections thing might be my issue. Being that controller resources are disposed, it might be where I am opening connections in angular service classes. If I do something like... this.db = firebase.database().ref('events'); in a service class is there something I should do to free this resources or close this connection? Thanks for any help – Stradosphere Mar 30 '17 at 02:42
  • 1
    wherever your connection is opened can you add all that related code up top? – Joshua J Wilborn Mar 30 '17 at 05:12
  • I added snippet above which relates to how my services are structured for opening connections. Let me know if there is more you need to see, but basically my service classes define those connections at the top, then they are used by functions throughout the service class. – Stradosphere Mar 30 '17 at 15:22
1

From this sentence from your question:

I am trying to fix some performance issues, mostly on the "resume" function when the app is re-opened from the background it appears to freeze for a couple seconds.

It really seems you are loading a lot of data that freeze the app. A real solution would be to limit the number of rows you are trying to display.

There are two common solutions:

Paginate the result

You can use for exemple the AngularUI pagination directive. See also this question dealing with how to use it on an Angular app.

Use the limitTo filter

This solution will be less good in terms of performance, but maybe better adapted to your needs (as you may not be able to edit server side).

limitTo is a core Angular directive that allow you limit the amount of lines displayed by a ng-repeat (in the following example, 50):

<tr ng-repeat="item in items | limitTo: 50">{{item}}</tr>

Note that you can move the limit value to a scope variable. You can modify it to update the number of items you want to display:

var myApp = angular.module('app', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {
  $scope.items = [];
  $scope.limit = 5; // default limit
  
  for(let i = 0; i < 100; i++) $scope.items.push(i); // generate data
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="MyCtrl">
    <ul>
        <li ng-repeat="i in items | limitTo: limit">{{i}}</li>
    </ul>
    <button ng-click="limit = limit + 5">Show more results</button>
</div>
Community
  • 1
  • 1
Mistalis
  • 17,793
  • 13
  • 73
  • 97