优化 angularjs 中的 ng-bind 指令 [英] Optimise ng-bind directive in angularjs
问题描述
在我的 angular js 应用程序中,我有一个对象数组 $scope.time
,其中包含一个名称、当前时间和另一个以毫秒为单位的定义时间.在前端,我使用 ng-bind
计算这两个时间之间的差异并以 H:m:s 格式显示.请运行下面的代码.
var app = angular.module('angularapp', []);app.filter("msTotime", function() {返回函数(时间,开始,结束){var startDate = new Date(started);var endDate = 新日期(结束);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'){返回默认时间;}别的 {返回最终;}}});app.controller('list', function($scope,$window){$scope.time = [{"game":"Halo","now":1554805270181,"time":1554794475267},{"game":"CODuty","now":1554805270181,"time":1554802957031},{游戏":WOF",现在":1554805270181,时间":1554732154093},{游戏":魔兽争霸",现在":1554805270181,时间":1554803456875},{游戏":POP",现在":1554805270181,时间":1554803456275},{游戏":红牛",现在":1554805270181,时间":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>{{timer.game}} 到 H:M:S 的毫秒数 </p><br>
$scope.time
数组是动态的,因为我从 api 获取数据(为了演示,我在此处对其进行了硬编码).当我在 $scope.time
数组中有几个对象时,上面的代码可以顺利运行.但是当有数千个对象时,我的浏览器开始滞后,因为 msTotime
过滤器不断计算毫秒之间的差异并将其转换为 H:m:s
并绑定它到前端.
现在的问题是,当有 1000 个对象时,我的浏览器会消耗 40% 的 CPU.我相信 ng-repeat
不是问题,就像我注释掉 <p style="display:inline-block" ng-bind="realtime | msTotime:timer.time:timer.now">
超过 1000 个对象的 CPU 使用率仅为 5%.
有什么方法可以优化这里的 ng-bind
指令或以其他方式进行时间计算,以便 msTotime
过滤器完成的计算不消耗这么多CPU.
我建议使用 lodash https://lodash.com 库在每个对象中附加时差,而不是使用 directive
来做到这一点.因此,每次从查询中获取数据时,请使用 _.each
执行相同的操作并插入 var realtime
.
var app = angular.module('angularapp', []);app.controller('list', function($scope,$window){$scope.time = [{游戏":光环",现在":1554805270181,时间":1554794475267},{"game":"CODuty","now":1554805270181,"time":1554802957031},{游戏":WOF",现在":1554805270181,时间":1554732154093},{游戏":魔兽争霸",现在":1554805270181,时间":1554803456875},{游戏":POP",现在":1554805270181,时间":1554803456275},{游戏":红牛",现在":1554805270181,时间":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, {最小整数位数:2}) + ":" + (Math.floor(milisecondsDiff/(1000 * 60)) % 60).toLocaleString(undefined, {最小整数位数:2}) + ":" + (Math.floor(milisecondsDiff/1000) % 60).toLocaleString(undefined, {最小整数位数:2});var defaulttime = '00:00:00';如果(最终 == '-01:-01:-01'){obj.realtime = 默认时间;} 别的 {obj.realtime = 最终;}});});
<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/>{{timer.game}} <p style="display:inline-block;">{{timer.realtime}}</p><br> 到 H:M:S 的毫秒数