火力地堡高内存和CPU使用率

我有以下控制器火力地堡高内存和CPU使用率

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; 
      }; 
     }); 

     }

和下面的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>

的问题是，当我告诉产品铬CPU的总价被在100挂％和内存使用率开始迅速攀升，最终该选项卡挂起。

我注意到使用AngularJS Batarang，总方法被称为连续？

如何以有效的方式获得所有产品的总价格？

JsFiddle

来源

2014-03-28 Cesar

我想你的例子，其运行没有任何问题;它在不到1秒内加载。我不认为你上面显示的代码/数据准确地反映了这个问题。不过，我确实记下了一些可能会遇到的问题。

$scope.getTotal的定义位于$scope.products的加载事件中，这意味着该函数可能在Angular首次尝试编译此页时存在。您可以矫正通过给它一个空数组开始，并移出加载的回调：

$scope.products = $firebase(rootRef); 
    var index = []; 
    $scope.products.$on('loaded', function(){ 
     index = $scope.products.$getIndex(); 
    }); 
    $scope.total = function(){ /*...*/ }

的代码创建通过调用$child到火力地堡一个新的同步连接每个记录。因为所有的数据已经存在于父对象中，所以没有必要这样做。一般情况下，你不需要使用$child，因为它是为一些特殊用例：

total += $scope.products[key].price; // far more efficient!

这里有一个小提琴展示了变化。在我的盒子里，它的加载时间不到半秒钟，即使是小提琴包含代码的开销。

http://jsfiddle.net/katowulf/Q6VPx/

来源

2014-03-28 16:38:45 Kato

我的代码加载速度快，问题就陷入了一个无限循环（你必须改变我的小提琴插值'总（）'然后使用Chrome的任务管理器，查看症状），我最好的shot：$ child会以某种方式导致更改事件，并且会角度调用'total（）'，这会再次触发更改事件，等等。你的代码通过不使用'$ child'解决了这个问题，谢谢！并感谢其他指针。 – Cesar

塞萨尔，这是有道理的，似乎极有可能是罪魁祸首！ – Kato

火力地堡高内存和CPU使用率

回答

相关问题