Firebase high memory and cpu usage - performance

Question

I have the following controller
var myApp = angular.module("MyApp", ["firebase"]);
function MyController($scope, $firebase) {
var rootRef = new Firebase("vivid-fire-447.firebaseio.com/products");
// Automatically syncs everywhere in realtime
$scope.products = $firebase(rootRef);
$scope.products.$on('loaded', function(){
var index = $scope.products.$getIndex();
$scope.total = function(){
var total = 0;
index.forEach(function(i){
total += $scope.products.$child(i).price;
});
return total;
};
});
}
and the following html
<div ng-app="MyApp">
<div ng-controller="MyController">
<ul>
<li ng-repeat="product in products | orderByPriority">{{product.code}}</li>
</ul>
<div>Total = {{total()}}</div>
</div>
</div>
The problem is that when I show the total price of products Chrome cpu gets pegged at 100% and memory usage starts climbing rapidly and eventually the tab hangs.
I noted using AngularJS Batarang that total method gets called continuosly?
How can I get the total price of all products in an efficient way?
JsFiddle

Answer 1

I tried your example and it ran without issue; it loaded in less than 1 second. I don't think your code/data shown above accurately captured the problem. However, I did note a couple potential issues you would start with.
The definition for $scope.getTotal is inside the loaded event for $scope.products which means that function may exist the first time Angular tries to compile this page. You can correct that by giving it an empty array initially, and moving it out of the loaded callback:
$scope.products = $firebase(rootRef);
var index = [];
$scope.products.$on('loaded', function(){
index = $scope.products.$getIndex();
});
$scope.total = function(){ /*...*/ }
The code creates a new synchronized connection to Firebase for each record by calling $child. There is no need for this since all the data is already present in the parent object. In general, you don't need to use $child as it's for some specialized use cases:
total += $scope.products[key].price; // far more efficient!
Here's a fiddle demonstrating the changes. On my box it loads in less than half a second, even with the overhead of fiddle's containing code.
http://jsfiddle.net/katowulf/Q6VPx/