[笔记]ng-repeat性能优化

在AngularJS中,ng-repeat是一个我们经常用到的内置指令。

一、repeat报错

我们都知道ng-repeat中的数组存在相同的项时,会照成指令的报错。例如:

<div id="box" ng-controller="controller">
    <div ng-repeat="a in data">{{ a }}</div>
</div>

app.controller('controller', ['$scope', function($scope) {
    $scope.data = ['aaa', 'bbb', 'aaa', 'ddd'];
}]);

浏览器中运行的结果是:

此时我们通过增加track by,就可以避免报错了。将repeat改成:

<div ng-repeat="a in data track by $index">{{ a }}</div>

其实真正的原因是,repeat不允许数据集中存在两个相同Id的数据,对于数字或者字符串等基本数据类型来说,它的id就是它自身的值,而如对象等引用型的数据则不会有这个问题。

二、track by优化

前面的属于一个插曲,后面的才是正文。

ng-repeat循环生成DOM的方式有两种,一是删除所有的DOM,重新生成新的DOM,二是重复利用前面的DOM,不直接删除DOM,而是修改DOM中的内容。

为了监听DOM的移除,增加DOMNodeRemoved的监听事件。

$('#box').on('DOMNodeRemoved', function(event) { // DOM节点被移除时触发
    console.log('DOM remove');
});

前面的例子中的数据太简单了,平常我们是不会repeat一个那么简单的变量的。加入我们现在是要循环一个对象数组。修改例子:

<body ng-app="app" ng-controller="controller">
    <div id="box">
        <div ng-repeat="a in data">{{ a.name }}</div>
    </div>
    <button type="button" ng-click="changeData()">change Data</button>
</body>

app.controller('controller', ['$scope', function($scope) {
    $scope.data = [{
        name: 'aaa'
    }, {
        name: 'aaa'
    }, {
        name: 'bbb'
    }];
    $scope.changeData = function() {
        $scope.data = [{
            name: 'aaa'
        }, {
            name: 'ccc'
        }, {
            name: 'bbb'
        }];
    }
}]);

多增加了个按钮,用来改变数据。点击按钮,页面显示变化,控制台输出:

我们发现repeat下对应的DOM都发生了删除及重新生成的过程。(6是因为还要加上三个注释节点)

一旦repeat的数据过多的话,这样的操作就会过于消耗性能。

修改数据,增加上唯一的标志id。(也可以直接使用$index,自定义id的话,方便改变顺序)

<div ng-repeat="a in data track by a.id">{{ a.name }}</div>

app.controller('controller', ['$scope', function($scope) {
    $scope.data = [{
        name: 'aaa',
        id: 0
    }, {
        name: 'aaa',
        id: 1
    }, {
        name: 'bbb',
        id: 2
    }];
    $scope.changeData = function() {
        $scope.data = [{
            name: 'eee',
            id: 0
        }, {
            name: 'fff',
            id: 1
        }, {
            name: 'ggg',
            id: 2
        }];
    }
}]);

此时,点击按钮,我们发现并没有引起DOM的删除及添加,只是简单的数据修改。这样的修改方式要比前面全部删除的方式要高效的多。

其他情况测试:

1、数据减少

$scope.changeData = function() {
    $scope.data = [{
        name: 'ddd',
        id: 0
    }, {
        name: 'eee',
        id: 1
    }];
}

减少修改后的数据,此时点击按钮后,只触发了两次DOM remove,也就是只是删除了多余的一个DOM。

2、顺序变化

$scope.changeData = function() {
    $scope.data = [{
        name: 'ddd',
        id: 0
    }, {
        name: 'eee',
        id: 34
    }, {
        name: 'eee',
        id: 54
    }];
}

修改后两个数据的id值,点击按钮修改data后,发现还是触发了4次DOM remove事件。也就是repeat按照key值,决定DOM的删除还是重复利用。

三、总结

在使用ng-repeat时,尽量都带上track by,总会对程序性能总是有些优化的。

发表评论

电子邮件地址不会被公开。

*