首页 > 代码库 > angular中关于ng-repeat的性能问题

angular中关于ng-repeat的性能问题

首先,ng-repeat的渲染是改变则渲染的。而且是无法自动检测内容是否改变的。

$scope作为一个对象,对象的特性就是两个对象是不相同的,因为我们比较的是两个对象的地址,即便两个对象的内容甚至排版完全相同,也是false;

基于此,我们只能自己来限制它无意义的渲染。

我在做一个即时聊天板块,用到的angular,期间需要轮询,所以自己搞了一些办法来提高性能。

首先,我比较了$scope中子属性的内容——$scope.names。而names是一个Array类型的。也是没办法直接比较的。此处用到数组比较的另一个方法,转字符串。看代码:

.success(function (data){
    if(lianxiren != data.toString()){
        lianxiren = data.toString();
        $scope.names = data;
    }
})

OK,很简单。如果一样,啥也不干,如果不同,先存起来,然后赋给names。

这样就完了吗?并不。

既然是即时聊天,聊个几十上百句都是毛毛雨,嗨皮了聊上几百句也是正常的。

辣么,每次都重复渲染是不是很烦?而且如果记录多了,更是耗时间。

不怕,有办法。

ng-repeat="x in names track by $index"

track by。

我们只需要给已经渲染过的条目加上一个唯一标识符就可以让angular识别出来了。而标识符的内容,我选择了$index。

其实只要是唯一的就可以,自由发挥。

angular中关于ng-repeat的性能问题