優化angularjs中的ng-bind指令

Question

在我的angular js應用程序中，我有一個對象$scope.time數組，其中包含一個名稱，當前時間和另一個定義的時間（以毫秒為單位）。 在前端，我使用ng-bind計算這兩個時間之間的時差，並以H：m：s格式顯示。 請運行下面的代碼。

 var app = angular.module('angularapp', []); app.filter("msTotime", function() { return function(timee,started,ended) { var startDate = new Date(started); var endDate = new Date(ended); var milisecondsDiff = endDate - startDate; var final = Math.floor(milisecondsDiff/(1000*60*60)).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/(1000*60))%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) + ":" + (Math.floor(milisecondsDiff/1000)%60).toLocaleString(undefined, {minimumIntegerDigits: 2}) ; var defaulttime = '00:00:00'; if(final == '-01:-01:-01'){ return defaulttime; } else { return final; } } }); app.controller('list', function($scope,$window) { $scope.time = [{"game":"Halo","now":1554805270181,"time":1554794475267}, {"game":"CODuty","now":1554805270181,"time":1554802957031}, {"game":"WOF","now":1554805270181,"time":1554732154093}, {"game":"WarCraft","now":1554805270181,"time":1554803456875}, {"game":"POP","now":1554805270181,"time":1554803456275}, {"game":"RedBulls","now":1554805270181,"time":1554800620012}, {"game":"Eragon","now":1554805270181,"time":1554433320072}]; }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> <div ng-app="angularapp"> <div ng-controller="list" > <div ng-repeat="timer in time"> <h5>{{timer.game}}</h5><hr> Milliseconds to H:M:S for {{timer.game}} <p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now"></p><br> </div> </div> </div> 

當我從api獲取數據時， $scope.time數組是動態的（出於演示目的，我在此處定義了硬編碼）。 當我在$scope.time數組中有幾個對象時，上面的代碼可以正常工作。 但是，當有成千上萬的對象時，我的瀏覽器開始滯后，因為msTotime過濾器不斷計算毫秒之間的差，並將其轉換為H:m:s並將其綁定到前端。

現在的問題是，當有1000個對象時，我的瀏覽器消耗40％的CPU。 我認為ng-repeat並不是問題，因為當我注釋掉<p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now"> CPU使用率僅為5超過1000個對象的百分比。

這里有什么方法可以優化ng-bind指令或以其他方式進行時間計算，從而使msTotime過濾器完成的計算不會消耗太多的CPU。

Answer 1

我建議使用lodash https://lodash.com庫在每個對象中附加時間差，而不要使用directive來做到這一點。 因此，每次從查詢中獲取數據時，請使用_.each進行相同的操作並插入var realtime 。

 var app = angular.module('angularapp', []); app.controller('list', function($scope,$window) { $scope.time = [ {"game":"Halo","now":1554805270181,"time":1554794475267}, {"game":"CODuty","now":1554805270181,"time":1554802957031}, {"game":"WOF","now":1554805270181,"time":1554732154093}, {"game":"WarCraft","now":1554805270181,"time":1554803456875}, {"game":"POP","now":1554805270181,"time":1554803456275}, {"game":"RedBulls","now":1554805270181,"time":1554800620012}, {"game":"Eragon","now":1554805270181,"time":1554433320072} ]; _.each($scope.time, function(obj, index){ var startDate = new Date(obj.time); var endDate = new Date(obj.now); var milisecondsDiff = endDate - startDate; var final = Math.floor(milisecondsDiff / (1000 * 60 * 60)).toLocaleString(undefined, { minimumIntegerDigits: 2 }) + ":" + (Math.floor(milisecondsDiff / (1000 * 60)) % 60).toLocaleString(undefined, { minimumIntegerDigits: 2 }) + ":" + (Math.floor(milisecondsDiff / 1000) % 60).toLocaleString(undefined, { minimumIntegerDigits: 2 }); var defaulttime = '00:00:00'; if (final == '-01:-01:-01') { obj.realtime = defaulttime; } else { obj.realtime = final; } }); }); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.10/angular.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.core.min.js"></script> <div ng-app="angularapp"> <div ng-controller="list" > <div ng-repeat="timer in time"> <h5>{{timer.game}}</h5><hr/> Milliseconds to H:M:S for {{timer.game}} <p style="display:inline-block;">{{timer.realtime}}</p><br> </div> </div> </div>