AngularJS中ng-bind与时间转换性能优化问题咨询

我之前在维护AngularJS项目的时候也碰到过一模一样的问题——大数据量下过滤器重复计算导致CPU飙升，给你几个亲测有效的优化方案：

方案1：预计算时间差值并缓存到数据对象中 #

过滤器的核心问题在于Angular的脏检查循环会反复执行它——哪怕你的timer.time和timer.now没有变化，每次digest都会重新计算一遍。最直接的优化就是把计算逻辑从过滤器移到控制器里，提前算好结果存在数组对象里，前端直接展示即可。

修改你的控制器代码：

app.controller('list', function($scope,$window) {
    // 抽离时间转换逻辑为独立函数
    function msToTime(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';
        return final === '-01:-01:-01' ? defaulttime : final;
    }

    $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}];

    // 预计算每个对象的时间差字符串
    $scope.time.forEach(timer => {
        timer.durationStr = msToTime(timer.time, timer.now);
    });

    // 如果数据是从API动态获取的，记得在请求成功后执行预计算
    // 示例：
    // $http.get('/api/time-data').then(res => {
    //     $scope.time = res.data;
    //     $scope.time.forEach(timer => {
    //         timer.durationStr = msToTime(timer.time, timer.now);
    //     });
    // });
});

然后修改HTML，直接绑定预计算好的字符串：

<p style="display:inline-block" ng-bind="timer.durationStr"></p>

这个方案从根源上消除了重复计算，CPU占用会直接降下来，适合数据更新频率不高的场景。如果now或time需要实时更新，只需在数据变化时重新调用msToTime更新durationStr即可。

方案2：给过滤器添加记忆化（Memoization）缓存 #

如果必须保留过滤器（比如需要在多个组件中复用转换逻辑），可以给过滤器加个缓存层，相同的started和ended组合只计算一次。

修改你的过滤器代码：

app.filter("msTotime", function() {
    // 用对象缓存计算结果，key为`started-ended`的唯一字符串
    const cache = {};

    return function(timee, started, ended) {
        const cacheKey = `${started}-${ended}`;
        // 缓存命中直接返回结果
        if (cache[cacheKey]) {
            return cache[cacheKey];
        }

        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';
        const result = final === '-01:-01:-01' ? defaulttime : final;
        
        // 将结果存入缓存
        cache[cacheKey] = result;
        return result;
    }
});

如果多个对象有相同的time和now值，过滤器只会计算一次，重复调用直接取缓存。注意如果时间值会频繁变化，建议定期清理缓存避免内存占用过高。

方案3：使用一次性绑定（One-time Binding） #

如果你的时间数据不会实时更新，或者只需要初始化时计算一次，可以用AngularJS的一次性绑定语法::，这样Angular在第一次digest后就不会再检查这个绑定，彻底停止重复计算。

修改HTML的ng-bind：

<p style="display:inline-block" ng-bind="::'' | msTotime:timer.time:timer.now"></p>
<!-- 也可以用插值语法：{{::'' | msTotime:timer.time:timer.now}} -->

这个方案适合静态数据场景，能大幅减少脏检查的工作量，实现成本最低。

内容的提问来源于stack exchange，提问作者node_man